Колір у CSS — усі способи записати значення

Колір в стилях можна задавати різними способами: за шістнадцятиричним значенням, за назвою, в форматі RGB, RGBA, HSL, HSLA.

За шістнадцятиричним значенням

Для задання кольорів використовуються числа в шістнадцятковому коді. Шістнадцяткова система, на відміну від десяткової системи, базується на числі 16. Цифри будуть наступні: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. Цифри від 10 до 15 замінені латинськими буквами. Числа більше 15 в шістнадцятковій системі утворюються об'єднанням двох чисел в одне. Наприклад, числу 255 в десятковій системі відповідає число FF в шістнадцятковій системі. Щоб не виникало плутанини у визначенні системи числення, перед шістнадцятковим числом ставлять символ #, наприклад #666999. Кожен з трьох кольорів - червоний, зелений і синій - може набувати значень від 00 до FF. Таким чином, позначення кольору розбивається на три складові #rrggbb, де перші два символи відзначають червону компоненту кольору, два середніх - зелену, а два останніх - синю. Допускається використовувати скорочену форму виду #rgb, де кожен символ слід подвоювати. Так, запис color: #FE0 слід розцінювати як color: #FFEE00.

За назвою

Браузери підтримують деякі кольори по їх назві.

Назви кольорів.

За допомогою RGB

Можна визначити колір, використовуючи значення червоної, зеленої та синьої компоненти в десятковому численні. Кожна з трьох компонент кольору приймає значення від 0 до 255. Також допустимо ставити колір в процентному відношенні, при цьому 100% буде відповідати числу 255. Спочатку вказується ключове слово rgb, а потім в дужках, через кому вказуються компоненти кольору, наприклад rgb(255 , 128, 128) або rgb(100%, 50%, 50%).

RGBA

Формат RGBA схожий по синтаксису на RGB, але включає в себе альфа-канал, що задає прозорість елемента. Значення 0 відповідає повній прозорості, 1 - непрозорості, а проміжне значення на зразок 0.5 - напівпрозорості.

RGBA доданий в CSS3, тому валідацію CSS-коду треба проводити саме за цією версією. Слід зазначити, що стандарт CSS3 ще знаходиться в розробці і деякі можливості в ньому можуть помінятися. Наприклад, колір в форматі RGB доданий до властивості background-color проходить валідацію, а доданий до властивості background вже немає. При цьому браузери цілком коректно розуміють колір для тої чи іншої властивості.

HSL

Назва формату HSL утворено від сполучення перших букв Hue (відтінок), Saturate (насиченість) і Lightness (світлість). Відтінок це значення кольору на колірному колі і задається в градусах. 0° відповідає червоному кольору, 120 ° - зеленому, а 240 ° - синьому. Значення відтінку може змінюватися від 0 до 359.

Насиченістю називається інтенсивність кольору, вимірюється у відсотках від 0% до 100%. Значення 0% означає відсутність кольору і відтінок сірого, 100% максимальне значення насиченості.

Світлість задає, наскільки колір яскравий і вказується у відсотках від 0% до 100%. Малі значення роблять колір темніше, а високі світліше, крайні значення 0% і 100% відповідають чорному і білому кольору.

HSLA

Формат HSLA схожий по синтаксису на HSL, але включає в себе альфа-канал, що задає прозорість елемента. Значення 0 відповідає повній прозорості, 1 - непрозорості, а проміжне значення на зразок 0.5 - напівпрозорості.

правити

Загальний опис

правити

Порада

Значення кольору в форматах RGBA, HSL і HSLA додані в CSS3, тому при використанні цих форматів перевіряйте код на валідність з урахуванням версії.

автор: Svitlana правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
#RRGGBB | #RGB	1.0	1.0	1.0	3.5	12.0	3.0
За назвою	1.0	1.0	1.0	3.5	12.0	4.0
rgb()	1.0	1.0	1.0	3.5	12.0	4.0
hsl()	1.0	1.0	3.1	9.5	12.0	9.0
rgba()	1.0	3.0	3.1	10.0	12.0	9.0
hsla()	1.0	3.0	3.1	10.0	12.0	9.0

Підтримка: мобільні переглядачі

Переглядач
#RRGGBB | #RGB	1.0	1.0	1.0
За назвою	1.0	1.0	1.0
rgb()	1.0	1.0	1.0
hsl()	1.0	1.0	4.0
rgba()	4.0	4.0	4.0
hsla()	4.0	4.0	4.0

Приклади

+ запропонувати свій приклад у пісочниці

<p class="name">gold — ключове слово</p>
<p class="hex">#F12668 — шістнадцятковий код</p>
<p class="rgb">rgb(72, 102, 157) — червоний, зелений, синій</p>
<p class="rgba">rgba(72, 102, 157, 0.45) — те саме, напівпрозоре</p>
<p class="hsl">hsl(0, 100%, 30%) — тон, насиченість, світлість</p>
<p class="hsla">hsla(0, 60%, 77%, 0.7) — і з прозорістю</p>

.name { color: gold; }
.hex  { color: #F12668; }
.rgb  { color: rgb(72, 102, 157); }
.rgba { color: rgba(72, 102, 157, 0.45); }
.hsl  { color: hsl(0, 100%, 30%); }
.hsla { color: hsla(0, 60%, 77%, 0.7); }

<p class="kw">tomato — ключове слово</p>
<p class="hex">#0172ad — шістнадцятковий запис</p>
<p class="hex8">#0172adcc — той самий колір із восьмою парою: прозорість</p>
<p class="rgb">rgb(72 102 157 / 45%) — без ком, альфа через скісну риску</p>
<p class="hsl">hsl(210 60% 40%) — тон, насиченість, світлість</p>
<p class="hsl2">hsl(210 60% 78%) — змінили ОДНЕ число: світлість</p>
<p class="oklch">oklch(60% 0.15 250) — однакова світлість = однакова сприйнята яскравість</p>
<p class="mix">color-mix(in oklab, #0172ad 60%, white) — мішанка двох кольорів</p>
<p class="transp">transparent — прозорий ЧОРНИЙ, а не «без кольору»</p>

body {
    font-family: system-ui, sans-serif;
    font-size: 15px;
    /* смужки під сподом — на них видно прозорість */
    background: repeating-linear-gradient(45deg,
        #ffffff 0 12px, #e6e6ee 12px 24px);
    padding: 12px;
}

p {
    margin: 0 0 8px;
    padding: 10px 14px;
    border-radius: 6px;
    color: #111;
}

.kw    { background: tomato; }
.hex   { background: #0172ad; color: #fff; }
.hex8  { background: #0172adcc; }
.rgb   { background: rgb(72 102 157 / 45%); }
.hsl   { background: hsl(210 60% 40%); color: #fff; }
.hsl2  { background: hsl(210 60% 78%); }
.oklch { background: oklch(60% 0.15 250); color: #fff; }
.mix   { background: color-mix(in oklab, #0172ad 60%, white); }
.transp { background: transparent; }

<p>Ми можемо встановлювати колір для фону, використовуючи різні значення:</p>

<div class="demo">
   <div class="name"><p>gold</p></div> 
    <div class="hex"><p>#F12668</p></div> 
    <div class="rgb"><p>rgb(72, 102, 157)</p></div> 
    <div class="rgba"><p>rgba(72, 102, 157, 0.45)</p></div> 
    <div class="hsl"><p>hsl(0, 100%, 30%)</p></div> 
    <div class="hsla"><p>hsla(0, 60%, 77%, 0.7)</p></div> 
</div>

body {
    font-family: sans-serif;
    text-align: center;
    line-height: 1.45; 
    font-size: 18px;
    padding: 16px 16px 0 16px; 
}

.demo {
    font-family: monospace;
    font-weight: 700;
    text-align: center;
    font-size: 18px;
}

.name { background: gold; }
.hex { background: #F12668; }
.rgb { background: rgb(72, 102, 157); }
.rgba { background: rgba(72, 102, 157, 0.45); }
.hsl { background: hsl(0, 100%, 30%); }
.hsla { background: hsla(0, 60%, 77%, 0.7); }