最近打算更新设计博客页面,需要用到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. PHP编程常见小错误错误

    使用PHP的过程中经常因为粗心出一些简单的错误,先将自己遇到几个的记录下来,以后慢慢增加. 1 Fatal error: Function name must be a string 翻译很简单,就是 ...

  2. bzoj 1602: [Usaco2008 Oct]牧场行走【瞎搞】

    本来想爆手速写个树剖,然而快下课了就手残写了了个n方的短小-- 暴力把查询的两个点中深的一个跳上来,加上边权,然后一起跳加边权就行了 #include<iostream> #include ...

  3. (10)用css建立表单

    1.用css建立表单 本篇资料主要介绍使用css设置表单元素的方法. 表单是网页与用户交互所不可缺少的元素,表单是网页的访问者进行交互的接口,例如大家都常遇到的:网上注册.网上登录.网上交易.网上投票 ...

  4. LeetCode.893-特殊相等字符串组(Groups of Special-Equivalent Strings)

    这是悦乐书的第344次更新,第368篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第209题(顺位题号是893). You are given an array A of ...

  5. 针对IE浏览器里面CSS的Bug解决方法

    IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, 而左侧则呈现出20px,解决它的方法是 ...

  6. [USACO 2011 Dec Gold] Threatening Letter【后缀】

    Problem 3: Threatening Letter [J. Kuipers, 2002] FJ has had a terrible fight with his neighbor and w ...

  7. K - KazaQ’s Socks

    Bryce1010模板 #include <bits/stdc++.h> using namespace std; #define LL long long int main() { LL ...

  8. TIME-April

    一转眼四月份又过了三分之一,现在才开始计划自己的四月还真是对自己太过放松了呀!不过前一段时间都在搞学生会的五四评优答辩,索然不是我喜欢的过程,但是结果还比较令人欢喜.翻掉过去的篇章,展开新的一页. 四 ...

  9. 题解报告:hdu 2057 A + B Again

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2057 问题描述 我们的HDOJ必须有许多A + B问题,现在又有新的问题出现. 给你两个十六进制整数, ...

  10. 使用HttpClient携带pfx证书调用HTTPS协议的WebService

    调用第三方服务时,厂商提供了一个WSDL文件.调用的地址和一个后缀为pfx的证书文件,通过SOUPUI记载证书是可以正常调用WebService服务,那么如何将该服务转换为代码呢? 咨询了厂商的支持, ...