最近打算更新设计博客页面,需要用到CSS色码表,查了一些资料现转载此处以备以后使用,点击此处查看原文,另外还发现了几个不错的网站:

color-hex

HTML颜色代码

色碼表


色碼表英文為 Color code table,是網頁設計師在做設計時,挑選顏色常常會用到的參考表,好的設計往往需要做許多不同的顏色搭配與比較,才能呈現出最適合的網頁風格,舉凡表格的設計、網頁背景顏色、元素邊框顏色、圖層陰影效果、文字顏色...等,都可以使用色碼表來挑選所需要的顏色,通常使用顏色有三種不同的寫法,分別是使用顏色的英文名稱、十六進位色碼以及 RGB 色碼,看個人習慣使用哪一種表示方式,以下為編輯們所整理的十六進位制色碼表,共有 432 種不同的顏色可以挑選,應該可以滿足大部分設計時所需要的色碼。


十六進位色碼表

#FFF2F2 #FFE8E8 #FFDEDE #FFD4D4 #FFC9C9 #FFBFBF #FFB5B5 #FFABAB
#FFA1A1 #FF9696 #FF8C8C #FF8282 #FF7878 #FF6E6E #FF6363 #FF5959
#FF5F5F #FF4545 #FF3B3B #FF3030 #FF2626 #FF1C1C #FF1212 #FF0000
#F50000 #F00000 #EB0000 #E60000 #E00000 #DB0000 #D60000 #D10000
#CC0000 #C70000 #C20000 #BD0000 #B80000 #B20000 #AD0000 #A80000
#A30000 #9E0000 #990000 #940000 #8F0000 #8A0000 #850000 #800000
#FFFAF2 #FFF7E8 #FFF3DE #FFF0D4 #FFECC9 #FFE8BF #FFE5B5 #FFE1AB
#FFDEA1 #FFDA96 #FFD78C #FFD382 #FFCF78 #FFCC6E #FFC863 #FFC559
#FFC14F #FFBD45 #FFBA3B #FFB630 #FFB326 #FFB01C #FFAC12 #FFA600
#F59F00 #F09C00 #EB9900 #E69500 #E09200 #DB8F00 #D68B00 #D18800
#CC8500 #C78100 #C27E00 #BD7B00 #B87800 #B27400 #AD7100 #A86E00
#A36A00 #9E6700 #996400 #946000 #8F5D00 #8A5A00 #855600 #805300
#FFFFF2 #FFFFE8 #FFFFDE #FFFFD4 #FFFFC9 #FFFFBF #FFFFB5 #FFFFAB
#FFFFA1 #FFFF96 #FFFF8C #FFFF82 #FFFF78 #FFFF6E #FFFF63 #FFFF59
#FFFF4F #FFFF45 #FFFF3B #FFFF30 #FFFF26 #FFFF1C #FFFF0F #FFFF00
#F5F500 #F0F000 #EBEB00 #E6E600 #E0E000 #DBDB00 #D6D600 #D1D100
#CCCC00 #C7C700 #C2C200 #BDBD00 #B8B800 #B2B200 #ADAD00 #A8A800
#A3A300 #9E9E00 #999900 #949400 #8F8F00 #8A8A00 #858500 #808000
#F2FFF2 #E8FFE8 #DEFFDE #D4FFD4 #C9FFC9 #BFFFBF #B5FFB5 #ABFFAB
#A1FFA1 #96FF96 #8CFF8C #82FF82 #78FF78 #6EFF6E #63FF63 #59FF59
#4FFF4F #45FF45 #3BFF3B #30FF30 #26FF26 #1AFF19 #0DFF0D #00FF00
#00F500 #00F000 #00EB00 #00E600 #00E000 #00DB00 #00D600 #00D100
#00CC00 #00C700 #00C200 #00BD00 #00B800 #00B200 #00AD00 #00A800
#00A300 #009E00 #009900 #009400 #008F00 #008A00 #008500 #008000
#F2FFFF #E8FFFF #DEFFFF #D4FFFF #C9FFFF #BFFFFF #B5FFFF #ABFFFF
#A1FFFF #96FFFF #8CFFFF #82FFFF #78FFFF #6EFFFF #63FFFF #59FFFF
#4FFFFF #45FFFF #3DFFFF #30FFFF #26FFFF #1CFFFF #12FFFF #00FFFF
#00F5F5 #00F0F0 #00EBEB #00E6E6 #00E0E0 #00DBDB #00D6D6 #00D1D1
#00CCCC #00C7C7 #00C2C2 #00BDBD #00B8B8 #00B2B2 #00ADAD #00A8A8
#00A3A3 #009E9E #009999 #009494 #008F8F #008A8A #008585 #008080
#EBEBFF #E0E0FF #D6D6FF #CCCCFF #C2C2FF #B8B8FF #ADADFF #A3A3FF
#9999FF #8C8CFF #8282FF #7878FF #6E6EFF #6363FF #5959FF #4F4FFF
#4545FF #3B3BFF #3030FF #2626FF #1C1CFF #1212FF #0808FF #0000FF
#0000FA #0000F5 #0000EB #0000E6 #0000E0 #0000DB #0000D6 #0000D1
#0000CC #0000C7 #0000C2 #0000BD #0000B8 #0000B2 #0000AD #0000A8
#0000A3 #00009E #000099 #000094 #00008F #00008A #000085 #000080
#FAF2FF #F5E8FF #F1DEFF #EDD4FF #E8C9FF #E4BFFF #E0B5FF #DBABFF
#D7A1FF #D396FF #CE8CFF #CA82FF #C678FF #C26EFF #BD63FF #B959FF
#B54FFF #B045FF #AC3BFF #A830FF #A326FF #9F1CFF #990DFF #9300FF
#9300FF #8D00F5 #8700EB #8400E6 #8100E0 #7F00DB #7C00D6 #7900D1
#7600CC #7300C7 #7000C2 #6D00BD #6A00B8 #6700B2 #6400AD #6100A8
#5E00A3 #5B009E #580099 #550094 #52008F #4F008A #4C0085 #4A0080
#FFF2FF #FFE8FF #FFDEFF #FFD4FF #FFC9FF #FFBFFF #FFB5FF #FFABFF
#FFA1FF #FF96FF #FF8CFF #FF82FF #FF78FF #FF6EFF #FF63FF #FF59FF
#FF4FFF #FF45FF #FF3BFF #FF30FF #FF26FF #FF19FF #FF0DFF #FF00FF
#F700F7 #F000F0 #EB00EB #E600E5 #E000E0 #DB00DB #D600D6 #D100D1
#CC00CC #C700C7 #C200C2 #BD00BD #B800B8 #B200B2 #AD00AD #A800A8
#A300A3 #9E009E #990099 #940094 #8F008F #8A008A #850085 #800080
#FAFAFA #F5F5F5 #EDEDED #E8E8E8 #E3E3E3 #DEDEDE #D9D9D9 #D4D4D4
#CFCFCF #C9C9C9 #C4C4C4 #BFBFBF #BABABA #B5B5B5 #B0B0B0 #ABABAB
#A6A6A6 #A1A1A1 #9C9C9C #969696 #919191 #8C8C8C #878787 #828282
#7D7D7D #787878 #737373 #6E6E6E #696969 #636363 #5E5E5E #595959
#545454 #4F4F4F #4A4A4A #454545 #404040 #3B3B3B #363636 #303030
#2B2B2B #262626 #212121 #1C1C1C #171717 #0F0F0F #0A0A0A #000000

以上色碼表採紅、橙、黃、綠、藍、靛、紫以及黑色的排列方式,每一種主要顏色細分為 48 個不同色碼,這些色碼不一定能夠轉換為顏色英文名稱,但原則上可以轉換為 RGB 色碼,主流的瀏覽器幾乎都能呈現這些色碼。隨著不同螢幕以及瀏覽器的顏色顯示差異,在使用此色碼表時,建議多用幾種不同的瀏覽器以及不同的螢幕做顏色呈現的比較。

除了使用色碼表取得顏色的色碼之外,還有沒有其他方式能夠找到顏色的色碼呢?當然有的,常見的圖片處理軟體或繪圖軟體,如專業設計師常採用的 Photoshop、Dreamweaver、GIMP 等軟體,幾乎都有內建色碼表,設計師如果使用這些專業軟體,其實不太需要額外找色碼表,直接使用內建的模組選擇顏色是最快的方式。

色碼表的使用範例一、用來設計或修改文字顏色

<span style="color:色碼;">設計文字顏色</span>

透過 <span> 標籤將文字標示起來,直接使用 color 屬性即可修改文字的顏色。

色碼表的使用範例二、用來設計或修改 DIV 區塊的背景顏色

<div style="">設計區塊的背景顏色</div>

修改 DIV 區塊的背景顏色請使用 background-color 屬性。

色碼表的使用範例三、用來設計或修改表格背景顏色

<table style=""><tr><td></td></tr></table>

HTML table 表格的背景顏色可以使用 bgcolor 或 background-color 來設計,設計師可以為整個表格的背景顏色作一次規劃,也可以分別對每個欄位 <td> 設計不同的背景顏色,例如 <td bgcolor="色碼">,詳細的表格與法請參閱:HTML table 表格

延伸閱讀

点击此处查看原文

色码表 Color code table的更多相关文章

  1. 十六进制颜色码及其表示-(6 digit color code)

    我们知道对于RGB颜色系统,颜色是由三个256位的十进制数值表示的: (R:0-255,G:0-255,B:0-255) 那么一个三元组可以确定一种颜色. 然而,在很多配置文件中颜色并不是直接用十进制 ...

  2. NGUI Label Color Code

    UILabel的颜色代码 NGUI的Label文档:http://www.tasharen.com/?page_id=166 you can embed colors in [RrGgBb] form ...

  3. Iso language code table之(软件国际化)

    ISO 639是用来区分所有已知的语言规范的术语.每种语言都分配两个字母(639-1)或三个英文字母(639-2和639-3),小写字母的缩写,修订后的版本命名的.该系统是非常有用的语言学家和人类学家 ...

  4. HTML色码表

    颜色名称及色样表(HTML版)   颜色名 中文名称 Hex RGB 十进制 Decimal     LightPink 浅粉红 #FFB6C1 255,182,193     Pink 粉红 #FF ...

  5. CSS基础-DAY2

    CSS属性操作-文本 文本颜色 <head> <style> p{ /*color:#8B5742 ;色码表*/ color: RGBA(255,0,0,0.5); /*调色, ...

  6. CSS基础part2

    CSS属性操作-文本 文本颜色 <head> <style> p{ /*color:#8B5742 ;色码表*/ color: RGBA(255,0,0,0.5); /*调色, ...

  7. 51单片机产生1Hz-5kHz可调占空比方波

    学校的课程设计,总结一下. 注意 1.高低电平的改变不适合在主函数的while循环中,因为要有数码管动态显示的延时和其它逻辑处理,时间太长会不能及时改变高低电平值. 2.中断的执行时间一定是不能超过定 ...

  8. 自用VS Code 上的Markdown 编辑器css

    目标效果如下: 主题使用:Markdown Yellow 主题[https://marketplace.visualstudio.com/items?itemName=ms-vscode.Theme- ...

  9. BIG5编码表

    Big5 (Traditional Chinese) character code table code +0 +1 +2 +3 +4 +5 +6 +7 +8 +9 +A +B +C +D +E +F ...

随机推荐

  1. Android 布局学习之——LinearLayout属性baselineAligned的作用及baseline(转载)

    转自:http://www.cnblogs.com/JohnTsai/p/4074643.html 相信大家对LinearLayout已经相当熟悉,但你们是否了解它的属性baselineAligned ...

  2. UOJ #206. 【APIO2016】Gap【交互题】

    参考:https://blog.csdn.net/clover_hxy/article/details/70767653 人生第一次交互题...不是很难但是思维和传统题差别挺大的(以及并不会本地测试= ...

  3. codeforces 880E. Maximum Subsequence(折半搜索+双指针)

    E. Maximum Subsequence time limit per test 1 second memory limit per test 256 megabytes input standa ...

  4. 【插件开发】—— 5 SWT控件以及布局使用

    前文回顾: 1 插件学习篇 2 简单的建立插件工程以及模型文件分析 3 利用扩展点,开发透视图 4 SWT编程须知 经过前几篇的介绍,多少对SWT又有了一些认识,那么这篇继续来看一下一些控件的组合使用 ...

  5. python之计数统计

    前言: 计数统计,简单的说就是统计某一项出现的次数.实际应用中很多需求都需要用到这个模型,如检测样本中某一值出现的次数.日志分析某一消息出现的频率.分析文件中相同字符串出现的概率等等.以下是实现的不同 ...

  6. C++中的static修饰的变量和函数

    原文地址:http://blog.csdn.net/he3913/archive/2008/09/18/2944737.aspxC++里的静态成员函数(不能用const的原因+static在c++中的 ...

  7. Android偏好设置(5)偏好设置界面显示多个分组,每个分组也有一个界面

    1.Using Preference Headers In rare cases, you might want to design your settings such that the first ...

  8. 支付宝添加scheme的方法

    点击项目名称,点击“Info”选项卡,在“URL Types”选项中,点击“+”,在“URL Schemes”中输入“myAlipay”.“myAlipay”来自于文件“APViewControlle ...

  9. 阿里云服务器 Access to the path '....' is denied.解决方法

    昨天公司项目迁移服务器,从自己服务器迁移到阿里云服务器,部署完成后发现有一个页面要读取磁盘上的静态文件就报错了... 如图: 解决办法: 在 Web.Config 的 <System.Web&g ...

  10. 聊聊mq的使用场景

    mq的作用 通过异步方式对系统解耦 增加系统的并发处理能力 通过异步方式对系统解耦 以用户注册为例,一般情况下: 分下一下,上面过程存在的一些问题: 注册过程会调用4个服务(注册服务.邮件服务.短信服 ...