HTML 颜色


HTML 颜色由红色、绿色、蓝色混合而成。


颜色值

HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。

种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。

这个表格给出了由三种颜色混合而成的具体效果:

颜色值

颜色(Color) 颜色十六进制(Color HEX) 颜色RGB(Color RGB)
  #000000 rgb(0,0,0)
  #FF0000 rgb(255,0,0)
  #00FF00 rgb(0,255,0)
  #0000FF rgb(0,0,255)
  #FFFF00 rgb(255,255,0)
  #00FFFF rgb(0,255,255)
  #FF00FF rgb(255,0,255)
  #C0C0C0 rgb(192,192,192)
  #FFFFFF rgb(255,255,255)

尝试一下 »


1600万种不同颜色

三种颜色 红,绿,蓝的组合从0到255,一共有1600万种不同颜色(256 x 256 x 256)。

在下面的颜色表中你会看到不同的结果,从0到255的红色,同时设置绿色和蓝色的值为0,随着红色的值变化,不同的值都显示了不同的颜色。

Red Light Color HEX Color RGB
  #000000  rgb(0,0,0)
  #080000 rgb(8,0,0)
  #100000 rgb(16,0,0)
  #180000 rgb(24,0,0)
  #200000 rgb(32,0,0)
  #280000 rgb(40,0,0)
  #300000 rgb(48,0,0)
  #380000 rgb(56,0,0)
  #400000 rgb(64,0,0)
  #480000 rgb(72,0,0)
  #500000 rgb(80,0,0)
  #580000 rgb(88,0,0)
  #600000 rgb(96,0,0)
  #680000 rgb(104,0,0)
  #700000 rgb(112,0,0)
  #780000 rgb(120,0,0)
  #800000 rgb(128,0,0)
  #880000 rgb(136,0,0)
  #900000 rgb(144,0,0)
  #980000 rgb(152,0,0)
  #A00000 rgb(160,0,0)
  #A80000 rgb(168,0,0)
  #B00000 rgb(176,0,0)
  #B80000 rgb(184,0,0)
  #C00000 rgb(192,0,0)
  #C80000 rgb(200,0,0)
  #D00000 rgb(208,0,0)
  #D80000 rgb(216,0,0)
  #E00000 rgb(224,0,0)
  #E80000 rgb(232,0,0)
  #F00000 rgb(240,0,0)
  #F80000 rgb(248,0,0)
  #FF0000 rgb(255,0,0)

灰暗色调

以下展示了灰色到黑色的渐变

Gray Shades Color HEX Color RGB
  #000000  rgb(0,0,0) 
  #080808  rgb(8,8,8) 
  #101010  rgb(16,16,16) 
  #181818  rgb(24,24,24) 
  #202020  rgb(32,32,32) 
  #282828  rgb(40,40,40) 
  #303030  rgb(48,48,48) 
  #383838  rgb(56,56,56) 
  #404040  rgb(64,64,64) 
  #484848  rgb(72,72,72) 
  #505050  rgb(80,80,80) 
  #585858  rgb(88,88,88) 
  #606060  rgb(96,96,96) 
  #686868  rgb(104,104,104) 
  #707070  rgb(112,112,112) 
  #787878  rgb(120,120,120) 
  #808080  rgb(128,128,128) 
  #888888  rgb(136,136,136) 
  #909090  rgb(144,144,144) 
  #989898  rgb(152,152,152) 
  #A0A0A0  rgb(160,160,160) 
  #A8A8A8  rgb(168,168,168) 
  #B0B0B0  rgb(176,176,176) 
  #B8B8B8  rgb(184,184,184) 
  #C0C0C0  rgb(192,192,192) 
  #C8C8C8  rgb(200,200,200) 
  #D0D0D0  rgb(208,208,208) 
  #D8D8D8  rgb(216,216,216) 
  #E0E0E0  rgb(224,224,224) 
  #E8E8E8  rgb(232,232,232) 
  #F0F0F0  rgb(240,240,240) 
  #F8F8F8  rgb(248,248,248) 
  #FFFFFF  rgb(255,255,255) 

Web安全色?

数年以前,当大多数计算机仅支持 256 种颜色的时候,一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是,微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色(双方大约各使用 20 种)。

我们不确定如今这么做的意义有多大,因为越来越多的计算机有能力处理数百万种颜色,不过做选择还是你自己。

最初,216 跨平台 web 安全色被用来确保:当计算机使用 256 色调色板时,所有的计算机能够正确地显示所有的颜色。

000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

HTML 颜色的更多相关文章

  1. 用神奇的currentColor制作简洁的颜色动画效果

    先上一个兼容性总结图:老版本ie可以直接用复杂方法了,套用某表情包的话:  2016年了,做前端你还考虑兼容IE6?你这简直是自暴自弃! 好了,知道了兼容性,我们可以放心的使用了. 在CSS3中扩展了 ...

  2. HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...

  3. 深入理解CSS六种颜色模式

    前面的话 赏心悦目的颜色搭配让人感到舒服,修改元素颜色的功能让人趋之若鹜.但颜色规划不当,会让网站用户无所适从.颜色从<font color="">发展至今,保留了很多 ...

  4. EasyPR--开发详解(5)颜色定位与偏斜扭转

    本篇文章介绍EasyPR里新的定位功能:颜色定位与偏斜扭正.希望这篇文档可以帮助开发者与使用者更好的理解EasyPR的设计思想. 让我们先看一下示例图片,这幅图片中的车牌通过颜色的定位法进行定位并从偏 ...

  5. 为革命保护视力 --- 给 Visual Studio 换颜色

    “为革命,保护视力,预防近视,眼保健操开始......” 这个应该是最老版本的眼保健操了,你听过? 一堆废话 且不说上面这个眼保健操到底有木有用,让眼睛放松下还是很有必要的,尤其是现在天天对着不是手机 ...

  6. Android SearchView 自定义SearchIcon和字体颜色大小

    自定义SearchView的搜索图标和字体属性相对复杂一些,记下来. 一.自定义SearchIcon 1.API版本低于21:版本小于21时,要修改SearchIcon比较复杂,需要先获取到Searc ...

  7. iOS 4s-6Plus屏幕自动适配及颜色转换为十六进制

    iOS各种屏幕自动适配及颜色转换为十六进制 ★★★XLJMatchScreen自动适配屏幕★★★ 支持pod导入 pod 'XLJScreenMatching', '~> 1.0.3' 如果发现 ...

  8. Mardown字体颜色、背景色

    Markdown字体颜色.背景色 字体颜色表 Markdwon测试 **粗体文字**,或__加文字__ 加粗 Markdown测试 *斜体文字*, 或_斜体_ 斜体 Markdwon测试 列表: 背景 ...

  9. Atitit 动态按钮图片背景颜色与文字组合解决方案

    Atitit 动态按钮图片背景颜色与文字组合解决方案 转换背景颜色,setFont("cywe_img", fontScale, 50, 5) 设置文字大小与坐标 文字分拆,使用字 ...

  10. 【CSS进阶】CSS 颜色体系详解

    说到 CSS 颜色,相比大家都不会陌生,本文是我个人对 CSS 颜色体系的一个系统总结与学习,分享给大家. 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容. 接下来的行文内容大概会按照 ...

随机推荐

  1. jQuery HighchartsTableHTML表格转Highcharts图表插件

    版权申明jQuery HighchartsTable 由 PMSIpilot 创建,中文使用文档由Highcharts中文网发布本文由Theo.红烧鸡翅膀.Mr.Zhang 翻译整理,版权归Highc ...

  2. python第一天(文件流以及控制流)简单总结

    第一天的python学习主要是: (1)对python的一个大致了解 值得注意的是在window下开发要注意path的问题. (2)对python控制流的一个了解 常用的if ,while ,for ...

  3. iOS中"查看更多/收起"功能实现

    实现效果如图: 查看更多功能在很多app种都有应用,在这里简单的实现,介绍实现流程: 一个tableViewCell中包含一个collectionView,"查看更多"按钮是tab ...

  4. nginx 红黑树详解

    1 介绍 这部分终于整理完了,太耗时间了,留下来备忘吧! 之前看STL源码时,只是研究了红黑树的插入部分.在stl源码剖析的书中,也没有涉及到删除操作的分析,这次对删除操作也进行了详细的研究, 并且还 ...

  5. 0115percona-toolkit安装教程

    一.percona-toolkit简介percona-toolkit是一组高级命令行工具的集合,用来执行各种通过手工执行非常复杂和麻烦的mysql和系统任务,这些任务包括: 检查master和slav ...

  6. Building Your First EDM

    1 文件--新建--项目 控制台应用程序,填写信息,确定: 2 在解决方案管理器中,选中AmyConsoleApp,添加新项, 选择ADO.NET 实体数据模型,添加: 3 在选择模型内容中选择“从数 ...

  7. phpcms v9 后台首页 去掉团队信息等版权

    phpcms\languages\zh-cn\admin.lang.php $LANG['main_product_team'] = 'PHPCMS开发团队'; phpcms\modules\admi ...

  8. [Lua]Mac系统上安装Lua环境

    1.下载 Lua语言的官方网站 http://www.lua.org/ 下载最新版本的Lua环境 2.安装 解压下载包lua-5.3.1.tar.gz 打开终端Terminal 使用cd命令进入该目录 ...

  9. [iOS Animation]-CALayer 专用图层

    专用图层 复杂的组织都是专门化的 Catharine R. Stimpson 到目前为止,我们已经探讨过CALayer类了,同时我们也了解到了一些非常有用的绘图和动画功能.但是Core Animati ...

  10. input的onchange事件实际触发条件与解决方法

    input中onchange事件已经属于元老级别了,并且现在同onclick一样使用频率很高,然而onchange的机制实际上有很多童鞋并不清楚,我们通过实例来分析这个事件的特征. 触发onchang ...