HTML前端配色表

源码分享 · 06-15 12:42

在 HTML 前端开发中,色彩搭配很重要。但弄出好的配色不容易。之前在逛小彦的博客时发现了这个配色表,样式还算齐全,有各种组合,新手老手都能用(主要是我刚好用到😂)。今天把他分享给大家一起食用。

效果展示

刘郎阁

源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>配色表 刘郎阁</title>
</head>
<body>
<div class="article"><div class="article-title"><a class="left"><i class="fa fa-calendar-minus-o"></i></a><a class="article-title-back"><i class="fa fa-reply">
</i></a></div>
<div class="clear"></div><div class="article-page-content"><table width="100%" cellspacing="0" cellpadding="5" border="0" class="tableborder">
  <tbody><tr>
    <td width="25%" bgcolor="#f7acbc" class="tdborder"><font color="#ffffff">鸨色<br>#f7acbc</font></td>
    <td width="25%" bgcolor="#deab8a" class="tdborder"><font color="#ffffff">赤白橡<br>#deab8a</font></td>
    <td width="25%" bgcolor="#817936" class="tdborder"><font color="#ffffff">油色<br>#817936</font></td>
    <td width="25%" bgcolor="#444693" class="tdborder"><font color="#ffffff">绀桔梗<br>#444693</font></td>
  </tr>
  <tr>
    <td bgcolor="#ef5b9c" class="tdborder"><font color="#ffffff">踯躅色<br>#ef5b9c</font></td>
    <td bgcolor="#fedcbd" class="tdborder"><font color="#000000">肌色<br>#fedcbd</font></td>
    <td bgcolor="#7f7522" class="tdborder"><font color="#ffffff">伽罗色<br>#7f7522</font></td>
    <td bgcolor="#2b4490" class="tdborder"><font color="#ffffff">花色<br>#2b4490</font></td>
  </tr>
  <tr>
    <td bgcolor="#feeeed" class="tdborder"><font color="#000000">桜色<br>#feeeed</font></td>
    <td bgcolor="#f47920" class="tdborder"><font color="#ffffff">橙色<br>#f47920</font></td>
    <td bgcolor="#80752c" class="tdborder"><font color="#ffffff">青丹<br>#80752c</font></td>
    <td bgcolor="#2a5caa" class="tdborder"><font color="#ffffff">瑠璃色<br>#2a5caa</font></td>
  </tr>
  <tr>
    <td bgcolor="#f05b72" class="tdborder"><font color="#ffffff">蔷薇色<br>#f05b72</font></td>
    <td bgcolor="#905a3d" class="tdborder"><font color="#ffffff">灰茶<br>#905a3d</font></td>
    <td bgcolor="#87843b" class="tdborder"><font color="#ffffff">莺色<br>#87843b</font></td>
    <td bgcolor="#224b8f" class="tdborder"><font color="#ffffff">琉璃绀<br>#224b8f</font></td>
  </tr>
  <tr>
    <td bgcolor="#f15b6c" class="tdborder"><font color="#ffffff">韩红<br>#f15b6c</font></td>
    <td bgcolor="#8f4b2e" class="tdborder"><font color="#ffffff">茶色<br>#8f4b2e</font></td>
    <td bgcolor="#726930" class="tdborder"><font color="#ffffff">利久色<br>#726930</font></td>
    <td bgcolor="#003a6c" class="tdborder"><font color="#ffffff">绀色<br>#003a6c</font></td>
  </tr>
  <tr>
    <td bgcolor="#f8aba6" class="tdborder"><font color="#ffffff">珊瑚色<br>#f8aba6</font></td>
    <td bgcolor="#87481f" class="tdborder"><font color="#ffffff">桦茶色<br>#87481f</font></td>
    <td bgcolor="#454926" class="tdborder"><font color="#ffffff">媚茶<br>#454926</font></td>
    <td bgcolor="#102b6a" class="tdborder"><font color="#ffffff">青蓝<br>#102b6a</font></td>
  </tr>
  <tr>
    <td bgcolor="#f69c9f" class="tdborder"><font color="#ffffff">红梅色<br>#f69c9f</font></td>
    <td bgcolor="#5f3c23" class="tdborder"><font color="#ffffff">枯茶<br>#5f3c23</font></td>
    <td bgcolor="#2e3a1f" class="tdborder"><font color="#ffffff">蓝海松茶<br>#2e3a1f</font></td>
    <td bgcolor="#426ab3" class="tdborder"><font color="#ffffff">杜若色<br>#426ab3</font></td>
  </tr>
  <tr>
    <td bgcolor="#f58f98" class="tdborder"><font color="#ffffff">桃色<br>#f58f98</font></td>
    <td bgcolor="#6b473c" class="tdborder"><font color="#ffffff">焦茶<br>#6b473c</font></td>
    <td bgcolor="#4d4f36" class="tdborder"><font color="#ffffff">青钝<br>#4d4f36</font></td>
    <td bgcolor="#46485f" class="tdborder"><font color="#ffffff">胜色<br>#46485f</font></td>
  </tr>
  <tr>
    <td bgcolor="#ca8687" class="tdborder"><font color="#ffffff">薄柿<br>#ca8687</font></td>
    <td bgcolor="#faa755" class="tdborder"><font color="#ffffff">柑子色<br>#faa755</font></td>
    <td bgcolor="#b7ba6b" class="tdborder"><font color="#ffffff">抹茶色<br>#b7ba6b</font></td>
    <td bgcolor="#4e72b8" class="tdborder"><font color="#ffffff">群青色<br>#4e72b8</font></td>
  </tr>
  <tr>
    <td bgcolor="#f391a9" class="tdborder"><font color="#ffffff">薄红梅<br>#f391a9</font></td>
    <td bgcolor="#fab27b" class="tdborder"><font color="#ffffff">杏色<br>#fab27b</font></td>
    <td bgcolor="#b2d235" class="tdborder"><font color="#ffffff">黄緑<br>#b2d235</font></td>
    <td bgcolor="#181d4b" class="tdborder"><font color="#ffffff">铁绀<br>#181d4b</font></td>
  </tr>
  <tr>
    <td bgcolor="#bd6758" class="tdborder"><font color="#ffffff">曙色<br>#bd6758</font></td>
    <td bgcolor="#f58220" class="tdborder"><font color="#ffffff">蜜柑色<br>#f58220</font></td>
    <td bgcolor="#5c7a29" class="tdborder"><font color="#ffffff">苔色<br>#5c7a29</font></td>
    <td bgcolor="#1a2933" class="tdborder"><font color="#ffffff">蓝铁<br>#1a2933</font></td>
  </tr>
  <tr>
    <td bgcolor="#d71345" class="tdborder"><font color="#ffffff">红色<br>#d71345</font></td>
    <td bgcolor="#843900" class="tdborder"><font color="#ffffff">褐色<br>#843900</font></td>
    <td bgcolor="#bed742" class="tdborder"><font color="#ffffff">若草色<br>#bed742</font></td>
    <td bgcolor="#121a2a" class="tdborder"><font color="#ffffff">青褐<br>#121a2a</font></td>
  </tr>
  <tr>
    <td bgcolor="#d64f44" class="tdborder"><font color="#ffffff">赤丹<br>#d64f44</font></td>
    <td bgcolor="#905d1d" class="tdborder"><font color="#ffffff">路考茶<br>#905d1d</font></td>
    <td bgcolor="#7fb80e" class="tdborder"><font color="#ffffff">若緑<br>#7fb80e</font></td>
    <td bgcolor="#0c212b" class="tdborder"><font color="#ffffff">褐返<br>#0c212b</font></td>
  </tr>
  <tr>
    <td bgcolor="#d93a49" class="tdborder"><font color="#ffffff">红赤<br>#d93a49</font></td>
    <td bgcolor="#8a5d19" class="tdborder"><font color="#ffffff">饴色<br>#8a5d19</font></td>
    <td bgcolor="#a3cf62" class="tdborder"><font color="#ffffff">萌黄<br>#a3cf62</font></td>
    <td bgcolor="#6a6da9" class="tdborder"><font color="#ffffff">藤纳戸<br>#6a6da9</font></td>
  </tr>
  <tr>
    <td bgcolor="#b3424a" class="tdborder"><font color="#ffffff">臙脂色<br>#b3424a</font></td>
    <td bgcolor="#8c531b" class="tdborder"><font color="#ffffff">丁子色<br>#8c531b</font></td>
    <td bgcolor="#769149" class="tdborder"><font color="#ffffff">苗色<br>#769149</font></td>
    <td bgcolor="#585eaa" class="tdborder"><font color="#ffffff">桔梗色<br>#585eaa</font></td>
  </tr>
  <tr>
    <td bgcolor="#c76968" class="tdborder"><font color="#ffffff">真赭<br>#c76968</font></td>
    <td bgcolor="#826858" class="tdborder"><font color="#ffffff">丁子茶<br>#826858</font></td>
    <td bgcolor="#6d8346" class="tdborder"><font color="#ffffff">草色<br>#6d8346</font></td>
    <td bgcolor="#494e8f" class="tdborder"><font color="#ffffff">绀蓝<br>#494e8f</font></td>
  </tr>
  <tr>
    <td bgcolor="#bb505d" class="tdborder"><font color="#ffffff">今様色<br>#bb505d</font></td>
    <td bgcolor="#64492b" class="tdborder"><font color="#ffffff">黄栌<br>#64492b</font></td>
    <td bgcolor="#78a355" class="tdborder"><font color="#ffffff">柳色<br>#78a355</font></td>
    <td bgcolor="#afb4db" class="tdborder"><font color="#ffffff">藤色<br>#afb4db</font></td>
  </tr>
  <tr>
    <td bgcolor="#987165" class="tdborder"><font color="#ffffff">梅染<br>#987165</font></td>
    <td bgcolor="#ae6642" class="tdborder"><font color="#ffffff">土器色<br>#ae6642</font></td>
    <td bgcolor="#abc88b" class="tdborder"><font color="#ffffff">若草色<br>#abc88b</font></td>
    <td bgcolor="#9b95c9" class="tdborder"><font color="#ffffff">藤紫<br>#9b95c9</font></td>
  </tr>
  <tr>
    <td bgcolor="#ac6767" class="tdborder"><font color="#ffffff">退红色<br>#ac6767</font></td>
    <td bgcolor="#56452d" class="tdborder"><font color="#ffffff">黄枯茶<br>#56452d</font></td>
    <td bgcolor="#74905d" class="tdborder"><font color="#ffffff">松叶色<br>#74905d</font></td>
    <td bgcolor="#6950a1" class="tdborder"><font color="#ffffff">青紫<br>#6950a1</font></td>
  </tr>
  <tr>
    <td bgcolor="#973c3f" class="tdborder"><font color="#ffffff">苏芳<br>#973c3f</font></td>
    <td bgcolor="#96582a" class="tdborder"><font color="#ffffff">狐色<br>#96582a</font></td>
    <td bgcolor="#cde6c7" class="tdborder"><font color="#000000">白緑<br>#cde6c7</font></td>
    <td bgcolor="#6f60aa" class="tdborder"><font color="#ffffff">菫色<br>#6f60aa</font></td>
  </tr>
  <tr>
    <td bgcolor="#b22c46" class="tdborder"><font color="#ffffff">茜色<br>#b22c46</font></td>
    <td bgcolor="#705628" class="tdborder"><font color="#ffffff">黄橡<br>#705628</font></td>
    <td bgcolor="#1d953f" class="tdborder"><font color="#ffffff">薄緑<br>#1d953f</font></td>
    <td bgcolor="#867892" class="tdborder"><font color="#ffffff">鸠羽色<br>#867892</font></td>
  </tr>
  <tr>
    <td bgcolor="#a7324a" class="tdborder"><font color="#ffffff">红<br>#a7324a</font></td>
    <td bgcolor="#4a3113" class="tdborder"><font color="#ffffff">银煤竹<br>#4a3113</font></td>
    <td bgcolor="#77ac98" class="tdborder"><font color="#ffffff">千草色<br>#77ac98</font></td>
    <td bgcolor="#918597" class="tdborder"><font color="#ffffff">薄色<br>#918597</font></td>
  </tr>
  <tr>
    <td bgcolor="#aa363d" class="tdborder"><font color="#ffffff">银朱<br>#aa363d</font></td>
    <td bgcolor="#412f1f" class="tdborder"><font color="#ffffff">涅色<br>#412f1f</font></td>
    <td bgcolor="#007d65" class="tdborder"><font color="#ffffff">青緑<br>#007d65</font></td>
    <td bgcolor="#6f6d85" class="tdborder"><font color="#ffffff">薄鼠<br>#6f6d85</font></td>
  </tr>
  <tr>
    <td bgcolor="#ed1941" class="tdborder"><font color="#ffffff">赤<br>#ed1941</font></td>
    <td bgcolor="#845538" class="tdborder"><font color="#ffffff">胡桃色<br>#845538</font></td>
    <td bgcolor="#84bf96" class="tdborder"><font color="#ffffff">浅緑<br>#84bf96</font></td>
    <td bgcolor="#594c6d" class="tdborder"><font color="#ffffff">鸠羽鼠<br>#594c6d</font></td>
  </tr>
  <tr>
    <td bgcolor="#f26522" class="tdborder"><font color="#ffffff">朱色<br>#f26522</font></td>
    <td bgcolor="#8e7437" class="tdborder"><font color="#ffffff">香色<br>#8e7437</font></td>
    <td bgcolor="#45b97c" class="tdborder"><font color="#ffffff">緑<br>#45b97c</font></td>
    <td bgcolor="#694d9f" class="tdborder"><font color="#ffffff">菖蒲色<br>#694d9f</font></td>
  </tr>
  <tr>
    <td bgcolor="#d2553d" class="tdborder"><font color="#ffffff">洗朱<br>#d2553d</font></td>
    <td bgcolor="#69541b" class="tdborder"><font color="#ffffff">国防色<br>#69541b</font></td>
    <td bgcolor="#225a1f" class="tdborder"><font color="#ffffff">草色<br>#225a1f</font></td>
    <td bgcolor="#6f599c" class="tdborder"><font color="#ffffff">江戸紫<br>#6f599c</font></td>
  </tr>
  <tr>
    <td bgcolor="#b4534b" class="tdborder"><font color="#ffffff">红桦色<br>#b4534b</font></td>
    <td bgcolor="#d5c59f" class="tdborder"><font color="#ffffff">练色<br>#d5c59f</font></td>
    <td bgcolor="#367459" class="tdborder"><font color="#ffffff">木贼色<br>#367459</font></td>
    <td bgcolor="#8552a1" class="tdborder"><font color="#ffffff">紫<br>#8552a1</font></td>
  </tr>
  <tr>
    <td bgcolor="#ef4136" class="tdborder"><font color="#ffffff">红绯<br>#ef4136</font></td>
    <td bgcolor="#cd9a5b" class="tdborder"><font color="#ffffff">肉色<br>#cd9a5b</font></td>
    <td bgcolor="#007947" class="tdborder"><font color="#ffffff">常盘色<br>#007947</font></td>
    <td bgcolor="#543044" class="tdborder"><font color="#ffffff">灭紫<br>#543044</font></td>
  </tr>
  <tr>
    <td bgcolor="#c63c26" class="tdborder"><font color="#ffffff">桦色<br>#c63c26</font></td>
    <td bgcolor="#cd9a5b" class="tdborder"><font color="#ffffff">人色<br>#cd9a5b</font></td>
    <td bgcolor="#40835e" class="tdborder"><font color="#ffffff">緑青色<br>#40835e</font></td>
    <td bgcolor="#63434f" class="tdborder"><font color="#ffffff">葡萄鼠<br>#63434f</font></td>
  </tr>
  <tr>
    <td bgcolor="#f3715c" class="tdborder"><font color="#ffffff">铅丹色<br>#f3715c</font></td>
    <td bgcolor="#b36d41" class="tdborder"><font color="#ffffff">土色<br>#b36d41</font></td>
    <td bgcolor="#2b6447" class="tdborder"><font color="#ffffff">千歳緑<br>#2b6447</font></td>
    <td bgcolor="#7d5886" class="tdborder"><font color="#ffffff">古代紫<br>#7d5886</font></td>
  </tr>
  <tr>
    <td bgcolor="#a7573b" class="tdborder"><font color="#ffffff">赭<br>#a7573b</font></td>
    <td bgcolor="#df9464" class="tdborder"><font color="#ffffff">小麦色<br>#df9464</font></td>
    <td bgcolor="#005831" class="tdborder"><font color="#ffffff">深緑<br>#005831</font></td>
    <td bgcolor="#401c44" class="tdborder"><font color="#ffffff">暗红<br>#401c44</font></td>
  </tr>
  <tr>
    <td bgcolor="#aa2116" class="tdborder"><font color="#ffffff">绯色<br>#aa2116</font></td>
    <td bgcolor="#b76f40" class="tdborder"><font color="#ffffff">琥珀色<br>#b76f40</font></td>
    <td bgcolor="#006c54" class="tdborder"><font color="#ffffff">萌葱色<br>#006c54</font></td>
    <td bgcolor="#472d56" class="tdborder"><font color="#ffffff">葡萄<br>#472d56</font></td>
  </tr>
  <tr>
    <td bgcolor="#b64533" class="tdborder"><font color="#ffffff">丹<br>#b64533</font></td>
    <td bgcolor="#ad8b3d" class="tdborder"><font color="#ffffff">木兰色<br>#ad8b3d</font></td>
    <td bgcolor="#375830" class="tdborder"><font color="#ffffff">青白橡<br>#375830</font></td>
    <td bgcolor="#45224a" class="tdborder"><font color="#ffffff">茄子绀<br>#45224a</font></td>
  </tr>
  <tr>
    <td bgcolor="#b54334" class="tdborder"><font color="#ffffff">土<br>#b54334</font></td>
    <td bgcolor="#dea32c" class="tdborder"><font color="#ffffff">栀子色<br>#dea32c</font></td>
    <td bgcolor="#274d3d" class="tdborder"><font color="#ffffff">革色<br>#274d3d</font></td>
    <td bgcolor="#411445" class="tdborder"><font color="#ffffff">紫绀<br>#411445</font></td>
  </tr>
  <tr>
    <td bgcolor="#853f04" class="tdborder"><font color="#ffffff">焦香<br>#853f04</font></td>
    <td bgcolor="#d1923f" class="tdborder"><font color="#ffffff">朽叶<br>#d1923f</font></td>
    <td bgcolor="#375830" class="tdborder"><font color="#ffffff">麹尘<br>#375830</font></td>
    <td bgcolor="#4b2f3d" class="tdborder"><font color="#ffffff">浓色<br>#4b2f3d</font></td>
  </tr>
  <tr>
    <td bgcolor="#840228" class="tdborder"><font color="#ffffff">真红<br>#840228</font></td>
    <td bgcolor="#c88400" class="tdborder"><font color="#ffffff">萱草色<br>#c88400</font></td>
    <td bgcolor="#27342b" class="tdborder"><font color="#ffffff">仙斎茶<br>#27342b</font></td>
    <td bgcolor="#402e4c" class="tdborder"><font color="#ffffff">二蓝<br>#402e4c</font></td>
  </tr>
  <tr>
    <td bgcolor="#7a1723" class="tdborder"><font color="#ffffff">绯<br>#7a1723</font></td>
    <td bgcolor="#c37e00" class="tdborder"><font color="#ffffff">黄金<br>#c37e00</font></td>
    <td bgcolor="#65c294" class="tdborder"><font color="#ffffff">若竹色<br>#65c294</font></td>
    <td bgcolor="#c77eb5" class="tdborder"><font color="#ffffff">菖蒲色<br>#c77eb5</font></td>
  </tr>
  <tr>
    <td bgcolor="#a03939" class="tdborder"><font color="#ffffff">红海老茶<br>#a03939</font></td>
    <td bgcolor="#c37e00" class="tdborder"><font color="#ffffff">金色<br>#c37e00</font></td>
    <td bgcolor="#73b9a2" class="tdborder"><font color="#ffffff">青磁色<br>#73b9a2</font></td>
    <td bgcolor="#ea66a6" class="tdborder"><font color="#ffffff">牡丹色<br>#ea66a6</font></td>
  </tr>
  <tr>
    <td bgcolor="#8a2e3b" class="tdborder"><font color="#ffffff">浅苏芳<br>#8a2e3b</font></td>
    <td bgcolor="#e0861a" class="tdborder"><font color="#ffffff">金茶<br>#e0861a</font></td>
    <td bgcolor="#72baa7" class="tdborder"><font color="#ffffff">青竹色<br>#72baa7</font></td>
    <td bgcolor="#f173ac" class="tdborder"><font color="#ffffff">赤紫<br>#f173ac</font></td>
  </tr>
  <tr>
    <td bgcolor="#8e453f" class="tdborder"><font color="#ffffff">鸢色<br>#8e453f</font></td>
    <td bgcolor="#ffce7b" class="tdborder"><font color="#000000">卵色<br>#ffce7b</font></td>
    <td bgcolor="#005344" class="tdborder"><font color="#ffffff">铁色<br>#005344</font></td>
    <td bgcolor="#fffffb" class="tdborder"><font color="#000000">白<br>#fffffb</font></td>
  </tr>
  <tr>
    <td bgcolor="#8f4b4a" class="tdborder"><font color="#ffffff">小豆色<br>#8f4b4a</font></td>
    <td bgcolor="#fcaf17" class="tdborder"><font color="#ffffff">山吹色<br>#fcaf17</font></td>
    <td bgcolor="#122e29" class="tdborder"><font color="#ffffff">锖鼠<br>#122e29</font></td>
    <td bgcolor="#fffef9" class="tdborder"><font color="#000000">胡粉色<br>#fffef9</font></td>
  </tr>
  <tr>
    <td bgcolor="#892f1b" class="tdborder"><font color="#ffffff">弁柄色<br>#892f1b</font></td>
    <td bgcolor="#ba8448" class="tdborder"><font color="#ffffff">黄土色<br>#ba8448</font></td>
    <td bgcolor="#293047" class="tdborder"><font color="#ffffff">铁御纳戸<br>#293047</font></td>
    <td bgcolor="#f6f5ec" class="tdborder"><font color="#000000">生成色<br>#f6f5ec</font></td>
  </tr>
  <tr>
    <td bgcolor="#6b2c25" class="tdborder"><font color="#ffffff">栗梅<br>#6b2c25</font></td>
    <td bgcolor="#896a45" class="tdborder"><font color="#ffffff">朽叶色<br>#896a45</font></td>
    <td bgcolor="#00ae9d" class="tdborder"><font color="#ffffff">青緑<br>#00ae9d</font></td>
    <td bgcolor="#d9d6c3" class="tdborder"><font color="#000000">灰白<br>#d9d6c3</font></td>
  </tr>
  <tr>
    <td bgcolor="#733a31" class="tdborder"><font color="#ffffff">海老茶<br>#733a31</font></td>
    <td bgcolor="#76624c" class="tdborder"><font color="#ffffff">空五倍子色<br>#76624c</font></td>
    <td bgcolor="#508a88" class="tdborder"><font color="#ffffff">锖浅葱<br>#508a88</font></td>
    <td bgcolor="#d1c7b7" class="tdborder"><font color="#000000">石竹色<br>#d1c7b7</font></td>
  </tr>
  <tr>
    <td bgcolor="#54211d" class="tdborder"><font color="#ffffff">深绯<br>#54211d</font></td>
    <td bgcolor="#6d5826" class="tdborder"><font color="#ffffff">莺茶<br>#6d5826</font></td>
    <td bgcolor="#70a19f" class="tdborder"><font color="#ffffff">水浅葱<br>#70a19f</font></td>
    <td bgcolor="#f2eada" class="tdborder"><font color="#000000">象牙色<br>#f2eada</font></td>
  </tr>
  <tr>
    <td bgcolor="#78331e" class="tdborder"><font color="#ffffff">赤铜色<br>#78331e</font></td>
    <td bgcolor="#ffc20e" class="tdborder"><font color="#ffffff">向日葵色<br>#ffc20e</font></td>
    <td bgcolor="#50b7c1" class="tdborder"><font color="#ffffff">新桥色<br>#50b7c1</font></td>
    <td bgcolor="#d3d7d4" class="tdborder"><font color="#000000">乳白色<br>#d3d7d4</font></td>
  </tr>
  <tr>
    <td bgcolor="#53261f" class="tdborder"><font color="#ffffff">赤褐色<br>#53261f</font></td>
    <td bgcolor="#fdb933" class="tdborder"><font color="#ffffff">郁金色<br>#fdb933</font></td>
    <td bgcolor="#00a6ac" class="tdborder"><font color="#ffffff">浅葱色<br>#00a6ac</font></td>
    <td bgcolor="#999d9c" class="tdborder"><font color="#ffffff">薄钝<br>#999d9c</font></td>
  </tr>
  <tr>
    <td bgcolor="#f15a22" class="tdborder"><font color="#ffffff">金赤<br>#f15a22</font></td>
    <td bgcolor="#d3c6a6" class="tdborder"><font color="#ffffff">砂色<br>#d3c6a6</font></td>
    <td bgcolor="#78cdd1" class="tdborder"><font color="#ffffff">白群<br>#78cdd1</font></td>
    <td bgcolor="#a1a3a6" class="tdborder"><font color="#ffffff">银鼠<br>#a1a3a6</font></td>
  </tr>
  <tr>
    <td bgcolor="#b4533c" class="tdborder"><font color="#ffffff">赤茶<br>#b4533c</font></td>
    <td bgcolor="#c7a252" class="tdborder"><font color="#ffffff">芥子色<br>#c7a252</font></td>
    <td bgcolor="#008792" class="tdborder"><font color="#ffffff">御纳戸色<br>#008792</font></td>
    <td bgcolor="#9d9087" class="tdborder"><font color="#ffffff">茶鼠<br>#9d9087</font></td>
  </tr>
  <tr>
    <td bgcolor="#84331f" class="tdborder"><font color="#ffffff">赤锖色<br>#84331f</font></td>
    <td bgcolor="#dec674" class="tdborder"><font color="#ffffff">淡黄<br>#dec674</font></td>
    <td bgcolor="#94d6da" class="tdborder"><font color="#ffffff">瓮覗<br>#94d6da</font></td>
    <td bgcolor="#8a8c8e" class="tdborder"><font color="#ffffff">鼠色<br>#8a8c8e</font></td>
  </tr>
  <tr>
    <td bgcolor="#f47a55" class="tdborder"><font color="#ffffff">黄丹<br>#f47a55</font></td>
    <td bgcolor="#b69968" class="tdborder"><font color="#ffffff">亜麻色<br>#b69968</font></td>
    <td bgcolor="#afdfe4" class="tdborder"><font color="#ffffff">水色<br>#afdfe4</font></td>
    <td bgcolor="#74787c" class="tdborder"><font color="#ffffff">薄墨色<br>#74787c</font></td>
  </tr>
  <tr>
    <td bgcolor="#f15a22" class="tdborder"><font color="#ffffff">赤橙<br>#f15a22</font></td>
    <td bgcolor="#c1a173" class="tdborder"><font color="#ffffff">枯色<br>#c1a173</font></td>
    <td bgcolor="#5e7c85" class="tdborder"><font color="#ffffff">蓝鼠<br>#5e7c85</font></td>
    <td bgcolor="#7c8577" class="tdborder"><font color="#ffffff">利休鼠<br>#7c8577</font></td>
  </tr>
  <tr>
    <td bgcolor="#f3704b" class="tdborder"><font color="#ffffff">柿色<br>#f3704b</font></td>
    <td bgcolor="#dbce8f" class="tdborder"><font color="#ffffff">鸟子色<br>#dbce8f</font></td>
    <td bgcolor="#76becc" class="tdborder"><font color="#ffffff">秘色<br>#76becc</font></td>
    <td bgcolor="#72777b" class="tdborder"><font color="#ffffff">铅色<br>#72777b</font></td>
  </tr>
  <tr>
    <td bgcolor="#da765b" class="tdborder"><font color="#ffffff">肉桂色<br>#da765b</font></td>
    <td bgcolor="#ffd400" class="tdborder"><font color="#ffffff">黄色<br>#ffd400</font></td>
    <td bgcolor="#90d7ec" class="tdborder"><font color="#ffffff">空色<br>#90d7ec</font></td>
    <td bgcolor="#77787b" class="tdborder"><font color="#ffffff">灰色<br>#77787b</font></td>
  </tr>
  <tr>
    <td bgcolor="#c85d44" class="tdborder"><font color="#ffffff">桦色<br>#c85d44</font></td>
    <td bgcolor="#ffd400" class="tdborder"><font color="#ffffff">蒲公英色<br>#ffd400</font></td>
    <td bgcolor="#009ad6" class="tdborder"><font color="#ffffff">青<br>#009ad6</font></td>
    <td bgcolor="#4f5555" class="tdborder"><font color="#ffffff">钝色<br>#4f5555</font></td>
  </tr>
  <tr>
    <td bgcolor="#ae5039" class="tdborder"><font color="#ffffff">炼瓦色<br>#ae5039</font></td>
    <td bgcolor="#ffe600" class="tdborder"><font color="#ffffff">中黄<br>#ffe600</font></td>
    <td bgcolor="#145b7d" class="tdborder"><font color="#ffffff">蓝色<br>#145b7d</font></td>
    <td bgcolor="#6c4c49" class="tdborder"><font color="#ffffff">煤竹色<br>#6c4c49</font></td>
  </tr>
  <tr>
    <td bgcolor="#6a3427" class="tdborder"><font color="#ffffff">锖色<br>#6a3427</font></td>
    <td bgcolor="#f0dc70" class="tdborder"><font color="#ffffff">刈安色<br>#f0dc70</font></td>
    <td bgcolor="#11264f" class="tdborder"><font color="#ffffff">浓蓝<br>#11264f</font></td>
    <td bgcolor="#563624" class="tdborder"><font color="#ffffff">黒茶<br>#563624</font></td>
  </tr>
  <tr>
    <td bgcolor="#8f4b38" class="tdborder"><font color="#ffffff">桧皮色<br>#8f4b38</font></td>
    <td bgcolor="#fcf16e" class="tdborder"><font color="#ffffff">黄檗色<br>#fcf16e</font></td>
    <td bgcolor="#7bbfea" class="tdborder"><font color="#ffffff">勿忘草色<br>#7bbfea</font></td>
    <td bgcolor="#3e4145" class="tdborder"><font color="#ffffff">黒橡<br>#3e4145</font></td>
  </tr>
  <tr>
    <td bgcolor="#8e3e1f" class="tdborder"><font color="#ffffff">栗色<br>#8e3e1f</font></td>
    <td bgcolor="#decb00" class="tdborder"><font color="#ffffff">緑黄色<br>#decb00</font></td>
    <td bgcolor="#33a3dc" class="tdborder"><font color="#ffffff">露草色<br>#33a3dc</font></td>
    <td bgcolor="#3c3645" class="tdborder"><font color="#ffffff">浓鼠<br>#3c3645</font></td>
  </tr>
  <tr>
    <td bgcolor="#f36c21" class="tdborder"><font color="#ffffff">黄赤<br>#f36c21</font></td>
    <td bgcolor="#cbc547" class="tdborder"><font color="#ffffff">鶸色<br>#cbc547</font></td>
    <td bgcolor="#228fbd" class="tdborder"><font color="#ffffff">缥色<br>#228fbd</font></td>
    <td bgcolor="#464547" class="tdborder"><font color="#ffffff">墨<br>#464547</font></td>
  </tr>
  <tr>
    <td bgcolor="#b4532a" class="tdborder"><font color="#ffffff">代赭<br>#b4532a</font></td>
    <td bgcolor="#6e6b41" class="tdborder"><font color="#ffffff">海松色<br>#6e6b41</font></td>
    <td bgcolor="#2468a2" class="tdborder"><font color="#ffffff">浅缥<br>#2468a2</font></td>
    <td bgcolor="#130c0e" class="tdborder"><font color="#ffffff">黒<br>#130c0e</font></td>
  </tr>
  <tr>
    <td bgcolor="#b7704f" class="tdborder"><font color="#ffffff">骆驼色<br>#b7704f</font></td>
    <td bgcolor="#596032" class="tdborder"><font color="#ffffff">鶸茶<br>#596032</font></td>
    <td bgcolor="#2570a1" class="tdborder"><font color="#ffffff">薄缥<br>#2570a1</font></td>
    <td bgcolor="#281f1d" class="tdborder"><font color="#ffffff">黒铁<br>#281f1d</font></td>
  </tr>
  <tr>
    <td bgcolor="#de773f" class="tdborder"><font color="#ffffff">黄茶<br>#de773f</font></td>
    <td bgcolor="#525f42" class="tdborder"><font color="#ffffff">山鸠色<br>#525f42</font></td>
    <td bgcolor="#2585a6" class="tdborder"><font color="#ffffff">薄花色<br>#2585a6</font></td>
    <td bgcolor="#2f271d" class="tdborder"><font color="#ffffff">蝋色<br>#2f271d</font></td>
  </tr>
  <tr>
    <td bgcolor="#c99979" class="tdborder"><font color="#ffffff">洗柿<br>#c99979</font></td>
    <td bgcolor="#5f5d46" class="tdborder"><font color="#ffffff">生壁色<br>#5f5d46</font></td>
    <td bgcolor="#1b315e" class="tdborder"><font color="#ffffff">绀青<br>#1b315e</font></td>
    <td bgcolor="#1d1626" class="tdborder"><font color="#ffffff">紫黒<br>#1d1626</font></td> </tr>
</tbody></table></div><div class="clear"></div><div class="article-markdown markdown-css" id="article-markdown">
</div>
</div>
</div><div class="clear"></div>
</div>
</body>
</html>

根据自己的需求加入自己网站对应位置即可。

补充

除了以上的方法外,我们还可以具体到按色相的搭配来分类和按印象的搭配来分类:

此方法来自KEVIN'S

KEVIN'S

效果展示

立即前往

刘郎阁
刘郎阁
刘郎阁
刘郎阁
刘郎阁

完!

优化 源码分享

上一篇 : IMG加载默认图备用方案

下一篇 : 2024.6.10


  1. 白v白   访客
    06-18 21:10 第20楼 中国移动Android · Google Chrome

    学习了,哈哈,一直也没专门做这个配色,完了我也试试。

    1. 刘郎   博主
      06-18 21:24 第21楼 中国移动iPhone · Safari
      @白v白

      留作备用也挺方便的

      1. Huo   Lv1
        08-19 18:33 第22楼 中国河北省邢台市电信iPhone · Safari
        @刘郎

        需要就来这里拿就好了,不拿走咯!

        1. 刘郎   博主
          08-20 08:44 第23楼 中国贵州省移动Linux · Google Chrome
          @Huo

          😎

  2. HowieHz   Lv1
    06-18 12:41 第18楼 中国上海市移动Windows 10 · Google Chrome

    好东西,收藏下

    1. 刘郎   博主
      06-18 12:45 第19楼 中国贵州省移动Windows 10 · QQ Browser
      @HowieHz

      食用愉快😎

  3. Kevin   访客
    06-16 22:19 第16楼 中国安徽省合肥市联通Windows 10 · Google Chrome

    [此内容已被管理员隐藏,请登录后查看]

    1. 刘郎   博主
      06-17 01:10 第17楼 中国移动iPhone · Safari
      @Kevin

      不错,好东西借鉴一下😎

  4. 06-16 17:14 第14楼 中国福建省宁德市电信Windows 10 · Google Chrome

    太棒了!

    1. 刘郎   博主
      06-16 17:16 第15楼 中国移动iPhone · Safari
      @湘铭呀!

      😎

  5. bosir   访客
    06-15 20:54 第11楼 中国上海市移动Android · Google Chrome

    我现在都是求助 ai,他推荐的我再实践体验,然后选一个合适的😏

    1. 刘郎   博主
      06-15 21:00 第12楼 中国移动iPhone · Safari
      @bosir

      现在可以把这个当做备用了😎

  6. obaby   Lv2
    06-15 19:58 第10楼 中国山东省临沂市联通Windows 10 · Google Chrome

    nice

    1. 刘郎   博主
      06-15 21:02 第13楼 中国移动iPhone · Safari
      @obaby

      哈哈 备用还是可以的

  7. 时光日志   访客
    06-15 16:58 第7楼 中国新疆石河子市电信Android · Google Chrome

    颜色的名字都是怎么起的。灭紫,葡萄鼠,这都是什么颜色。😅

    1. 刘郎   博主
      06-15 17:00 第8楼 中国贵州省移动Windows 10 · QQ Browser
      @时光日志

      别认真 认真你就输了😂 这个问题应该去问问开发者 我们只是借用他的颜色而已 哈哈

      1. 时光日志   访客
        06-15 17:19 第9楼 中国新疆石河子市电信Android · Google Chrome
        @刘郎

        哈哈

  8. JacyLunatic   访客
    06-15 15:45 第5楼 中国上海市东方有线Windows 10 · Google Chrome

    突然发现有些颜色名我甚至不会读😂

    1. 刘郎   博主
      06-15 15:48 第6楼 中国贵州省移动Windows 10 · QQ Browser
      @JacyLunatic

      哈哈哈 你要笑死我 不过也正常 我也不会 看颜色就可以了😂

  9. 梦爱吃鱼   访客
    06-15 15:26 第3楼 中国河南省郑州市移动Windows 10 · Google Chrome

    这个挺好的收藏了

    1. 刘郎   博主
      06-15 15:29 第4楼 中国贵州省移动Windows 10 · QQ Browser
      @梦爱吃鱼

      😎

  10. 06-15 14:15 第1个脚印 中国山西省移动Android · Google Chrome

    看来可以把你发的不少东西移进来了
    https://echs.top/在线工具

    1. 刘郎   博主
      06-15 14:40 第2楼 中国移动iPhone · Safari
      @二次寒树

      用Alist搭建的博客?😂

| 黔ICP备2024020400号 | 萌ICP备20246777号 | | 当前有 3 人在线 |
本站已加入BLOGS·CN
订阅
Sitemap
博友圈 星球穿梭
开往-友链接力