color() в CSS — колір у просторі srgb або display-p3

HTML

<div class="example">
  <div class="description">
    <h2>Приклад 1</h2>
    <p>Наведенням курсору на елемент .box, його фоновий колір змінюється з червоного на синій, використовуючи функцію color().</p>
  </div>
  <div class="result">
    <div class="container">
      <div class="box"></div>
    </div>
  </div>
</div>

CSS

.example {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50px;
}

.description {
  background-color: lightgray;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.result {
  display: flex;
  justify-content: center;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.box {
  width: 200px;
  height: 200px;
  background-color: color(srgb 255 0 0);
  transition: background-color 0.3s ease;
}

.box:hover {
  background-color: color(srgb 0 0 255);
}

HTML

<div class="example">
  <div class="description">
    <h2>Приклад 2: використання функції color()</h2>
    <p>Два елементи .box мають різний початковий фоновий колір (червоний та синій) за допомогою функції color(). Це демонструє, як можна використовувати функцію color() для встановлення кольорів в елементах і відрізняти їх між собою.</p>
  </div>
  <div class="result">
    <div class="container">
      <div class="box box1"></div>
      <div class="box box2"></div>
    </div>
  </div>
</div>

CSS

.example {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50px;
}

.description {
  background-color: lightgray;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.result {
  display: flex;
  justify-content: center;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.box {
  width: 100px;
  height: 100px;
  margin: 10px;
}

.box1 {
  background-color: color(srgb 255 0 0);
}

.box2 {
  background-color: color(srgb 0 0 255);
}

HTML

<p class="head">Канали від 0 до 1: усе, що більше, затискається до межі:</p>
<div class="row">
    <span class="sw c1">color(srgb 1 0 0)</span>
    <span class="sw c2">color(srgb 255 0 0)</span>
    <span class="sw c3">color(srgb 255 128 0) — жовтий!</span>
    <span class="sw c4">color(srgb 1 0.5 0)</span>
</div>

<p class="head">Чистий зелений у чотирьох просторах — на sRGB-екрані різниці немає:</p>
<div class="row tight">
    <span class="sw g1">srgb</span><span class="sw g2">display-p3</span>
    <span class="sw g3">a98-rgb</span><span class="sw g4">rec2020</span>
</div>

<p class="head">А тут перетворення видно: ті самі числа 0.3 0.7 0.4 у двох просторах —
    у P3 зелений помітно чистіший:</p>
<div class="row tight">
    <span class="sw p1">display-p3</span><span class="sw p2">srgb</span>
</div>

<p class="head">srgb проти srgb-linear за однакових чисел — гамма-крива:</p>
<div class="row">
    <span class="sw l1">srgb 0.5 0.5 0.5</span>
    <span class="sw l2">srgb-linear 0.5 0.5 0.5</span>
    <span class="sw l3">srgb 0.2 0.2 0.2</span>
    <span class="sw l4">srgb-linear 0.2 0.2 0.2</span>
</div>

<p class="head">Коми ламають оголошення — плитка лишилась сірою заглушкою:</p>
<div class="row">
    <span class="sw bad">color(srgb 1, 0, 0)</span>
</div>

CSS

.head {
    margin: 16px 0 6px;
    color: #5a6472;
    font-size: .9em;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.row.tight {
    gap: 0;
}

.sw {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 150px;
    height: 62px;
    padding-bottom: 4px;
    outline: 1px solid #b9c6d8;
    color: #fff;
    font: 600 11px/1 ui-monospace, monospace;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
}

.c1 { background: color(srgb 1 0 0); }
.c2 { background: color(srgb 255 0 0); }
.c3 { background: color(srgb 255 128 0); color: #333; text-shadow: none; }
.c4 { background: color(srgb 1 0.5 0); }

.g1 { background: color(srgb 0 1 0); }
.g2 { background: color(display-p3 0 1 0); }
.g3 { background: color(a98-rgb 0 1 0); }
.g4 { background: color(rec2020 0 1 0); }

.p1 { background: color(display-p3 0.3 0.7 0.4); }
.p2 { background: color(srgb 0.3 0.7 0.4); }

.l1 { background: color(srgb 0.5 0.5 0.5); }
.l2 { background: color(srgb-linear 0.5 0.5 0.5); }
.l3 { background: color(srgb 0.2 0.2 0.2); }
.l4 { background: color(srgb-linear 0.2 0.2 0.2); }

.bad {
    background: #c9ced6;
    color: #333;
    text-shadow: none;
    background-color: color(srgb 1, 0, 0);
}