【html本地工具】html+JavaScript实现一个好看的颜色码查询器，支持查询、转换、颜色选择器和颜色码对照表_js颜色代码对照表

作者：知新_RL | 2024-02-26 06:04:32

踩

js颜色代码对照表

前言

相信大家平时工作的时候应该会经常用到颜色码吧，比如说想找个好看的颜色，或者有个颜色码但是不知道这个码是什么颜色的，这个时候我们就可以用颜色码对照表或者颜色码查询来查看了。

当然也可以用截图软件或者取色器或者PS来查看，不过这终究不是很方便、全面。这个时候我们可以自己写一个颜色码对照表，然后把它收藏到标签栏，用的时候随时打开随时用。

这个时候有人可能要说这种网站随便网上一搜多的是。是，确实有很多，但这终究是别人的网站，无法定制化。所谓定制化就是把自己经常用到的颜色用色块列出来，下次用的时候直接打开一看，你就知道具体颜色是什么样的，然后就可以复制颜色码使用了。不然每次用的时候又没记住码，去网站上找都找花了眼，然后还得去翻看以前的使用记录，看看到底是哪个颜色码。

所以自己写一个html，把自己经常用到的颜色写上去就很方便了。

效果

我们先来看看效果图吧。

在这里插入图片描述

最上面两个输入框，就是rgb和hex相互转换；输入颜色值后，输入框后面的小方块会自动变成对应的颜色，点击色块，自动复制颜色码。

中间那块就是颜色选择器，其中左边那一片色块区域，就是放自己经常用到的颜色码，直接点击色块，自动复制颜色码，并且右边的颜色选择器和两个输入框也会自动选择/输出对应的颜色。

最下面那块就是颜色大全，点击色块或者旁边的文字，都可以直接复制颜色码。

单击复制颜色码：

在这里插入图片描述

代码

接下来就是代码了。代码比较多，主要是最下面那块颜色大全是写死在html上的，不像上面那个常用颜色色块是动态创建的元素。因为考虑到这个颜色大全非常多，有五百多个td元素，这动态创建的话，我怕页面会卡，所以就直接写死了。这里的话我没有把那五百多个td元素写上了，完整的可以去资源下载或者是去我给的git链接上下载。

<!DOCTYPE html>
<html>
<head>
  <title>RGB颜色查询对照表</title>
  <style>
    *{
        margin: 0 auto;
    }
    body{
      background-color: #68768a;
    }
	/* 设置滚动条的样式 */
	::-webkit-scrollbar {
		width:5px;
	}
	/* 滚动槽 */
	::-webkit-scrollbar-track {
		-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
		border-radius:10px;
	}
	/* 滚动条滑块 */
	::-webkit-scrollbar-thumb {
		border-radius:10px;
		background:rgba(0,0,0,0.1);
		-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);
	}
	::-webkit-scrollbar-thumb:window-inactive {
		background:rgba(30, 144, 255,0.4);
	}
    .main{
      position: relative;
      top: 30px;
      width: 90%;
      text-align: center;
    }
    .RGB转HEX{
      margin-bottom: 30px;
    }
    label{
      color: #00bfff;
      font-size: 1.5em;
    }
    #色值转换 input{
      width: 300px;
      height: 30px;
      padding: 10px;
      font-size: 18px;
      border-radius: 10px;
      border: none;
    }
    .color-block {
      display: inline-block;
      width: 48px;
      height: 48px;
      border: 1px solid #1e90ff;
      vertical-align: top;
    }
    #颜色选择器{
      margin-top: 40px;
    }
    ul{
        display: flex;
        flex-wrap: wrap;
        width: 250px;
        float: left;
        margin-left: 35%;
    }
    li{
        list-style: none;
        width: 20px;
        height: 20px;
        margin: 2.5px;
        cursor: pointer;
    }
    .颜色选择器{
      float: left;
      margin-left: 20px;
    }
    #colorPicker{
      height: 48px;
      vertical-align: top;
      display: inline-block;
    }
    #colorInputRgb, #colorInputHex{
      width: 150px;
      height: 30px;
      padding: 10px;
      font-size: 18px;
      border-radius: 10px;
      border: none;
      display: inherit;
      margin-top: 20px;
    }
	#颜色大全{
		margin-top: 450px;
	}
	td:nth-child(odd) {
	  height:30px;
	  width:30px;
	}
	td:nth-child(even) {
	  color: #005caf;
	  font: 12px/18px Verdana;
	}
	td:hover{
	  cursor: pointer
	}
  </style>
  
  <style type="text/css">
    /*----------------------------------------- 设置消息弹框的样式 --------------------------------------*/
    /*预定义样式，通过js动态生成dom时，加上指定类名*/
    .dpn-message {
      font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif;
      font-size: 12px;
      z-index: 99999;
    }
    
    .dpn-message {
      box-sizing: border-box;
      position: fixed;
      top: -200px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 99999;
      padding: 15px;
      padding-right: 32px;
      min-width: 20%;
      max-width: 50%;
      border-radius: 4px;
      transition: top .3s;
    }
    
    /*info 消息*/
    .dpn-message.dpn-info {
      background: #EDF2FC;
      border: 1px solid #EBEEF5;
      color: #909399;
    }
    
    /*success消息*/
    .dpn-message.dpn-success {
      background: #f0f9eb;
      border: 1px solid #54f006;
      color: #67C23A;
    }
    
    /*error消息*/
    .dpn-message.dpn-error {
      background: #fef0f0;
      border: 1px solid #fde2e2;
      color: #F56C6C;
    }
    /*warning消息*/
    
    .dpn-message.dpn-warning {
      background: #fdf6ec;
      border: 1px solid #faecd8;
      color: #E6A23C;
    }
    
    .dpn-message .dpn-close {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      font-style: normal;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="main">
    <div id="色值转换">
      <div class="RGB转HEX">
        <label>RGB转HEX：</label>
        <input type="text" id="rgbInput" onblur="convertRGBtoHEX()" oninput="convertRGBtoHEX()" placeholder="255,255,255"/>
        <div id="rgbToHexColor" class="color-block"></div>
      </div>
  
      <div class="HEX转RGB">
        <label>HEX转RGB：</label>
        <input type="text" id="hexInput" onblur="convertHEXtoRGB()" oninput="convertHEXtoRGB()" placeholder="000 或 000000"/>
        <div id="hexToRgbColor" class="color-block"></div>
      </div>
    </div>
  
    <div id="颜色选择器">
        <ul id="color-ur"></ul>
        <div class="颜色选择器">
          <input type="color" id="colorPicker" onchange="updateColorPicker()" />
          <input type="text" id="colorInputRgb" oninput="updateColorInputRgb()" placeholder="rgb颜色值"/>
          <input type="text" id="colorInputHex" oninput="updateColorInputHex()" placeholder="hex颜色值"/>
        </div>
    </div>
	
	<div id="颜色大全">
		<table cellspacing="3">
			<!-- 这里省略颜色大全tbody -->
		</table>
	</div>
	
  </div>
  

  <!-- 动态创建消息弹框 -->
  <script type="text/javascript">
    class MessageBox {
      constructor(options) {
        // 把传递进来的配置信息挂载到实例上（以后可以基于实例在各个方法各个地方拿到这个信息）
        for(let key in options) {
          if(!options.hasOwnProperty(key)) break;
          this[key] = options[key];
        }
  
        // 开始执行
        this.init();
      }
      // 初始化：通过执行INIT控制逻辑的进行
      init() {
        if(this.status === "message") {
          this.createMessage();
          this.open();
          return;
        }
  
      }
      // 创建元素
      createMessage() {
        this.messageBox = document.createElement('div');
        this.messageBox.className = `dpn-message dpn-${this.type}`;
        this.messageBox.innerHTML = `
        ${this.message}
        <i class="dpn-close">X</i>
      `;
        document.body.appendChild(this.messageBox);
  
        // 基于事件委托监听关闭按钮的点击
        this.messageBox.onclick = ev => {
          let target = ev.target;
          //判断点击的元素是否为关闭按钮
          if(target.className === "dpn-close") {
            // 点击的是关闭按钮
            this.close();
          }
        };
  
        // 钩子函数
        this.oninit();
      }
  
      // 控制显示
      open() {
        if(this.status === "message") {
          let messageBoxs = document.querySelectorAll('.dpn-message'),
            len = messageBoxs.length;
          //计算新弹出的messageBox的Y轴偏移量
          this.messageBox.style.top = `${len===1 ? 20:20+(len-1)*70}px`;
  
          // 如果duration不为零，控制自动消失
          this.autoTimer = setTimeout(() => {
            this.close();
          }, this.duration);
  
          // 钩子函数
          this.onopen();
          return;
        }
      }
      // 控制隐藏
      close() {
        if(this.status === "message") {
          clearTimeout(this.autoTimer);
          this.messageBox.style.top = '-200px';
          let anonymous = () => {
            document.body.removeChild(this.messageBox);
            // 钩子函数
            this.onclose();
          };
          this.messageBox.addEventListener('transitionend', anonymous);
          return;
        }
  
      }
    }
  
    //全局对象上挂载该方法
    window.messageplugin = function(options = {}) {
      //允许只传入字符串，对其进行对象格式处理
      if(typeof options === "string") {
        options = {
          message: options
        };
      }
      //用户提供的配置覆盖默认配置项
      options = Object.assign({
        status: 'message',
        message: '我是默认信息',
        type: 'info',
        duration: 3000,
        //生命周期钩子
        oninit() {},
        onopen() {},
        onclose() {},
      }, options);
      return new MessageBox(options);
    };
  </script>
  
  <script>
    /*-------------------------------------------- 颜色转换 --------------------------------------------*/

	let rgbToHexColor = document.getElementById('rgbToHexColor');
    let hexToRgbColor = document.getElementById("hexToRgbColor");

    function rgbToHex(rgb) {
      //适配了中英文逗号
      var parsedRgb = /(\d{1,3})[\s,，]+(\d{1,3})[\s,，]+(\d{1,3})/g.exec(rgb);
      var r = parseInt(parsedRgb[1]);
      var g = parseInt(parsedRgb[2]);
      var b = parseInt(parsedRgb[3]);

      var hexR = ("0" + r.toString(16)).slice(-2);
      var hexG = ("0" + g.toString(16)).slice(-2);
      var hexB = ("0" + b.toString(16)).slice(-2);

      return "#" + hexR + hexG + hexB;
    }

    function hexToRgb(hex) {
      var parsedHex = /^#?([\da-f]{1,2})([\da-f]{1,2})([\da-f]{1,2})$/i.exec(hex);
      var r = parseInt(parsedHex[1], 16);
      var g = parseInt(parsedHex[2], 16);
      var b = parseInt(parsedHex[3], 16);

      if (parsedHex[1].length === 1) {
        r = r * 17;
        g = g * 17;
        b = b * 17;
      }
      return r + ", " + g + ", " + b;
    }

	// rgb转hex，将hex输入框的值设置为hex码，同时设置两个色块的颜色
    function convertRGBtoHEX() {
      var rgbInput = document.getElementById("rgbInput").value;
      var hexColor = rgbToHex(rgbInput);
      document.getElementById("rgbToHexColor").style.background = hexColor;
	  document.getElementById("hexToRgbColor").style.background = hexColor;
      document.getElementById("hexInput").value = hexColor;
    }

	// hex转rgb，将rgb输入框的值设置为rgb，同时设置两个色块的颜色
    function convertHEXtoRGB() {
      var hexInput = document.getElementById("hexInput").value;
      var rgbColor = hexToRgb(hexInput);
      document.getElementById("hexToRgbColor").style.background = "rgb(" + rgbColor + ")";
	  document.getElementById("rgbToHexColor").style.background = "rgb(" + rgbColor + ")";
      document.getElementById("rgbInput").value = "rgb(" + rgbColor + ")";
    }

	// 单击色块时，复制颜色码（rgb转hex色块的复制hex码）
    rgbToHexColor.onclick = function(e){
		let rgb = e.target.style.backgroundColor;
		if(rgb){
			let hex = rgbToHex(rgb);
			// 执行复制
			navigator.clipboard.writeText(hex).then(function() {
				messageplugin({
					message: "复制成功，"+hex,
					type: "success"
				});
			}).catch(function(error) {
				console.error('无法复制文本：', error);
			});
		}
    }

	// 单击色块时，复制颜色码（hex转rgb色块的复制rgb码）
    hexToRgbColor.onclick = function(e){
		let rgb = e.target.style.backgroundColor;
		if(rgb){
			// 执行复制
			navigator.clipboard.writeText(rgb).then(function() {
				messageplugin({
					message: "复制成功，"+rgb,
					type: "success"
				});
			}).catch(function(error) {
				console.error('无法复制文本：', error);
			});
		}
    }

    /*-------------------------------------------- 颜色选择 --------------------------------------------*/

    let colorUl=document.getElementById('color-ur');
    let colorPicker = document.getElementById("colorPicker");
    let colorInputRgb = document.getElementById("colorInputRgb");
    let colorInputHex = document.getElementById("colorInputHex");
    let 颜色大全 = document.getElementById("颜色大全");

    /*------------------------------------------ 常用颜色大全 ------------------------------------------*/
    let colorArr = [
      "#000000","#434343","#ffffff","#980000","#ff0000","#ff9900","#ffff00","#DDD23B","#CA7A2C","#BEC23F",
      "#00ff00","#00ffff","#4a86e8","#0000ff","#9900ff","#ff00ff","#e6b8af","#f4cccc","#fce5cd","#fff2cc",
      "#d9ead3","#d0e0e3","#c9daf8","#cfe2f3","#d9d2e9","#ead1dc","#dd7e6b","#ea9999","#f9cb9c","#ffe599",
      "#b6d7a8","#a2c4c9","#a4c2f4","#9fc5e8","#b4a7d6","#d5a6bd","#cc4125","#e06666","#f6b26b","#ffd966",
      "#93c47d","#76a5af","#6d9eeb","#6fa8dc","#8e7cc3","#c27ba0","#a61c00","#cc0000","#e69138","#f1c232",
      "#6aa84f","#45818e","#3c78d8","#3d85c6","#674ea7","#a64d79","#660000","#7f6000","#274e13","#0c343d",
      "#1c4587","#073763","#20124d","#68768a","#1e90ff","#00bfff","#C7802D","#48c0a4","#549688","#69b0ac",
      "#91ad70","#7398Ab","#b4caa0","#5dac81","#376b6d","#91b493","#68b4b0","#1B813E","#3d6167","#005CAF",
      "#2D6D4B","#24936E","#00AA90","#86c166","#838A2D","#90B44B","#66BAB7","#268785","#70B9DE","#33A6B8",
      "#1E88A8","#008947","#2EA9DF","#F8C3CD","#E16B8C","#DC9FB4","#F4A7B9","#B5495B","#E87A90","#D05A6E",
      "#DB4D6D","#D0104C","#EB7A77","#CB4042","#AB3B3A","#994639","#F19483","#B54434","#F17C67","#E83015",
      "#F75C2F","#F05E1C","#ED784A","#FB9966","#D75455","#9F353A","#E3916E","#C73E3A","#C46243","#E8B647",
      "#F6C555","#FBE251","#FFB11B","#FC9F4D","#FAD689","#FFC408","#F9BF45","#E9CD4C","#EFBB24","#D9AB42"
    ];

    // 动态添加li
    function iniColorPicker(){
      let html = '';
      let self = this;
      for(let i=0;i<colorArr.length;i++){
        html+= '<li  style="background:'+
        colorArr[i]+'">&nbsp;</li>';
      }
      colorUl.innerHTML=html;
    }
    iniColorPicker();

    // 颜色选择器中选择颜色时，将颜色值设置到input文本框中
    function updateColorPicker() {
      let hex = colorPicker.value;
      let rgb = hexToRgb(hex);
      colorInputRgb.value = "rgb(" + rgb + ")";
      colorInputHex.value = hex;
    }

    // 当rgb框输入了颜色值时，设置颜色选择器的值
    function updateColorInputRgb() {
      let rgb = colorInputRgb.value;
      let hex = rgbToHex(rgb);
      colorPicker.value = hex;
      colorPicker.style.backgroundColor = hex;
      colorInputHex.value = hex;
    }

    // 当hex框输入了颜色值时，设置颜色选择器的值
    function updateColorInputHex() {
      let hex = colorInputHex.value;
      let rgb = hexToRgb(hex);
      hex = rgbToHex(rgb);
      colorPicker.value = hex;
      colorPicker.style.backgroundColor = hex;
      colorInputRgb.value = "rgb(" + rgb + ")";
    }

    // 单击常用颜色时，设置颜色选择器的值、input文本框的值
    colorUl.onclick = function(e){
      if(e.target.tagName.toLowerCase() === 'li'){
        let rgb = e.target.style.backgroundColor;
        let hex = rgbToHex(rgb);
        colorInputRgb.value = rgb;
        colorInputHex.value = hex;
        colorPicker.value = hex;
        colorPicker.style.backgroundColor = hex;
        // 执行复制
        navigator.clipboard.writeText(hex).then(function() {
          messageplugin({
            message: "复制成功，"+hex,
            type: "success"
          });
        }).catch(function(error) {
          console.error('无法复制文本：', error);
        });
      }
    }

	// 单击表格的td元素时，复制元素的hex值
	颜色大全.onclick = function(e){
      if(e.target.tagName.toLowerCase() === 'td'){
		var td = e.target;
		// 获取色块td的bgcolor属性的值
		var hex = td.getAttribute('bgcolor');
		if(hex === null){ // 如果值为null，说明单击的不是色块td，而是文字td
			hex = td.innerHTML; // 则直接获取文字td的innerHTML
		}
        // 执行复制
        navigator.clipboard.writeText(hex).then(function() {
          messageplugin({
            message: "复制成功，"+hex,
            type: "success"
          });
        }).catch(function(error) {
          console.error('无法复制文本：', error);
        });
      }
    }

  </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507

最后

设置常用颜色的话，在常用颜色大全 colorArr 这个数组里面，把自己的常用颜色设置进去就行了。

Gitee链接在这里

所有代码只在一个html文件里，可以直接复制保存，然后用浏览器打开就行，打开后，收藏到浏览器标签栏，以后要用就很方便了。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/144555