颜色模型：16进制颜色、RGB、RGBA、HSL、HSA、HSB、LAB、LCH、HSV、YUV、XYZ、YCbCr、CMYK、Gray颜色 / 前端能用吗 / DEMO-Toy模板网

这篇具有很好参考价值的文章主要介绍了颜色模型：16进制颜色、RGB、RGBA、HSL、HSA、HSB、LAB、LCH、HSV、YUV、XYZ、YCbCr、CMYK、Gray颜色 / 前端能用吗 / DEMO。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、16进制颜色模型

16进制颜色是一种用16个字符（0-9，a-f）来表示颜色的方式。其中前两个字符表示红色分量，接下来两个字符表示绿色分量，最后两个字符表示蓝色分量。每个分量的取值范围为00到FF（十进制的0-255）。
16进制颜色是在网络和Web开发中最常用的颜色编码方式。它通常以“#”开头，后面跟着6个十六进制数字（00到FF）。每个数字代表一个颜色通道（红色、绿色和蓝色），范围从00（最小值，黑色）到FF（最大值，白色）。例如，#FF0000代表红色。

DEMO

<!DOCTYPE html>
<html>
<head>
	<title>16进制颜色演示</title>
	<style type="text/css">
		#color-box {
			width: 100px;
			height: 100px;
			background-color: #FF0000;
		}
	</style>
</head>
<body>
	<h1>16进制颜色演示</h1>
	<div id="color-box"></div>
	<p>当前颜色为红色（#FF0000）</p>
</body>
</html>

效果

css 颜色 rgb rgba,前端,颜色模型,html,css

二、RGB颜色模型

RGB颜色模型是一种用红、绿、蓝三个颜色通道来表示颜色的方式，它是计算机颜色模型中最常用的一种。在RGB模型中，每个颜色通道的取值范围是0~255，表示颜色的深浅程度。

RGB颜色是一种加色模型，其中R（红色）、G（绿色）和B（蓝色）是三个基本颜色。当所有这三个颜色以最大值（255）混合时，会产生白色。RGB颜色模型广泛应用于计算机图形和数字图像。

DEMO

<!DOCTYPE html>
<html>
<head>
	<title>RGB颜色演示</title>
	<style type="text/css">
		#color-box {
			width: 100px;
			height: 100px;
			background-color: rgb(255, 0, 0);
		}
	</style>
</head>
<body>
	<h1>RGB颜色演示</h1>
	<div id="color-box"></div>
	<p>当前颜色为红色（rgb(255, 0, 0)）</p>
</body>
</html>

效果

css 颜色 rgb rgba,前端,颜色模型,html,css

三、RGBA颜色模型

RGBA颜色模型是在RGB颜色模型的基础上增加了透明度的属性，用四个值来表示颜色，分别是红、绿、蓝三个通道的值和透明度值，透明度的取值范围是0~1。在前端开发中，我们常常使用RGBA颜色模型来设置元素的背景色和边框颜色，以达到半透明的效果。

DEMO

<!DOCTYPE html>
<html>
<head>
	<title>RGBA颜色演示</title>
	<style type="text/css">
		#color-box {
			width: 100px;
			height: 100px;
			background-color: rgba(255, 0, 0, 0.5);
			border: 1px solid rgba(0, 0, 255, 0.5);
		}
	</style>
</head>
<body>
	<h1>RGBA颜色演示</h1>
	<div id="color-box"></div>
	<p>当前颜色为半透明的红色（rgba(255, 0, 0, 0.5)）</p>
</body>
</html>

效果

css 颜色 rgb rgba,前端,颜色模型,html,css

四、HSL颜色模型

HSL颜色模型是一种基于色相、饱和度和亮度三个属性来描述颜色的模型，其中：

1、色相（Hue）是一个0-360度的值，表示颜色在色轮上的位置，例如红色在0度，绿色在120度，蓝色在240度。

2、饱和度（Saturation）是一个0-100%的值，表示颜色的饱和度，即颜色的纯度。0%的饱和度表示灰度色，100%的饱和度表示完全饱和的颜色。

3、亮度（Lightness）是一个0-100%的值，表示颜色的亮度，即颜色的明暗程度。0%的亮度表示黑色，100%的亮度表示白色。

在前端开发中，我们通常使用HSL颜色模型来定义颜色，因为它更直观地表达了颜色的特征，更容易调整颜色的饱和度和亮度等属性。

DEMO

<!DOCTYPE html>
<html>
<head>
	<title>HSL颜色演示</title>
	<style type="text/css">
		#color-box {
			width: 100px;
			height: 100px;
			background-color: hsl(0, 100%, 50%);
		}
	</style>
</head>
<body>
	<h1>HSL颜色演示</h1>
	<div id="color-box"></div>
	<p>当前颜色为红色（hsl(0, 100%, 50%)）</p>
</body>
</html>

在上面的代码中，我们使用CSS样式表来设置一个div元素的背景色为红色。使用HSL颜色模型，我们将色相设为0度，饱和度设为100%，亮度设为50%，这样就得到了红色。

效果

css 颜色 rgb rgba,前端,颜色模型,html,css

五、HSA颜色模型

前端并不存在HSA颜色模型

HSA颜色是一种颜色模型，其中H代表色调（Hue），S代表饱和度（Saturation），A代表透明度（Opacity）。在HSA颜色模型中，色调是颜色的基本属性，饱和度描述了颜色的强度或纯度，透明度则表示颜色的深浅程度。

HSA颜色模型是一种少用的颜色模型，用于表示色相、饱和度和透明度。最常见的颜色模型是RGB、CMYK和HSB，但在某些应用场景下，HSA可能更适合。

以下是一些常见的HSA颜色模型应用场景。

1. 图片编辑器：在图片编辑器中，HSA可以用于调整图层的透明度并结合色相和饱和度来改变图像的颜色。

2. UI设计：在UI设计中，使用透明度可以让设计师调整UI元素的不透明度，或者让图形元素逐渐消失。

3. 数据可视化：在数据可视化中，使用透明度可以让用户看到图表的背景，或者让线条、柱状图等元素逐渐呈现。

HSA颜色模型可以用于任何需要结合透明度、色相和饱和度的应用场景。但需要注意的是，由于HSA是一种少用的颜色模型，因此可能需要特定的工具或软件才能使用它。

六、HSB颜色模型

HSB（Hue，Saturation，Brightness）是一种很常用的颜色模型，用于表示色相、饱和度和亮度。以下是一个简单的前端demo，演示如何使用HSB颜色模型生成颜色。

DEMO

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HSB Color Picker</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }

      .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: #444;
      }

      .color-box {
        width: 100px;
        height: 100px;
        margin: 10px;
        border-radius: 5px;
        cursor: pointer;
      }

      .color-info {
        margin: 0 auto;
        text-align: center;
        color: #fff;
        font-weight: bold;
      }

      .slider {
        width: 80%;
        margin: 20px auto;
      }

      .slider label {
        display: block;
        color: #fff;
        font-weight: bold;
      }

      .slider input[type="range"] {
        width: 100%;
        -webkit-appearance: none;
        height: 10px;
        border-radius: 5px;
        background-color: #a0a0a0;
        outline: none;
        margin-top: 5px;
      }

      .slider input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #fff;
        cursor: pointer;
      }

      .slider input[type="range"]:focus {
        outline: none;
      }

      .slider input[type="range"]:focus::-webkit-slider-thumb {
        box-shadow: 0 0 0 5px #ddd;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="color-box" id="color-box"></div>
      <div class="color-info" id="color-info"></div>
      <div class="slider">
        <label for="hue">Hue</label>
        <input type="range" min="0" max="360" value="0" id="hue" />
        <label for="saturation">Saturation</label>
        <input type="range" min="0" max="100" value="0" id="saturation" />
        <label for="brightness">Brightness</label>
        <input type="range" min="0" max="100" value="100" id="brightness" />
      </div>
    </div>
    <script>
      const colorBox = document.getElementById("color-box");
      const colorInfo = document.getElementById("color-info");
      const hueSlider = document.getElementById("hue");
      const saturationSlider = document.getElementById("saturation");
      const brightnessSlider = document.getElementById("brightness");

      function updateColor() {
        const hue = hueSlider.value;
        const saturation = saturationSlider.value;
        const brightness = brightnessSlider.value;
        const color = `hsl(${hue}, ${saturation}%, ${brightness}%)`;
        colorBox.style.backgroundColor = color;
        colorInfo.textContent = color.toUpperCase();
      }

      hueSlider.addEventListener("input", updateColor);
      saturationSlider.addEventListener("input", updateColor);
      brightnessSlider.addEventListener("input", updateColor);
    </script>
  </body>
</html>

这个样例代码创建了一个由三个滑块控件组成的 HSB 颜色选择器，用于调整背景颜色。通过监听滑块的 input 事件，我们可以从滑块的值中计算出当前的颜色，并将其应用于背景色和颜色信息框中。

效果

css 颜色 rgb rgba,前端,颜色模型,html,css

七、LAB颜色模型

LAB颜色模型是一种用于表示颜色的色彩空间，也是一种设备无关的颜色模型。与RGB颜色模型和CMYK颜色模型相比，它更符合人类视觉的感知方式，更容易进行色彩调整和识别。

在LAB颜色空间中，颜色由三个参数表示：L表示亮度，A表示绿色/红色的偏移量，B表示蓝色/黄色的偏移量。该颜色模型的特点是，亮度的变化不受色彩的影响，因此L参数是线性的；而A和B则表示相对于亮度的偏移量，因此是非线性的。

在前端开发中，LAB颜色模型主要被用于色彩调整和图片处理。由于LAB颜色空间更接近于人类视觉的感知，因此可以更准确地对颜色进行调整，使图片更加真实自然。同时，在前端开发中也可以使用JavaScript库比如color-convert和color-space，快速地将RGB颜色值转换为LAB颜色值。

DEMO

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LAB Color Picker</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }

      .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: #444;
      }

      .color-box {
        width: 100px;
        height: 100px;
        margin: 10px;
        border-radius: 5px;
        cursor: pointer;
      }

      .color-info {
        margin: 0 auto;
        text-align: center;
        color: #fff;
        font-weight: bold;
      }

      .slider {
        width: 80%;
        margin: 20px auto;
      }

      .slider label {
        display: block;
        color: #fff;
        font-weight: bold;
      }

      .slider input[type="range"] {
        width: 100%;
        -webkit-appearance: none;
        height: 10px;
        border-radius: 5px;
        background-color: #a0a0a0;
        outline: none;
        margin-top: 5px;
      }

      .slider input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #fff;
        cursor: pointer;
      }

      .slider input[type="range"]:focus {
        outline: none;
      }

      .slider input[type="range"]:focus::-webkit-slider-thumb {
        box-shadow: 0 0 0 5px #ddd;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="color-box" id="color-box"></div>
      <div class="color-info" id="color-info"></div>
      <div class="slider">
        <label for="lightness">Lightness</label>
        <input type="range" min="0" max="100" value="50" id="lightness" />
        <label for="a">A</label>
        <input type="range" min="-128" max="127" value="0" id="a" />
        <label for="b">B</label>
        <input type="range" min="-128" max="127" value="0" id="b" />
      </div>
    </div>
    <script>
      const colorBox = document.getElementById("color-box");
      const colorInfo = document.getElementById("color-info");
      const lightnessSlider = document.getElementById("lightness");
      const aSlider = document.getElementById("a");
      const bSlider = document.getElementById("b");

      function updateColor() {
        const lightness = lightnessSlider.value;
        const a = aSlider.value;
        const b = bSlider.value;
        const color = `lab(${lightness}, ${a}, ${b})`;
        colorBox.style.backgroundColor = color;
        colorInfo.textContent = color.toUpperCase();
      }

      lightnessSlider.addEventListener("input", updateColor);
      aSlider.addEventListener("input", updateColor);
      bSlider.addEventListener("input", updateColor);
    </script>
  </body>
</html>

需要注意的是，由于LAB颜色模型相对于RGB颜色模型和CMYK颜色模型更为复杂，因此可能需要一定的数学基础才能理解其原理和应用。

效果

css 颜色 rgb rgba,前端,颜色模型,html,css

八、LCH颜色模型

LCH颜色模型是一种基于LAB颜色空间的色彩模型，它将LAB颜色空间的a和b两个参数转换为色相（hue）和饱和度（chroma），使得颜色的表示更加直观。其中，色相表示颜色在色轮上的位置，饱和度表示颜色鲜艳程度。

在前端开发中，LCH颜色模型主要被用于色彩调整和颜色选择器的开发。在颜色调整方面，LCH颜色模型可以帮助开发者更直观地理解颜色参数的含义，更加精准地对颜色进行调节；而在颜色选择器方面，LCH颜色模型可以实现更加友好自然的用户体验，吸引更多用户的使用。

DEMO

<!DOCTYPE html>
<html>

<head>
  <title>LCH Color Model Demo</title>
</head>

<body>
  <h1>LCH Color Model Demo</h1>
  <p>Select a color using the LCH model:</p>
  <div>
    <label for="lightness">Lightness:</label>
    <input type="range" id="lightness" name="lightness" min="0" max="100" value="50" step="1" onchange="updateColor()">
  </div>
  <div>
    <label for="chroma">Chroma:</label>
    <input type="range" id="chroma" name="chroma" min="0" max="100" value="50" step="1" onchange="updateColor()">
  </div>
  <div>
    <label for="hue">Hue:</label>
    <input type="range" id="hue" name="hue" min="0" max="360" value="0" step="1" onchange="updateColor()">
  </div>
  <div>
    <p>Selected color: <span id="color">rgb(0, 0, 0)</span></p>
    <div style="width: 100px; height: 100px; background-color: rgb(0, 0, 0);"></div>
  </div>

  <script>
    const lightnessSlider = document.getElementById('lightness')
    const chromaSlider = document.getElementById('chroma')
    const hueSlider = document.getElementById('hue')
    const colorDiv = document.getElementById('color')

    function updateColor() {
      const lightness = lightnessSlider.value / 100
      const chroma = chromaSlider.value / 100
      const hue = hueSlider.value
      const rgb = lchToRgb(lightness, chroma, hue)
      const colorString = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`
      colorDiv.innerHTML = colorString
      colorDiv.style.backgroundColor = colorString
    }

    // LCH to RGB conversion function
    function lchToRgb(l, c, h) {
      const L = l // L is 0-1
      const C = c * 0.01 // C is 0-1
      const H = h / 360 // H is 0-1
      const X = C * (1 - Math.abs((H * 6) % 2 - 1))
      const m = L - C / 2
      let r, g, b
      if (H < 1 / 6) {
        [r, g, b] = [C, X, 0]
      } else if (H < 1 / 3) {
        [r, g, b] = [X, C, 0]
      } else if (H < 1 / 2) {
        [r, g, b] = [0, C, X]
      } else if (H < 2 / 3) {
        [r, g, b] = [0, X, C]
      } else if (H < 5 / 6) {
        [r, g, b] = [X, 0, C]
      } else {
        [r, g, b] = [C, 0, X]
      }
      return {
        r: Math.round((r + m) * 255),
        g: Math.round((g + m) * 255),
        b: Math.round((b + m) * 255)
      }
    }
  </script>
</body>

</html>

这个 DEMO 允许用户使用三个滑块选择颜色，分别控制亮度、饱和度和色相。在滑块值发生变化时，页面会计算并显示所选颜色的 RGB 值，并将背景颜色设置为所选颜色。实现这个功能的关键在于 lchToRgb 函数，它将 LCH 值转换为 RGB 值。

效果

css 颜色 rgb rgba,前端,颜色模型,html,css

九、HSV颜色模型

HSV颜色模型是一种将RGB颜色空间参数转换为色相（hue）、饱和度（saturation）和亮度（value）三个参数的色彩模型。其中，色相表示颜色在色轮上的位置，饱和度表示颜色的纯度，亮度表示颜色的明暗程度。

在前端开发中，HSV颜色模型主要被用于色彩调整和颜色选择器的开发。在颜色调整方面，HSV颜色模型可以帮助开发者更直观地理解颜色参数的含义，更加精准地对颜色进行调节；而在颜色选择器方面，HSV颜色模型可以实现更加友好自然的用户体验，吸引更多用户的使用。

DEMO

<!DOCTYPE html>
<html>

<head>
  <title>HSV Color Model Demo</title>
</head>

<body>
  <h1>HSV Color Model Demo</h1>
  <p>Select a color using the HSV model:</p>
  <div>
    <label for="hue">Hue:</label>
    <input type="range" id="hue" name="hue" min="0" max="360" value="0" step="1" onchange="updateColor()">
  </div>
  <div>
    <label for="saturation">Saturation:</label>
    <input type="range" id="saturation" name="saturation" min="0" max="100" value="0" step="1" onchange="updateColor()">
  </div>
  <div>
    <label for="value">Value:</label>
    <input type="range" id="value" name="value" min="0" max="100" value="0" step="1" onchange="updateColor()">
  </div>
  <div>
    <p>Selected color: <span id="color">rgb(0, 0, 0)</span></p>
    <div style="width: 100px; height: 100px; background-color: rgb(0, 0, 0);"></div>
  </div>

  <script>
    const hueSlider = document.getElementById('hue')
    const saturationSlider = document.getElementById('saturation')
    const valueSlider = document.getElementById('value')
    const colorDiv = document.getElementById('color')

    function updateColor() {
      const hue = hueSlider.value / 360
      const saturation = saturationSlider.value / 100
      const value = valueSlider.value / 100
      const rgb = hsvToRgb(hue, saturation, value)
      const colorString = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`
      colorDiv.innerHTML = colorString
      colorDiv.style.backgroundColor = colorString
    }

    // HSV to RGB conversion function
    function hsvToRgb(h, s, v) {
      let r, g, b, i, f, p, q, t
      if (s === 0) {
        r = g = b = v // achromatic
      } else {
        h *= 6 // sector 0 to 5
        i = Math.floor(h)
        f = h - i // factorial part of h
        p = v * (1 - s)
        q = v * (1 - s * f)
        t = v * (1 - s * (1 - f))
        switch (i) {
          case 0:
            r = v
            g = t
            b = p
            break
          case 1:
            r = q
            g = v
            b = p
            break
          case 2:
            r = p
            g = v
            b = t
            break
          case 3:
            r = p
            g = q
            b = v
            break
          case 4:
            r = t
            g = p
            b = v
            break
          default: // case 5:
            r = v
            g = p
            b = q
            break
        }
      }
      return {
        r: Math.round(r * 255),
        g: Math.round(g * 255),
        b: Math.round(b * 255)
      }
    }
  </script>
</body>

</html>

这个 DEMO 允许用户使用三个滑块选择颜色，分别控制色相、饱和度和亮度。在滑块值发生变化时，页面会计算并显示所选颜色的 RGB 值，并将背景颜色设置为所选颜色。实现这个功能的关键在于 hsvToRgb 函数，它将 HSV 值转换为 RGB 值。

效果

css 颜色 rgb rgba,前端,颜色模型,html,css

十、YUV颜色模型

YUV颜色模型是一种将RGB颜色空间参数转换为亮度（luma）和色度（chroma）两个参数的色彩模型。其中，亮度luma表示颜色的明暗程度，而色度chroma表示颜色的色彩饱和度。

在前端开发中，YUV颜色模型主要被应用于视频编码或图像处理领域，例如常见的视频压缩算法H.264和HEVC就是基于YUV颜色空间编码的。此外，YUV颜色模型也可以用于实现灰度图像的效果，或者实现色彩调整功能。

DEMO

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>YUV Color Picker</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }

      .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: #444;
      }

      .color-box {
        width: 100px;
        height: 100px;
        margin: 10px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.2s;
      }

      .color-box:hover {
        transform: scale(1.1);
      }

      .color-info {
        text-align: center;
        color: #fff;
        font-weight: bold;
      }

      .slider {
        width: 80%;
        margin: 20px auto;
      }

      .slider label {
        display: block;
        color: #fff;
        font-weight: bold;
      }

      .slider input[type="range"] {
        width: 100%;
        -webkit-appearance: none;
        height: 10px;
        border-radius: 5px;
        background-color: #a0a0a0;
        outline: none;
        margin-top: 5px;
      }

      .slider input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #fff;
        cursor: pointer;
      }

      .slider input[type="range"]:focus {
        outline: none;
      }

      .slider input[type="range"]:focus::-webkit-slider-thumb {
        box-shadow: 0 0 0 5px #ddd;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="color-box" id="color-box"></div>
      <div class="color-info" id="color-info"></div>
      <div class="slider">
        <label for="y">Y</label>
        <input type="range" min="0" max="255" value="128" id="y">
        <label for="u">U</label>
        <input type="range" min="-128" max="127" value="0" id="u">
        <label for="v">V</label>
        <input type="range" min="-128" max="127" value="0" id="v">
      </div>
    </div>
    <script>
      const colorBox = document.getElementById("color-box");
      const colorInfo = document.getElementById("color-info");
      const ySlider = document.getElementById("y");
      const uSlider = document.getElementById("u");
      const vSlider = document.getElementById("v");

      function updateColor() {
        const y = ySlider.value;
        const u = uSlider.value;
        const v = vSlider.value;
        const r = Math.round(y + 1.13983 * v);
        const g = Math.round(y - 0.39465 * u - 0.58060 * v);
        const b = Math.round(y + 2.03211 * u);
        const color = `rgb(${r}, ${g}, ${b})`;
        colorBox.style.backgroundColor = color;
        colorInfo.textContent = color.toUpperCase();
      }

      ySlider.addEventListener("input", updateColor);
      uSlider.addEventListener("input", updateColor);
      vSlider.addEventListener("input", updateColor);
    </script>
  </body>
</html>

在这个 Demo 中，我们使用了 YUV 转 RGB 的公式来计算颜色值，并使用 RGB 值来设置方块的背景颜色。请注意，该转换的结果可能会超出 RGB 可接受的范围，需要使用 Math.round() 函数来进行舍入处理。

同时，该 Demo 含有一些基本的 CSS 样式，例如设置 .color-box 的颜色、宽度、高度、边距和边框半径属性，以及添加了一个 .color-box:hover 的伪类选择器，这可以使方块在鼠标悬停时有一个小的缩放动画。

效果

css 颜色 rgb rgba,前端,颜色模型,html,css

十一、XYZ颜色模型

XYZ颜色模型是一种基于人眼感知的色彩模型，同时也是一种标准化的色彩空间，常用于计算机图形学、颜色管理和色彩研究等领域。

DEMO

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>XYZ Color Picker</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }

      .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: #444;
      }

      .color-box {
        width: 100px;
        height: 100px;
        margin: 10px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.2s;
      }

      .color-box:hover {
        transform: scale(1.1);
      }

      .color-info {
        text-align: center;
        color: #fff;
        font-weight: bold;
      }

      .slider {
        width: 80%;
        margin: 20px auto;
      }

      .slider label {
        display: block;
        color: #fff;
        font-weight: bold;
      }

      .slider input[type="range"] {
        width: 100%;
        -webkit-appearance: none;
        height: 10px;
        border-radius: 5px;
        background-color: #a0a0a0;
        outline: none;
        margin-top: 5px;
      }

      .slider input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #fff;
        cursor: pointer;
      }

      .slider input[type="range"]:focus {
        outline: none;
      }

      .slider input[type="range"]:focus::-webkit-slider-thumb {
        box-shadow: 0 0 0 5px #ddd;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="color-box" id="color-box"></div>
      <div class="color-info" id="color-info"></div>
      <div class="slider">
        <label for="x">X</label>
        <input type="range" min="0" max="1" step="0.01" value="0.5" id="x">
        <label for="y">Y</label>
        <input type="range" min="0" max="1" step="0.01" value="0.5" id="y">
        <label for="z">Z</label>
        <input type="range" min="0" max="1" step="0.01" value="0.5" id="z">
      </div>
    </div>
    <script>
      const colorBox = document.getElementById("color-box");
      const colorInfo = document.getElementById("color-info");
      const xSlider = document.getElementById("x");
      const ySlider = document.getElementById("y");
      const zSlider = document.getElementById("z");

      function updateColor() {
        const x = xSlider.value;
        const y = ySlider.value;
        const z = zSlider.value;
        const r = Math.round(255 * (3.2406 * x - 1.5372 * y - 0.4986 * z));
        const g = Math.round(255 * (-0.9689 * x + 1.8758 * y + 0.0415 * z));
        const b = Math.round(255 * (0.0557 * x - 0.2040 * y + 1.0570 * z));
        const color = `rgb(${r}, ${g}, ${b})`;
        colorBox.style.backgroundColor = color;
        colorInfo.textContent = color.toUpperCase();
      }

      xSlider.addEventListener("input", updateColor);
      ySlider.addEventListener("input", updateColor);
      zSlider.addEventListener("input", updateColor);
    </script>
  </body>
</html>

在这个 Demo 中，我们使用了 XYZ 转 RGB 的公式来计算颜色值，并使用 RGB 值来设置方块的背景颜色。请注意，该转换的结果可能会超出 RGB 可接受的范围，需要使用 Math.round() 函数来进行舍入处理。

效果

css 颜色 rgb rgba,前端,颜色模型,html,css

十二、YCbCr颜色模型

YCbCr颜色模型是一种基于RGB颜色模型转换而来的一种颜色空间，主要用于数字视频、图像压缩等领域。在前端开发中，可以使用现有的JavaScript库如color-convert等来进行YCbCr颜色空间的计算和应用。

DEMO

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>YCbCr Color Picker</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }

      .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: #444;
      }

      .color-box {
        width: 100px;
        height: 100px;
        margin: 10px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.2s;
      }

      .color-box:hover {
        transform: scale(1.1);
      }

      .color-info {
        text-align: center;
        color: #fff;
        font-weight: bold;
      }

      .slider {
        width: 80%;
        margin: 20px auto;
      }

      .slider label {
        display: block;
        color: #fff;
        font-weight: bold;
      }

      .slider input[type="range"] {
        width: 100%;
        -webkit-appearance: none;
        height: 10px;
        border-radius: 5px;
        background-color: #a0a0a0;
        outline: none;
        margin-top: 5px;
      }

      .slider input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #fff;
        cursor: pointer;
      }

      .slider input[type="range"]:focus {
        outline: none;
      }

      .slider input[type="range"]:focus::-webkit-slider-thumb {
        box-shadow: 0 0 0 5px #ddd;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="color-box" id="color-box"></div>
      <div class="color-info" id="color-info"></div>
      <div class="slider">
        <label for="y">Y</label>
        <input type="range" min="16" max="235" step="1" value="128" id="y">
        <label for="cb">Cb</label>
        <input type="range" min="16" max="240" step="1" value="128" id="cb">
        <label for="cr">Cr</label>
        <input type="range" min="16" max="240" step="1" value="128" id="cr">
      </div>
    </div>
    <script>
      const colorBox = document.getElementById("color-box");
      const colorInfo = document.getElementById("color-info");
      const ySlider = document.getElementById("y");
      const cbSlider = document.getElementById("cb");
      const crSlider = document.getElementById("cr");

      function updateColor() {
        const y = ySlider.value - 16;
        const cb = cbSlider.value - 128;
        const cr = crSlider.value - 128;
        const r = Math.round(y + 1.402 * cr);
        const g = Math.round(y - 0.344 * cb - 0.714 * cr);
        const b = Math.round(y + 1.772 * cb);
        const color = `rgb(${r}, ${g}, ${b})`;
        colorBox.style.backgroundColor = color;
        colorInfo.textContent = color.toUpperCase();
      }

      ySlider.addEventListener("input", updateColor);
      cbSlider.addEventListener("input", updateColor);
      crSlider.addEventListener("input", updateColor);
    </script>
  </body>
</html>

在这个 Demo 中，我们使用了 YCbCr 转 RGB 的公式来计算颜色值，并使用 RGB 值来设置方块的背景颜色。请注意，与 XYZ 和 HSV 模型不同，YCbCr 模型的 Y、Cb、Cr 值都需要进行偏移和缩放。具体来说，Y 的范围是 16 到 235，Cb 和 Cr 的范围是 16 到 240。因此，在函数 updateColor() 中，我们需要对三个滑块的值进行处理，以便正确计算 RGB 值。

效果

css 颜色 rgb rgba,前端,颜色模型,html,css

十三、CMYK颜色模型

CMYK颜色是一种基于印刷油墨颜色的颜色模型，其中C表示青色（Cyan），M表示洋红色（Magenta），Y表示黄色（Yellow），K表示黑色（Black）。这种颜色模型主要用于印刷和打印领域，因为这四种颜色可以组合出几乎所有的颜色，而且它们之间有很好的互补性，可以最大限度地使用印刷油墨而不会浪费。

CMYK颜色模型是一种减色模型，常用于印刷行业中。在前端开发中，我们可以使用现有的JavaScript库如color-convert等来进行CMYK颜色空间的计算和应用。

DEMO

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>CMYK Color Picker</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }

      .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: #444;
      }

      .color-box {
        width: 100px;
        height: 100px;
        margin: 10px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.2s;
      }

      .color-box:hover {
        transform: scale(1.1);
      }

      .color-info {
        text-align: center;
        color: #fff;
        font-weight: bold;
      }

      .slider {
        width: 80%;
        margin: 20px auto;
      }

      .slider label {
        display: block;
        color: #fff;
        font-weight: bold;
      }

      .slider input[type="range"] {
        width: 100%;
        -webkit-appearance: none;
        height: 10px;
        border-radius: 5px;
        background-color: #a0a0a0;
        outline: none;
        margin-top: 5px;
      }

      .slider input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #fff;
        cursor: pointer;
      }

      .slider input[type="range"]:focus {
        outline: none;
      }

      .slider input[type="range"]:focus::-webkit-slider-thumb {
        box-shadow: 0 0 0 5px #ddd;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="color-box" id="color-box"></div>
      <div class="color-info" id="color-info"></div>
      <div class="slider">
        <label for="c">C</label>
        <input type="range" min="0" max="100" step="1" value="0" id="c">
        <label for="m">M</label>
        <input type="range" min="0" max="100" step="1" value="0" id="m">
        <label for="y">Y</label>
        <input type="range" min="0" max="100" step="1" value="0" id="y">
        <label for="k">K</label>
        <input type="range" min="0" max="100" step="1" value="0" id="k">
      </div>
    </div>
    <script>
      const colorBox = document.getElementById("color-box");
      const colorInfo = document.getElementById("color-info");
      const cSlider = document.getElementById("c");
      const mSlider = document.getElementById("m");
      const ySlider = document.getElementById("y");
      const kSlider = document.getElementById("k");

      function updateColor() {
        const c = cSlider.value / 100;
        const m = mSlider.value / 100;
        const y = ySlider.value / 100;
        const k = kSlider.value / 100;
        const r = Math.round(255 * (1 - c) * (1 - k));
        const g = Math.round(255 * (1 - m) * (1 - k));
        const b = Math.round(255 * (1 - y) * (1 - k));
        const color = `rgb(${r}, ${g}, ${b})`;
        colorBox.style.backgroundColor = color;
        colorInfo.textContent = color.toUpperCase();
      }

      cSlider.addEventListener("input", updateColor);
      mSlider.addEventListener("input", updateColor);
      ySlider.addEventListener("input", updateColor);
      kSlider.addEventListener("input", updateColor);
    </script>
  </body>
</html>

在这个 Demo 中，我们使用了 CMYK 转 RGB 的公式来计算颜色值，并使用 RGB 值来设置方块的背景颜色。请注意，与其他模型不同，CMYK 模型的 C、M、Y、K 值都是 0 到 100 的百分比值。因此，在函数 updateColor() 中，我们需要将四个滑块的值除以 100，以便正确计算 RGB 值。

效果

css 颜色 rgb rgba,前端,颜色模型,html,css

十四、Gray颜色模型

灰度颜色模型是一种只有亮度信息的颜色模型，用于表示黑白图像或将彩色图像转换为黑白图像。在前端开发中，我们可以使用HTML5 Canvas绘制灰度图像。

DEMO

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Gray Color Picker</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }

      .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: #444;
      }

      .color-box {
        width: 100px;
        height: 100px;
        margin: 10px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.2s;
      }

      .color-box:hover {
        transform: scale(1.1);
      }

      .color-info {
        text-align: center;
        color: #fff;
        font-weight: bold;
      }

      .slider {
        width: 80%;
        margin: 20px auto;
      }

      .slider label {
        display: block;
        color: #fff;
        font-weight: bold;
      }

      .slider input[type="range"] {
        width: 100%;
        -webkit-appearance: none;
        height: 10px;
        border-radius: 5px;
        background-color: #a0a0a0;
        outline: none;
        margin-top: 5px;
      }

      .slider input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #fff;
        cursor: pointer;
      }

      .slider input[type="range"]:focus {
        outline: none;
      }

      .slider input[type="range"]:focus::-webkit-slider-thumb {
        box-shadow: 0 0 0 5px #ddd;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="color-box" id="color-box"></div>
      <div class="color-info" id="color-info"></div>
      <div class="slider">
        <label for="gray">Gray</label>
        <input type="range" min="0" max="255" step="1" value="0" id="gray">
      </div>
    </div>
    <script>
      const colorBox = document.getElementById("color-box");
      const colorInfo = document.getElementById("color-info");
      const graySlider = document.getElementById("gray");

      function updateColor() {
        const grayValue = graySlider.value;
        const color = `rgb(${grayValue}, ${grayValue}, ${grayValue})`;
        colorBox.style.backgroundColor = color;
        colorInfo.textContent = color.toUpperCase();
      }

      graySlider.addEventListener("input", updateColor);
    </script>
  </body>
</html>

我们使用了 Gray 颜色模型来计算颜色值，并将颜色值设置为 RGB 三个通道都相同的值，从而创建出一种灰色。请注意，Gray 模型的值只有一个（0 到 255），因此我们只需要一个滑块来调整颜色值。

效果

css 颜色 rgb rgba,前端,颜色模型,html,css

十五、欢迎交流指正

十六、参考链接

WEB安全色-BeJSON.com

16进制转CMYK颜色计算工具-Bejson.com

CMYK转16进制颜色计算工具-Bejson.com

16进制转HSV颜色计算工具-Bejson.com

RGB转16进制颜色计算工具-Bejson.com

相反颜色取色计算工具-Bejson.com

https://www.jb51.net/web/715375.html文章来源地址https://www.toymoban.com/news/detail-831314.html

到了这里，关于颜色模型：16进制颜色、RGB、RGBA、HSL、HSA、HSB、LAB、LCH、HSV、YUV、XYZ、YCbCr、CMYK、Gray颜色 / 前端能用吗 / DEMO的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！