最近打算更新设计博客页面,需要用到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. 数据库无法访问,用户 NT AUTHORITY/SYSTEM或NT AUTHORITY\NETWORK SERVICE登录失败的解决办法

    问题:win7中的在IIS 7.0中,在 Default Web Site 目录下挂一虚拟目录. 在相应的应用程序池 DefaultAppPool 设置标识设置成NetworkService. 但是打 ...

  2. bzoj 1610: [Usaco2008 Feb]Line连线游戏【瞎搞】

    阴沟翻船.jpg 居然忘了除0的情况 枚举两两之间的线,把斜率装起来排个序去个重就好了 真是水的一晚上呢 #include<iostream> #include<cstdio> ...

  3. python安装教学

    1.首先登陆到python的官方网站 1https://www.python.org/ 2.鼠标放在Download上,点击下面对应的型号,我的是Windows 3.点击Windows到此页面,点击3 ...

  4. 找规律/贪心 Codeforces Round #310 (Div. 2) A. Case of the Zeros and Ones

    题目传送门 /* 找规律/贪心:ans = n - 01匹配的总数,水 */ #include <cstdio> #include <iostream> #include &l ...

  5. 题解报告:hdu 1212 Big Number(大数取模+同余定理)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1212 Problem Description As we know, Big Number is al ...

  6. B/S和C/S示意图

    B/S C/S

  7. 安装SNMP

    http://songknight.blog.51cto.com/2599480/655337

  8. Spring---AOP注解开发&jdbc模板&Spring事务管理

    一.AOP注解开发 此处需要回忆一遍AOP的概念.简单的来说,AOP就是利用动态代理技术,做到不触动源代码但却扩展了功能.那么就需要一个被扩展的对象和一个“新的功能”,例如说给某类的saveUser方 ...

  9. 30天自制操作系统 DAY6

    _load_gdtr: 这个函数用来将指定的段上限(limit)和地址赋值给名为GDTR的48位寄存器. 给GDTR赋值唯一的办法是指定一个内存地址,从指定的地址读取6个字节(48位),然后赋值给GD ...

  10. js设计模式-发布/订阅模式

    一.前言 发布订阅模式,基于一个主题/事件通道,希望接收通知的对象(称为subscriber)通过自定义事件订阅主题,被激活事件的对象(称为publisher)通过发布主题事件的方式被通知. 就和用户 ...