在CSS中探索颜色

<p>掌握CSS颜色：综合指南

<p>>在上一课中，我们探索了CSS选择器。现在，让我们通过学习如何操纵所选元素的外观，从颜色修改开始。本指南涵盖了定义CSS中颜色的各种方法，包括颜色名称，十六进制代码，RGB值和HSL格式。

> <p>如前所述，在选择HTML元素（例如A<p>>段落）之后，您可以使用color>属性来修改其文本颜色：>

<code class="language-css">p {
  color: red;
}</code>

同样，<p>属性会更改元素的背景：> background-color

> CSS支持常见的颜色名称，例如“红色”和“ DarkOrange”，但并不包含所有可能的色调。 对于精确的颜色控制，RGB，HEX和HSL颜色型号具有更大的灵活性。

<code class="language-css">p {
  background-color: darkorange;
}</code>

> RGB颜色模型<p> RGB（红色，绿色，蓝色）构成计算机系统中颜色表示的基础。 混合这三种原色会产生广泛的色调。

函数定义了RGB颜色：

<p>每个参数（rgb()，

，

<code class="language-css">rgb(<red>, <green>, <blue>)</code>

）接受整数值在0到255之间，代表每个颜色组件的强度。 0表示最弱的强度，而255最强。例如：<p> red green组合不同的强度会产生各种颜色：blue

强烈建议使用颜色拾取器工具来视觉选择RGB值，因为仅靠数值的值预测所得颜色很具有挑战性。

<code class="language-css">p {
  color: rgb(255, 0, 0); /* Equivalent to color: red; */
}</code>

<p>

<code class="language-css">p {
  color: rgb(168, 189, 45);
}</code>

<p>函数通过添加alpha通道扩展

： <p>

参数（0.0至1.0）控制透明度； 0.0是完全透明的，1.0完全不透明： <p> rgba()rgb()

<code class="language-css">rgba(<red>, <green>, <blue>, <alpha>)</code>

十六进制颜色模型<p> alpha十六进制的颜色使用十六进制符号：

<code class="language-css">p {
  color: rgba(167, 189, 45, 0.408);
}</code>

<p>符号先于六位数十六进制代码。 每对（，

，

）分别代表红色，绿色和蓝色组件，范围从00（0小数）到FF（255个小数）。 例如：

<p> 可以使用八位数十六进制代码添加

透明度：>

<code class="language-css">#rrggbb</code>

<p>#表示alpha通道（00至ff，映射到0.0至1.0）。 rr gg这相当于bb。

<code class="language-css">p {
  color: #ff0000; /* Equivalent to color: rgb(255, 0, 0); and color: red; */
}</code>

<p>

> HSL颜色模型

<p>hsl（色相，饱和，轻度）是图形设计师熟悉的颜色模型。 hsl()函数使用：

<code class="language-css">p {
  color: red;
}</code>

<p>hue代表颜色在色轮上的位置（0至360度）。

<p>

><p>（0％至100％）表示颜色的强度（0％是灰色，100％是全颜色）。 saturation

<p> >

（0％至100％）确定添加的黑色或白色的量（0％为黑色，100％是白色）。 <p>lightness

在 <p>

这等效于<p>和hsla()。

进一步探索

<code class="language-css">p {
  background-color: darkorange;
}</code>

<code class="language-css">rgb(<red>, <green>, <blue>)</code>

<p>>使用CSS #a7bd2d68创建多列布局 rgba(167, 189, 45, 0.408)掌握CSS网格布局

>使用CSS

构建Flexbox布局

以上是在CSS中探索颜色的详细内容。更多信息请关注PHP中文网其他相关文章！