color CSS значення

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

`color`

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

Для задання кольорів використовуються числа в шістнадцятковому коді. Шістнадцяткова система, на відміну від десяткової системи, базується на числі 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 HSL Опис
white #ffffff або #fff rgb(255,255,255) hsl(0,0%,100%) білий
silver #c0c0c0 rgb(192,192,192) hsl(0,0%,75%) сірий
gray #808080 rgb(128,128,128) hsl(0,0%,50%) темно-сірий
black #000000 або #000 hsl(0,0%,0%) hsl(0,0%,50%) чорний
maroon #800000 rgb(128,0,0) hsl(0,100%,25%) темно-червоний
red #ff0000 або #f00 rgb(255,0,0) hsl(0,100%,50%) червоний
orange #ffa500 rgb(255,165,0) hsl(38.8,100%,50%) помаранчевий
yellow #ffff00 або #ff0 rgb(255,255,0) hsl(60,100%,50%) жовтий
olive #808000 rgb(128,128,0) hsl(60,100%,25%) оливковий
lime #00ff00 або #0f0 rgb(0,255,0) hsl(120,100%,50%) світло-зелений
green #008000 rgb(0,128,0) hsl(120,100%,25%) зелений
aqua #00ffff або #0ff rgb(0,255,255) hsl(180,100%,50%) голубий
blue #0000ff або #00f rgb(0,0,255) hsl(240,100%,50%) синій
navy #000080 rgb(0,0,128) hsl(240,100%,25%) темно-синій
teal #008080 rgb(0,128,128) hsl(180,100%,25%) синьо-зелений
fuchsia #ff00ff або #f0f rgb(255,0,255) hsl(300,100%,50%) рожевий
purple #800080 rgb(128,0,128) hsl(300,100%,25%) фіолетовий

За допомогою 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, тому при використанні цих форматів перевіряйте код на валідність з урахуванням версії.

Переглядачі

Переглядач
#RRGGBB | #RGB

3.0

12.0

1.0

3.5

1.0

1.0

За назвою

4.0

12.0

1.0

3.5

1.0

1.0

rgb()

4.0

12.0

1.0

3.5

1.0

1.0

hsl()

9.0

12.0

1.0

9.5

3.1

1.0

rgba()

9.0

12.0

1.0

10.0

3.1

3.0

hsla()

9.0

12.0

1.0

10.0

3.1

3.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

Приклади


Синтаксис властивості.

.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); }

Встановлюємо колір для різних елементів.