<!DOCTYPE html>
<html>
<head>
<title>RGB颜色查询对照表</title>
<!-- 引入消息弹框样式 -->
<link rel="stylesheet" href="../css/msgBox.css">
<link rel="stylesheet" href="../css/public.css">
<style>
*{
margin: 0 auto;
}
body{
background: #68768a;
}
.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>
</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>
<tr>
<td bgcolor="#ffffff"></td>
<td>#FFFFFF</td>
<td bgcolor="#fffff0"></td>
<td>#FFFFF0</td>
<td bgcolor="#ffffe0"></td>
<td>#FFFFE0</td>
<td bgcolor="#ffff00"></td>
<td>#FFFF00</td>
<td bgcolor="#fffafa"></td>
<td>#FFFAFA</td>
<td bgcolor="#fffaf0"></td>
<td>#FFFAF0</td>
<td bgcolor="#fffacd"></td>
<td>#FFFACD</td>
<td bgcolor="#fff8dc"></td>
<td>#FFF8DC</td>
<td bgcolor="#fff68f"></td>
<td>#FFF68F</td>
<td bgcolor="#fff5ee"></td>
<td>#FFF5EE</td>
<td bgcolor="#fff0f5"></td>
<td>#FFF0F5</td>
<td bgcolor="#ffefdb"></td>
<td>#FFEFDB</td>
</tr>
<tr>
<td bgcolor="#ffefd5"></td>
<td>#FFEFD5</td>
<td bgcolor="#ffec8b"></td>
<td>#FFEC8B</td>
<td bgcolor="#ffebcd"></td>
<td>#FFEBCD</td>
<td bgcolor="#ffe7ba"></td>
<td>#FFE7BA</td>
<td bgcolor="#ffe4e1"></td>
<td>#FFE4E1</td>
<td bgcolor="#ffe4c4"></td>
<td>#FFE4C4</td>
<td bgcolor="#ffe4b5"></td>
<td>#FFE4B5</td>
<td bgcolor="#ffe1ff"></td>
<td>#FFE1FF</td>
<td bgcolor="#ffdead"></td>
<td>#FFDEAD</td>
<td bgcolor="#ffdab9"></td>
<td>#FFDAB9</td>
<td bgcolor="#ffd700"></td>
<td>#FFD700</td>
<td bgcolor="#ffd39b"></td>
<td>#FFD39B</td>
</tr>
<tr>
<td bgcolor="#ffc1c1"></td>
<td>#FFC1C1</td>
<td bgcolor="#ffc125"></td>
<td>#FFC125</td>
<td bgcolor="#ffc0cb"></td>
<td>#FFC0CB</td>
<td bgcolor="#ffbbff"></td>
<td>#FFBBFF</td>
<td bgcolor="#ffb90f"></td>
<td>#FFB90F</td>
<td bgcolor="#ffb6c1"></td>
<td>#FFB6C1</td>
<td bgcolor="#ffb5c5"></td>
<td>#FFB5C5</td>
<td bgcolor="#ffaeb9"></td>
<td>#FFAEB9</td>
<td bgcolor="#ffa54f"></td>
<td>#FFA54F</td>
<td bgcolor="#ffa500"></td>
<td>#FFA500</td>
<td bgcolor="#ffa07a"></td>
<td>#FFA07A</td>
<td bgcolor="#ff8c69"></td>
<td>#FF8C69</td>
</tr>
<tr>
<td bgcolor="#ff8c00"></td>
<td>#FF8C00</td>
<td bgcolor="#ff83fa"></td>
<td>#FF83FA</td>
<td bgcolor="#ff82ab"></td>
<td>#FF82AB</td>
<td bgcolor="#ff8247"></td>
<td>#FF8247</td>
<td bgcolor="#ff7f50"></td>
<td>#FF7F50</td>
<td bgcolor="#ff7f24"></td>
<td>#FF7F24</td>
<td bgcolor="#ff7f00"></td>
<td>#FF7F00</td>
<td bgcolor="#ff7256"></td>
<td>#FF7256</td>
<td bgcolor="#ff6eb4"></td>
<td>#FF6EB4</td>
<td bgcolor="#ff6a6a"></td>
<td>#FF6A6A</td>
<td bgcolor="#ff69b4"></td>
<td>#FF69B4</td>
<td bgcolor="#ff6347"></td>
<td>#FF6347</td>
</tr>
<tr>
<td bgcolor="#ff4500"></td>
<td>#FF4500</td>
<td bgcolor="#ff4040"></td>
<td>#FF4040</td>
<td bgcolor="#ff3e96"></td>
<td>#FF3E96</td>
<td bgcolor="#ff34b3"></td>
<td>#FF34B3</td>
<td bgcolor="#ff3030"></td>
<td>#FF3030</td>
<td bgcolor="#ff1493"></td>
<td>#FF1493</td>
<td bgcolor="#ff00ff"></td>
<td>#FF00FF</td>
<td bgcolor="#ff0000"></td>
<td>#FF0000</td>
<td bgcolor="#fdf5e6"></td>
<td>#FDF5E6</td>
<td bgcolor="#fcfcfc"></td>
<td>#FCFCFC</td>
<td bgcolor="#fafafa"></td>
<td>#FAFAFA</td>
<td bgcolor="#fafad2"></td>
<td>#FAFAD2</td>
</tr>
<tr>
<td bgcolor="#faf0e6"></td>
<td>#FAF0E6</td>
<td bgcolor="#faebd7"></td>
<td>#FAEBD7</td>
<td bgcolor="#fa8072"></td>
<td>#FA8072</td>
<td bgcolor="#f8f8ff"></td>
<td>#F8F8FF</td>
<td bgcolor="#f7f7f7"></td>
<td>#F7F7F7</td>
<td bgcolor="#f5fffa"></td>
<td>#F5FFFA</td>
<td bgcolor="#f5f5f5"></td>
<td>#F5F5F5</td>
<td bgcolor="#f5f5dc"></td>
<td>#F5F5DC</td>
<td bgcolor="#f5deb3"></td>
<td>#F5DEB3</td>
<td bgcolor="#f4f4f4"></td>
<td>#F4F4F4</td>
<td bgcolor="#f4a460"></td>
<td>#F4A460</td>
<td bgcolor="#f2f2f2"></td>
<td>#F2F2F2</td>
</tr>
<tr>
<td bgcolor="#f0ffff"></td>
<td>#F0FFFF</td>
<td bgcolor="#f0fff0"></td>
<td>#F0FFF0</td>
<td bgcolor="#f0f8ff"></td>
<td>#F0F8FF</td>
<td bgcolor="#f0f0f0"></td>
<td>#F0F0F0</td>
<td bgcolor="#f0e68c"></td>
<td>#F0E68C</td>
<td bgcolor="#f08080"></td>
<td>#F08080</td>
<td bgcolor="#eeeee0"></td>
<td>#EEEEE0</td>
<td bgcolor="#eeeed1"></td>
<td>#EEEED1</td>
<td bgcolor="#eeee00"></td>
<td>#EEEE00</td>
<td bgcolor="#eee9e9"></td>
<td>#EEE9E9</td>
<td bgcolor="#eee9bf"></td>
<td>#EEE9BF</td>
<td bgcolor="#eee8cd"></td>
<td>#EEE8CD</td>
</tr>
<tr>
<td bgcolor="#eee8aa"></td>
<td>#EEE8AA</td>
<td bgcolor="#eee685"></td>
<td
html工具合集：本地音乐播放器、rgb颜色码对照表、绘画板
需积分: 5 31 浏览量
2023-08-01
09:04:34
上传
评论
收藏 2.86MB ZIP 举报
html工具.zip （12个子文件） 
html工具 js 
msgBox.js 2KB img 
上传.png 5KB
bg1.jpg 1.34MB bg.jpg 1.54MB 画笔工具.png 6KB 音乐按钮.png 6KB css public.css 678B msgBox.css 1KB html 
DrawingBoard.html 19KB rgb颜色查询对照表.html 41KB music.html 21KB index.html 2KB资源评论
符华-
- 粉丝: 400
- 资源: 9
