HTML 颜色

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

颜色值

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

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

TML颜色代码

官网是这样介绍的：使用我们的颜色选择器、颜色表和HTML颜色名称来获取HTML颜色代码、Hex颜色代码、RGB和HSL值。即刻开始吧！

颜色选择器

寻找完美色彩从未如此简单，使用我们的HTML颜色选择器来浏览上百万的颜色和色彩搭配。

颜色选择器

颜色选择器动图

操作：

选取颜色

点击左侧颜色样本将其添加到您的调色板。

保存颜色

在您的调色板上保存和撤销保存颜色；下次您访问时候它们会在这里。

导出颜色

将您当前的调色板以Hex、RGB、HTML、CSS和SCSS 格式输出。试一下吧！

颜色表

有了这些扁平化设计、Material Design和网页安全颜色表，一定可以为您的网页或应用程序找到完美的色彩方案 – 只需不停地寻找！

颜色表

颜色表动图

颜色名

现代浏览器支持140种已命名的颜色，如下所列。根据名称、Hex代码或RGB值将其用于您的HTML和CSS。

颜色名

如何使用HTML颜色名

关于这个网站，作者是这么说的

之所以建立HTML颜色代码，是因为我们认为设计工具本身有应有精良的设计。如果您喜欢这个网站或有何建议与反馈，欢迎您随时发电子邮件与我们联系

同时这个网站还有其他有趣好玩的分享，比如最佳调色板生成器（选择完美的色彩方案是任何网站或项目的关键部分，为了帮助您找寻完美的颜色组合，我们已将今天最佳的调色板生成器和网络工具收集在一起编成列表），终极指南免费库存照片（每个网站都需要很好的创造力，所以我们将最喜爱的可获得免版税图库照片的地方汇集做成特赞的列表。没错，全部是魅力图库图片，100%免费），如何根据颜色搜索图片（搜索与您的颜色方案相匹配的图片可能会相当耗时，所以我们把最爱的图片搜索工具列成了一个简短的清单，这些工具可以使用颜色对其搜索结果加以过滤或完善）等等

最后说一遍，这个网站有中文，有中文，有中文

网址分享，打开馨客栈导航：http://www.mackxin.com/nav.html

然后找到下图所示：

在线HTML颜色代码

更多分享，请关注馨客栈

关注分享，体验乐趣

为Web开发人员，最常见的事情之一就是更改HTML元素的背景颜色。但是，如果您不了解如何使用CSS background-color属性，可能会产生混淆。在本文中，我们讨论以下几点

1.HTML元素的默认背景色值

2.如何更改div的背景颜色，这是非常常见的元素

3.该background-color属性会影响CSS盒子模型的哪些部分，以及

4.此属性可以采用的不同值。

元素的默认背景色

div的默认背景颜色是transparent。因此，如果您不指定div的背景色，它将显示其父元素的背景色。

更改Div的背景颜色

在此示例中，我们将更改以下div的背景颜色。

<div class="div-1"> I love HTML </div>
<div class="div-2"> I love CSS </div>
<div class="div-3"> I love JavaScript </div>

没有任何样式，它将在视觉上转换为以下内容。

让我们通过向类中添加样式来更改div的背景颜色。您可以通过尝试HTML文件中的示例进行操作。

<style>
    .div-1 {
        background-color: #EBEBEB;
    }
    
    .div-2 {
    	background-color: #ABBAEA;
    }
    
    .div-3 {
    	background-color: #FBD603;
    }
</style>

<body>
    <div class="div-1"> I love HTML </div>
    <div class="div-2"> I love CSS </div>
    <div class="div-3"> I love JavaScript </div>
</body>

这将导致以下结果：

看！我们已成功更改了该div的背景颜色。接下来，让我们更多地了解此属性。让我们看看background-color属性如何影响CSS-box模型的各个部分。

背景颜色和CSS Box模型

根据CSS框模型，所有HTML元素都可以建模为矩形框。每个盒子由4个部分组成，如下图所示。

如果您不熟悉Box模型，则可以查阅相关资料。问题是，当您更改div的背景颜色时，Box模型的哪一部分会受到影响？简单的答案是填充区域和内容区域。让我们通过一个例子来确认这一点。

<style>
    body {
        background-color: #ABBAEA;
    }
    div {
        height: 200px;
        margin: 20px;
        border: 5px solid;
        background-color: #FBD603;
    }
</style>
<body>
    <div>
        <p>This is the parent div which contains the div we are testing</p>

        <div>
            <p>This example shows that changing the background color of a div does not affect the border and margin of the div.</p>
        </div>
    </div>
</body>

这将导致：

从上面的示例中，我们可以看到空白区域和边框区域不受背景颜色变化的影响。我们可以使用border-color属性更改边框的颜色。边距区域保持透明，并反映父容器的背景色。

最后，让我们讨论background-color属性可以采用的值。

背景色值

就像color属性一样，background-color属性可以采用六个不同的值。让我们通过一个示例考虑三个最常见的值。在示例中，我们将div的背景色设置为具有不同值的红色。

<style>
    /* Keyword value/name of color */
    .div-1 {
        background-color: red;
    }
    
    /* Hexadecimal value */
    .div-2 {
       background-color: #FF0000;	 
    }
    
    /* RGB value */
    .div-3 {
    	background-color: rgb(255,0,0);
    }
    
</style>

<body>
    <div class="div-1">
        <p>The background property can take six different values.</p>
    </div>

    <div class="div-2">
        <p>The background property can take six different values.</p>
    </div>

    <div class="div-3">
        <p>The background property can take six different values.</p>
    </div>
</body>

注意，它们的结果都是相同的背景色。

该background-color属性可以采用的其他值包括HSL值，特殊关键字值和全局值。这是每个例子。

/* HSL value */
background-color: hsl(0, 100%, 25%;

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

额外注意

设置元素的背景色时，重要的是要确保背景色和其包含的文本颜色的对比度足够高。这是为了确保弱视人士可以轻松阅读文本。

第一个div的背景颜色与文本颜色之间的对比度不够高，每个人都看不到。因此，除非您是唯一正在使用的网站，并且您的视力非常好，否则应避免这种颜色组合。

第二个div在背景颜色和文本颜色之间具有更好的对比度。因此，它使人们更容易阅读和阅读。

结论

在本文中，我们看到了如何更改div的背景颜色。我们还讨论了CSS Box模型的哪些部分受背景颜色变化的影响。最后，我们讨论了background-color属性可以采用的值。

希望本文对您有所帮助。谢谢阅读。

在线咨询

上一篇：学习本地存储-javascript实现页面访问次数统计
下一篇：前端入门-html 文字格式、标题与段落

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 颜色

TML颜色代码

颜色选择器

颜色表

颜色名

关于这个网站，作者是这么说的

元素的默认背景色

更改Div的背景颜色

背景颜色和CSS Box模型

背景色值

额外注意

结论

您的项目需求