最近打算更新设计博客页面,需要用到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. 我的JSP中文编码解决方案

    虽然以前就知道编码问题,但是一直没有遇到问题,以前用asp.net和php的时候,感觉很自然地写程序,没怎么特别处理编码问题,这回改用java写,真心被恶心到了. 进行了一番查阅学习后,终于搞明白了一 ...

  2. 使用VS进行打包程序解决生成两个文件的问题(压缩后只有一个exe)

    使用VS打包创建setup相信大家都挺熟的了,不熟的话网上也有很多,就不做介绍了,现在给大家写下怎么将生成的那些文件夹以及setup.exe和.msi 文件打包成一个exe 我们这里使用的是Winra ...

  3. 慕课网5-2编程练习:flex布局制作卡片布局案例

    慕课网5-2编程练习:flex布局制作卡片布局案例 小伙伴们,学习了卡片布局,接下来我们根据效果图,也写出一个卡片布局的页面吧! 效果图如下: 任务 1.主体内容的卡片一行只能显示两个. 2.卡片与卡 ...

  4. docker速记

    1.docker:一个轻量级的虚拟机.是一个容器 2.Linux系统包括—RedHat(商业版).Centos.Ubuntu 3.docker比作码头的集装箱,image镜像就是基石,images类似 ...

  5. Pycharm安装及第一次使用导航

    Pycharm:Pycharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管理.代码跳转.智能提示.自动完成.单元 ...

  6. layer 确认或取消后跳转

    layer.open({ content: "下单成功" , btn: ['确定','取消'], style: 'width:80%', yes: function(index, ...

  7. linux 文件 chgrp、chown、chmod

    linux 默认情况下有会提供6个terminal 来让用户登录,使用[Ctrl]+[Alt] +[F1]~[F6] 组合 linux 文件 任何一个文件都具有"user,Group及Oth ...

  8. SIFT特征点检测与匹配

    SIFT的步骤如下: (1) 尺度空间极值检测(Scale-space Extrema Detection) 也就是在多尺度高斯差分(Difference of Gauss)空间中检测极值点(3x3x ...

  9. 拓扑排序/DFS HDOJ 4324 Triangle LOVE

    题目传送门 题意:判三角恋(三元环).如果A喜欢B,那么B一定不喜欢A,任意两人一定有关系连接 分析:正解应该是拓扑排序判环,如果有环,一定是三元环,证明. DFS:从任意一点开始搜索,搜索过的点标记 ...

  10. 暴力(判凸四边形) FZOJ 2148 Moon Game

    题目传送门 题意:给了n个点的坐标,问能有几个凸四边形 分析:数据规模小,直接暴力枚举,每次四个点判断是否会是凹四边形,条件是有一个点在另外三个点的内部,那么问题转换成判断一个点d是否在三角形abc内 ...