色码表 Color code table
最近打算更新设计博客页面,需要用到CSS色码表,查了一些资料现转载此处以备以后使用,点击此处查看原文,另外还发现了几个不错的网站:
色碼表英文為 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> 標籤將文字標示起來,直接使用 color 屬性即可修改文字的顏色。
色碼表的使用範例二、用來設計或修改 DIV 區塊的背景顏色
修改 DIV 區塊的背景顏色請使用 background-color 屬性。
色碼表的使用範例三、用來設計或修改表格背景顏色
HTML table 表格的背景顏色可以使用 bgcolor 或 background-color 來設計,設計師可以為整個表格的背景顏色作一次規劃,也可以分別對每個欄位 <td> 設計不同的背景顏色,例如 <td bgcolor="色碼">,詳細的表格與法請參閱:HTML table 表格。
延伸閱讀
色码表 Color code table的更多相关文章
- 十六进制颜色码及其表示-(6 digit color code)
我们知道对于RGB颜色系统,颜色是由三个256位的十进制数值表示的: (R:0-255,G:0-255,B:0-255) 那么一个三元组可以确定一种颜色. 然而,在很多配置文件中颜色并不是直接用十进制 ...
- NGUI Label Color Code
UILabel的颜色代码 NGUI的Label文档:http://www.tasharen.com/?page_id=166 you can embed colors in [RrGgBb] form ...
- Iso language code table之(软件国际化)
ISO 639是用来区分所有已知的语言规范的术语.每种语言都分配两个字母(639-1)或三个英文字母(639-2和639-3),小写字母的缩写,修订后的版本命名的.该系统是非常有用的语言学家和人类学家 ...
- HTML色码表
颜色名称及色样表(HTML版) 颜色名 中文名称 Hex RGB 十进制 Decimal LightPink 浅粉红 #FFB6C1 255,182,193 Pink 粉红 #FF ...
- CSS基础-DAY2
CSS属性操作-文本 文本颜色 <head> <style> p{ /*color:#8B5742 ;色码表*/ color: RGBA(255,0,0,0.5); /*调色, ...
- CSS基础part2
CSS属性操作-文本 文本颜色 <head> <style> p{ /*color:#8B5742 ;色码表*/ color: RGBA(255,0,0,0.5); /*调色, ...
- 51单片机产生1Hz-5kHz可调占空比方波
学校的课程设计,总结一下. 注意 1.高低电平的改变不适合在主函数的while循环中,因为要有数码管动态显示的延时和其它逻辑处理,时间太长会不能及时改变高低电平值. 2.中断的执行时间一定是不能超过定 ...
- 自用VS Code 上的Markdown 编辑器css
目标效果如下: 主题使用:Markdown Yellow 主题[https://marketplace.visualstudio.com/items?itemName=ms-vscode.Theme- ...
- BIG5编码表
Big5 (Traditional Chinese) character code table code +0 +1 +2 +3 +4 +5 +6 +7 +8 +9 +A +B +C +D +E +F ...
随机推荐
- 我的JSP中文编码解决方案
虽然以前就知道编码问题,但是一直没有遇到问题,以前用asp.net和php的时候,感觉很自然地写程序,没怎么特别处理编码问题,这回改用java写,真心被恶心到了. 进行了一番查阅学习后,终于搞明白了一 ...
- 使用VS进行打包程序解决生成两个文件的问题(压缩后只有一个exe)
使用VS打包创建setup相信大家都挺熟的了,不熟的话网上也有很多,就不做介绍了,现在给大家写下怎么将生成的那些文件夹以及setup.exe和.msi 文件打包成一个exe 我们这里使用的是Winra ...
- 慕课网5-2编程练习:flex布局制作卡片布局案例
慕课网5-2编程练习:flex布局制作卡片布局案例 小伙伴们,学习了卡片布局,接下来我们根据效果图,也写出一个卡片布局的页面吧! 效果图如下: 任务 1.主体内容的卡片一行只能显示两个. 2.卡片与卡 ...
- docker速记
1.docker:一个轻量级的虚拟机.是一个容器 2.Linux系统包括—RedHat(商业版).Centos.Ubuntu 3.docker比作码头的集装箱,image镜像就是基石,images类似 ...
- Pycharm安装及第一次使用导航
Pycharm:Pycharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管理.代码跳转.智能提示.自动完成.单元 ...
- layer 确认或取消后跳转
layer.open({ content: "下单成功" , btn: ['确定','取消'], style: 'width:80%', yes: function(index, ...
- linux 文件 chgrp、chown、chmod
linux 默认情况下有会提供6个terminal 来让用户登录,使用[Ctrl]+[Alt] +[F1]~[F6] 组合 linux 文件 任何一个文件都具有"user,Group及Oth ...
- SIFT特征点检测与匹配
SIFT的步骤如下: (1) 尺度空间极值检测(Scale-space Extrema Detection) 也就是在多尺度高斯差分(Difference of Gauss)空间中检测极值点(3x3x ...
- 拓扑排序/DFS HDOJ 4324 Triangle LOVE
题目传送门 题意:判三角恋(三元环).如果A喜欢B,那么B一定不喜欢A,任意两人一定有关系连接 分析:正解应该是拓扑排序判环,如果有环,一定是三元环,证明. DFS:从任意一点开始搜索,搜索过的点标记 ...
- 暴力(判凸四边形) FZOJ 2148 Moon Game
题目传送门 题意:给了n个点的坐标,问能有几个凸四边形 分析:数据规模小,直接暴力枚举,每次四个点判断是否会是凹四边形,条件是有一个点在另外三个点的内部,那么问题转换成判断一个点d是否在三角形abc内 ...