Колір в CSS

Сьогодні ми поговоримо про всі доступні на даний час методи для визначення кольору в CSS. По суті, є шість способів задати колір: HEX, RGB, RGBA, HSL, HSLA та іменовані значення.

HEX

See the Pen HEX Color by Taras Romaniv (@trsrm) on CodePen.

Це спосіб оголошення кольору за допомогою шістнадцяткових значень шляхом задання інтенсивності червоного, зеленого і синього (RGB) кольорів, де кожен колір може мати значення від 00 до ff. У ньому:

• інтенсивність червоного визначається першими двома символами;
• інтенсивність зеленого визначається двома середніми символами;
• інтенсивність синього визначається двома останніми символами;

У цій системі два ідентичні послідовних символи можна скоротити до одного. Тому, в деяких випадках, колір можна задати за допомогою лише тhьох знаків:

• #ddcc11 еквівалентне до #dc1
• #000000 еквівалентне до #000

RGB

See the Pen RGB Color by Taras Romaniv (@trsrm) on CodePen.

Також популярний метод, він дозволяє задати колір за допомогою десяткових значень. Він має наступний синтаксис:

rgb(червоний, зелений, синій)

де інтенсивність кожного кольору задається значенням від 0 до 255.

RGBA

See the Pen RGBA Color by Taras Romaniv (@trsrm) on CodePen.

RGBA це просто розширення RGB, з додатковим параметром, який визначає рівень прозорості кольору. Таким чином, ми можемо використовувати колірні значення RGBA, щоб зробити HTML елементи напівпрозорими. Він має такий формат:

rgba(червоний, зелений, синій, прозорість)

де рівень прозорості може мати значення від 0 до 1.

HSL

See the Pen HSL Color by Taras Romaniv (@trsrm) on CodePen.

HSL є альтернативою до RGB-запису. Його ввели в CSS з тією метою, щоб бути більш інтуїтивним ніж RGB. Базовий синтаксис:

hsl(відтінок, насиченість, яскравість)

Відтінок вказує на один з кольорів, які ми можемо бачити. Діапазон кольорів, видимих ​​людському оку може бути зображено у вигляді кола. Таким чином, відтінок може мати значення між 0 і 360.

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

Яскравість впливає на те, наскільки світлим чи темним буде відтінок. Чим вище значення, тим світлішим буде колір, і навпаки. Яскравість може мати значення між 0% і 100%.

HSLA

See the Pen HSLA Color by Taras Romaniv (@trsrm) on CodePen.

HSLA це те ж саме, що й HSL, але з додатковим параметром, який дозволяє вказати рівень прозорості кольору. Синтаксис такий:

hsla(відтінок, насиченість, яскравість, прозорість)

де рівень прозорості може мати значення від 0 до 1.

Іменовані значення

See the Pen Named Color by Taras Romaniv (@trsrm) on CodePen.

Цей метод дозволяє визначати колір за допомогою одного з іменованих значень. Всього є 140 таких значень. Тут можна переглянути цей список:

https://www.w3schools.com/cssref/css_colornames.asp

Також, варто звернути увагу на деякі ключові слова, які використовуються при роботі з кольором.

Ключове слово transparent це найпростіший спосіб задати прозорий колір:

div {
    background-color: transparent;
}

Ключове слово currentColor вказує на колір, який був оголошений для властивості color в CSS:

div {
    color: #708090;
    border: 1px solid currentColor;
    box-shadow: 2px 2px 15px currentColor;    
}