за допомогою атрибуту style використовуючи властивість backgroundа значення присвоюємо rgb(255, 0, 0) , rgb(0, 255, 0) , і rgb(0, 0, 255) . Тобто ми по черзі робимо один канал максимально насиченим, а решта каналів не використовується для синтезу, тому що їх значення дорівнює нулю.

Спробуйте відредагувати цей приклад і вказати значення, наприклад rgb(100, 100, 100) .

Встановлення кольору за допомогою RGBA

У CSS3 з'явився новий інструментдля роботи з кольором - формат RGBA. Його можна назвати розвитком моделі RGB, але з додаванням одного нового каналу – A або альфа-каналу. Цей канал визначає прозорість кольору. Його значення задаються в діапазоні від 0 до 1. Значення, що дорівнює 0, відповідає повній прозорості, 1 - повній непрозорості (колір буде таким, яким він заданий в перших трьох каналах RGB), а проміжні значення, як 0.4 або 0.6 - напівпрозорості різною мірою.

Приклад коду.

Ось як він спрацює:

Цей код за своїм візуального поданняаналогічний наступному, що використовує модель RGB для визначення значення кольору:

Ось його результат:

Значення альфа каналу дорівнює нулю робить будь-який колір невидимим - абсолютно прозорим, значення, що дорівнює одиниці, транслює колір в RGB-коді без змін. Властивість rgba(255,0,0,1.0) показує червоний колір rgb(255, 0, 0).

За шістнадцятковим значенням (HEX-код)

У повсякденному житті ми користуємося десятковою системою рахунку. Її витоки дуже прості - у нас десять пальців на руках, і рахувати на пальцях у житті було зручно. Якщо в десятковій системідесять цифр: від 0 до 9, а число 10 - це вже наступний розряд, то в шістнадцяткову систему числення 16 цифр, а наступним розрядом буде число 16.

Для вказівки кодів кольорів як шістнадцяткових цифр використовуються звичайні десяткові цифривід 0 до 9 і для позначення цифр від 10 до 15 використовують латинські літери від A до F тобто (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Для наочності зведемо це таблицю:

Для запису шістнадцяткових чисел більше F (15 за десятковою системою), як і в десятковій системі, також використовують об'єднання двох цифр, але вже шістнадцяткових, що очевидно. Так, для запису десяткового числа 255 в шістнадцятковій системівикористовується запис FF.

Шістнадцяткова система більш зрозуміла комп'ютеру, він швидше обробляє значення, задані за шістнадцятковим значенням.

Щоб вказати колір у 16-річній системі, перед числовим значеннямпотрібно ставити знак "#", приклад: #FFC0CB. Саме значення #FFC0CB складається з трьох шістнадцяткових цифр FF, C0 та CB. Сенс цього запису такий самий, як і встановлення кольору в форматі RGB(rgb(r, g, b) ) - кожна шістнадцяткова цифра в HEX-коді вказує насичення кольору у своєму каналі моделі RGB.

Цей код відображає такі елементи:

А ось малюнок з результатом з розділу "Встановлення кольору з допомогою RGBна цій сторінці вище.

Рис.1. Кольори RGB.

Ми бачимо, що кольори ідентичні.

Дозволяється скорочений запис HEX-коду кольору: 6-значне число можна записати як 3-значне. Це допустимо лише у випадку, коли дві цифри у значенні кольору одного каналу повторюються.

Тобто припустимо наступне скорочення запису:

Наприклад, колір #ff22aa можна написати так - #f2a , або колір #44aa22 можна вказати у вигляді #4a2 .

Встановлення кольору за допомогою HSL

У CSS3 з'явився новий форматдля вказівки кольору.

Формат HSL – це абревіатура від англійських слів: Hue (відтінок), Saturate (насиченість) та Lightness (світло).

Відтінок HSL - це значення кольору на спеціальному кольоровому колі (рисунок 2) і воно задається в градусах. Якщо проводити аналогії з моделлю RGB, то 0 ° відповідає червоному, 120 ° відповідає зеленому, а 240 ° - синьому кольору.

Значення відтінку зміняться від 0 до 359.

Малюнок 2. Колірне коло HSL.

Друге значення - насиченість (Saturate) задається у відсотках. При 100% насиченості колір максимально "соковитий", у міру руху показника насиченості до 0%, колір стає все більш тьмяним і скочується в сірий.

Третє значення – світлота (Lightness) також задається у відсотках. Чим вищий відсоток, тим яскравішим буде колір. Крайні значення 0% і 100% позначатимуть відповідно чорний (відсутність світла) і білий (засвічений) кольори, при цьому неважливо, який колір з колу був обраний в першому каналі. Оптимальним можна вважати значення яскравості кольору 50%.

Встановлення кольору за допомогою HSLA

Формат HSLA співвідноситься з HSL, як і RGB з RGBA. У форматі HSL A, як і в RGBA доданий альфа-канал, що відповідає за прозорість кольору.

Колір, заданий у форматі HSL, читати простіше. Можна сказати, що він інтуїтивно зрозумілий. Наприклад, код hsl(120,60%,50%) можна уявити підсумковий колір, якщо пам'яті є картинка колірного кола HSL. Про формати RGB та HEX такого сказати не можна, код кольору заданий у цих форматах стає зрозумілим лише після його візуалізації на моніторі.

Нові формати CSS3 (HSL, HSLA і RGBA) працюють у браузерах починаючи з версій: IE 9.0, Opera 10.0 Firefox 3.0. Як зробити так, щоби стилі працювали на старих браузерах?

Somebloсk ( background-color: rgb (255,50,50); background-color: rgba (255,50,50,0.85) )

При використанні такого коду в старих браузерах фоновий колір для класу .somebloсk хоч і не використовуватиме альфа-канал, але відображатиметься у форматі RGB.

Коди кольорів CSS використовуються для вказівки кольору. Як правило, коди кольору або значення кольору використовуються для встановлення кольору або для переднього плану елемента (наприклад, колір тексту, посилання), або для фону елемента (колір фону, блоку). Вони також можуть використовуватися для зміни кольору кнопки, меж, маркера, при наведенні та інших декоративних ефектів.

Ви можете задати свої значення кольору в різних форматах. У наступній таблиці перелічені всі можливі формати:

Нижче докладно описані перелічені формати.

Кольори CSS - шістнадцяткові коди

Шістнадцятковий код кольору- це шестизначне уявлення кольору. Перші дві цифри (RR) – являють собою червоне значення, наступні дві – це зелене значення(GG), а останні – синє значення (BB).

Кольори CSS - короткі шістнадцяткові коди

Короткий шістнадцятковий код кольору- це коротша форма шестизначної нотації. У цьому форматі повторюється кожна цифра, щоб отримати еквівалентне шестизначне значення кольору. Наприклад: #0F0 стає #00FF00.

Шістнадцяткове значення може бути взято з будь-якого графічного програмного забезпечення, такого як Adobe Photoshop, Core Draw та ін.

Кожному шістнадцятковому коду кольору CSS передуватиме знак хеша «#». Нижче наведено приклади використання шістнадцяткових позначень.

Кольори CSS - RGB значення

RGB значення- це код кольору, який задається за допомогою rgb(). Ця властивість набуває трьох значень: по одному для червоного, зеленого та синього. Значення може бути цілим числом від 0 до 255 або відсотком.

Примітка:не всі браузери підтримують властивість кольору rgb(), тому не рекомендується його використовувати.

Нижче наведено приклад, який показує кілька кольорів з використанням значень RGB.

Генератор колірних кодів

Ви можете створювати мільйони колірних кодів за допомогою нашого сервісу.

Безпечні кольори браузера

Нижче представлена ​​таблиця з 216 кольорів, які є найбільш безпечними та незалежними від комп'ютера. Ці кольори в CSS варіюються від 000000 до FFFFFF шістнадцяткового коду. Вони безпечні у використанні, оскільки гарантують, що всі комп'ютери правильно відображатимуть колір при роботі з 256 палітрою кольорів.

Таблиця «безпечних» кольорів у CSS
#000000	#000033	#000066	#000099	#0000CC	#0000FF
#003300	#003333	#003366	#003399	#0033CC	#0033FF
#006600	#006633	#006666	#006699	#0066CC	#0066FF
#009900	#009933	#009966	#009999	#0099CC	#0099FF
#00CC00	#00CC33	#00CC66	#00CC99	#00CCCC	#00CCFF
#00FF00	#00FF33	#00FF66	#00FF99	#00FFCC	#00FFFF
#330000	#330033	#330066	#330099	#3300CC	#3300FF
#333300	#333333	#333366	#333399	#3333CC	#3333FF
#336600	#336633	#336666	#336699	#3366CC	#3366FF
#339900	#339933	#339966	#339999	#3399CC	#3399FF
#33CC00	#33CC33	#33CC66	#33CC99	#33CCCC	#33CCFF
#33FF00	#33FF33	#33FF66	#33FF99	#33FFCC	#33FFFF
#660000	#660033	#660066	#660099	#6600CC	#6600FF
#663300	#663333	#663366	#663399	#6633CC	#6633FF
#666600	#666633	#666666	#666699	#6666CC	#6666FF
#669900	#669933	#669966	#669999	#6699CC	#6699FF
#66CC00	#66CC33	#66CC66	#66CC99	#66CCCC	#66CCFF
#66FF00	#66FF33	#66FF66	#66FF99	#66FFCC	#66FFFF
#990000	#990033	#990066	#990099	#9900CC	#9900FF
#993300	#993333	#993366	#993399	#9933CC	#9933FF
#996600	#996633	#996666	#996699	#9966CC	#9966FF
#999900	#999933	#999966	#999999	#9999CC	#9999FF
#99CC00	#99CC33	#99CC66	#99CC99	#99CCCC	#99CCFF
#99FF00	#99FF33	#99FF66	#99FF99	#99FFCC	#99FFFF
#CC0000	#CC0033	#CC0066	#CC0099	#CC00CC	#CC00FF
#CC3300	#CC3333	#CC3366	#CC3399	#CC33CC	#CC33FF
#CC6600	#CC6633	#CC6666	#CC6699	#CC66CC	#CC66FF
#CC9900	#CC9933	#CC9966	#CC9999	#CC99CC	#CC99FF
#CCCC00	#CCCC33	#CCCC66	#CCCC99	#CCCCCC	#CCCCFF
#CCFF00	#CCFF33	#CCFF66	#CCFF99	#CCFFCC	#CCFFFF
#FF0000	#FF0033	#FF0066	#FF0099	#FF00CC	#FF00FF
#FF3300	#FF3333	#FF3366	#FF3399	#FF33CC	#FF33FF
#FF6600	#FF6633	#FF6666	#FF6699	#FF66CC	#FF66FF
#FF9900	#FF9933	#FF9966	#FF9999	#FF99CC	#FF99FF
#FFCC00	#FFCC33	#FFCC66	#FFCC99	#FFCCCC	#FFCCFF
#FFFF00	#FFFF33	#FFFF66	#FFFF99	#FFFFCC	#FFFFFF

Влад Мержевич

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

Шістнадцяткові кольори

Для завдання кольорів у HTML використовуються числа в шістнадцятковому коді. Шістнадцяткова система, на відміну від десяткової системи, базується, як випливає з її назви, на числі 16. Цифри будуть наступні: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. Числа від 10 до 15 замінені латинськими літерами. У табл. 6.1 наведено відповідність десяткових та шістнадцяткових чисел.

Числа більше 15 у шістнадцятковій системі утворюються об'єднанням двох чисел в одне (табл. 6.2). Наприклад, числу 255 у десятковій системі відповідає число FF у шістнадцятковій.

Щоб не виникало плутанини у визначенні системи числення, перед шістнадцятковим числом ставиться символ ґрат #, наприклад #aa69cc. У цьому регістр значення немає, тому допустимо писати #F0F0F0 чи #f0f0f0.

Типовий колір, що використовується в HTML, виглядає так.

Тут колір фону веб-сторінки встановлено як #FA8E47. Символ грат # перед числом означає, що воно шістнадцяткове. Перші дві цифри (FA) визначають червону складову кольору, цифри третьої по четверту (8E) — зелену, а останні дві цифри (47) — синю. У результаті вийде такий колір.

FA

+

8E

+

47

=

FA8E47

Кожен із трьох кольорів — червоний, зелений та синій — може набувати значень від 00 до FF, що у результаті утворює 256 відтінків. Таким чином, загальна кількість кольорів може бути 256х256х256 = 16777216 комбінацій. Колірна модель, заснована на червоній, зеленій та синій складовій, отримала назву RGB (red, green, blue; червоний, зелений, синій). Ця модель адитивна (від add - складати), при якій додавання всіх трьох компонентів утворює білий колір.

Щоб легше орієнтуватися в шістнадцяткових кольорах, зважте на деякі правила.

• Якщо значення компонента кольору однакові (наприклад: #D6D6D6), то вийде сірий відтінок. Чим більше число, тим світліший колір, значення змінюються від #000000 (чорний) до #FFFFFF (білий).
• Яскраво-червоний колір утворюється, якщо червоний компонент зробити максимальним (FF), а решту компонентів обнулити. Колір зі значенням #FF0000 найчервоніший із можливих червоних відтінків. Аналогічно з зеленим кольором (#00FF00) і синім (#0000FF).
• Жовтий колір (#FFFF00) виходить змішанням червоного із зеленим. Це добре видно на колірному колі (рис. 6.1), де представлені основні кольори (червоний, зелений, синій) та комплементарні чи додаткові. До них відносяться жовтий, блакитний та фіолетовий (ще званим пурпурним). Взагалі, будь-який колір можна отримати змішанням довколишніх кольорів. Так, блакитний (#00FFFF) виходить за рахунок поєднання синього та зеленого кольору.

Мал. 6.1. Колірний круг

Кольори за шістнадцятковими значеннями не обов'язково підбирати емпіричним шляхом. Для цієї мети підійде графічний редактор, що вміє працювати з різними кольоровими моделями, наприклад, Adobe Photoshop. На рис. 6.2 показано вікно вибору кольору в цій програмі, лінією обведено отримане шістнадцяткове значення поточного кольору. Його можна скопіювати та вставити до себе в код.

Мал. 6.2. Вікно для вибору кольору в програмі Photoshop

Веб-кольори

Якщо встановити якість кольору монітора в 8 біт (256 кольорів), то один і той же колір може відображатися в різних браузерахпо своєму. Це пов'язано зі способом відображення графіки, коли браузер працює зі своєю власною палітрою і не може показати колір, який у панелі немає. У цьому випадку колір замінюється поєднанням пікселів інших, близьких до нього, кольорів, що імітують заданий. Щоб колір залишався незмінним у різних браузерах, ввели палітру про веб-квітів. Веб-квітами називаються такі кольори, для кожної складової яких - червоної, зеленої та синьої - встановлюється одне з шести значень - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). У дужках зазначено шістнадцяткове значення цієї компоненти. Загальна кількість кольорів із усіх можливих поєднань дає 6х6х6 – 216 кольорів. Приклад веб-кольору - #33FF66.

Основна особливість веб-кольору полягає в тому, що він відображається однаково у всіх браузерах. У Наразіактуальність веб-квітів дуже мала через підвищення якості моніторів та розширення їх можливостей.

Кольори за назвою

Щоб не запам'ятовувати сукупність цифр, замість них можна використовувати імена кольорів, що широко використовуються. У табл. 6.3 наведено імена найпопулярніших назв кольорів.

Табл. 6.3. Назви деяких кольорів

Ім'я кольору	Колір	Опис	Шістнадцяткове значення
black		Чорний	#000000
blue		Синій	#0000FF
fuchsia		Світлофіолетовий	#FF00FF
gray		Темно-сірий	#808080
green		Зелений	#008000
lime		Світло зелений	#00FF00
maroon		Темно червоний	#800000
navy		Темно синій	#000080
olive		Оливковий	#808000
purple		Темно фіолетовий	#800080
red		червоний	#FF0000
silver		Світло сірий	#C0C0C0
teal		Синьо-зелений	#008080
white		Білий	#FFFFFF
yellow		Жовтий	#FFFF00

Не має значення, яким способом ви задаєте колір - на його ім'я або за допомогою шістнадцяткових чисел. По дії ці способи рівні. У прикладі 6.1 показано, як встановити колір тла та тексту веб-сторінки.

Приклад 6.1. Колір фону та тексту

Приклад тексту

У даному прикладіколір фону задається за допомогою атрибуту bgcolor тега а колір тексту через атрибут text . Для різноманітності значення атрибута text встановлено у вигляді шістнадцяткового числа, а у bgcolor за допомогою зарезервованого ключового слова teal.

HEX/HTML

Колір у форматі HEX ​​- це ні що інше, як шістнадцяткове уявлення RGB.

Кольори видаються в вигляді трьохгруп шістнадцяткових цифр, де кожна група відповідає за свій колір: #112233, де 11 – червоний, 22 – зелений, 33 – синій. Усі значення мають бути між 00 та FF.

У багатьох додатках допускається скорочена форма запису шістнадцяткових кольорів. Якщо кожна з трьох групмістить однакові символи, наприклад #112233, їх можна записати як #123.

1. h1 ( color: #ff0000; ) /* червоний */
2. h2 ( color: #00ff00; ) /* зелений */
3. h3 ( color: #0000ff; ) /* синій */
4. h4 ( color: #00f; ) /* той же синій, скорочений запис */

RGB

Колірний простір RGB (Red, Green, Blue) складається з усіх можливих кольорів, які можуть бути отримані шляхом змішування червоного, зеленого та синього. Ця модель популярна у фотографії, телебаченні, та комп'ютерній графіці.

Значення RGB задаються цілим числом від 0 до 255. Наприклад, rgb(0,0,255) відображається як синій, тому що синій параметр встановлений у найвище значення (255), а інші встановлені в 0.

Деякі програми (зокрема, веб-браузери) підтримують відсотковий запис значень RGB (від 0% до 100%).

1. h1 ( color: rgb(255, 0, 0); ) /* червоний */
2. h2 ( color: rgb(0, 255, 0); ) /* зелений */
3. h3 ( color: rgb(0, 0, 255); ) /* синій */
4. h4 ( color: rgb(0%, 0%, 100%); ) /* той же синій, відсотковий запис */

Значення кольорів RGB підтримуються у всіх основних браузерах.

RGBA

Віднедавна сучасні браузеринавчилися працювати з колірною моделлю RGBA – розширенням RGB за допомогою альфа-каналу, який визначає непрозорість об'єкта.

Значення кольори RGBAзадається у вигляді: rgba (red, green, blue, alpha). Параметр alpha – це число в діапазоні від 0.0 (повністю прозорий) до 1.0 (повністю непрозорий).

1. h1 ( color: rgb(0, 0, 255); ) /* синій у звичайному RGB */
2. h2 ( color: rgba(0, 0, 255, 1); ) /* той же синій в RGBA, тому що непрозорість: 100% */
3. h3 ( color: rgba(0, 0, 255, 0.5); ) /* непрозорість: 50% */
4. h4 ( color: rgba(0, 0, 255, .155); ) /* непрозорість: 15.5% */
5. h5 ( color: rgba(0, 0, 255, 0); ) /* повністю прозорий */

RGBA підтримується в IE9+, Firefox 3+, Chrome, Safari, та в Opera 10+.

HSL

Колірна модель HSL є поданням моделі RGB у циліндричній системі координат. HSL представляє кольори більш інтуїтивним та зрозумілим для сприйняття чином, ніж типове RGB. Модель часто використовується в графічних додатках, в палітрах кольорів, і для аналізу зображень.

HSL розшифровується як Hue (колір/відтінок), Saturation (насиченість), Lightness/Luminance (світло/світлість/світлість, не плутати з яскравістю).

Hue задає положення кольору на колі (від 0 до 360). Saturation є відсоткове значення насиченості (від 0% до 100%). Lightness є відсотковим значенням світлості (від 0% до 100%).

1. h1 (color: hsl(120, 100%, 50%); ) /* зелений */
2. h2 (color: hsl(120, 100%, 75%); ) /* світло-зелений */
3. h3 (color: hsl(120, 100%, 25%); ) /* темно-зелений */
4. h4 (color: hsl(120, 60%, 70%); ) /* пастельний зелений */

HSL підтримується в IE9+, Firefox, Chrome, Safari та Opera 10+.

HSLA

За аналогією з RGB/RGBA, HSL є режим HSLA з підтримкою альфа-каналу для вказівки непрозорості об'єкта.

Значення кольору HSLA визначається як: hsla(hue, saturation, lightness, alpha). Параметр alpha – це число в діапазоні від 0.0 (повністю прозорий) до 1.0 (повністю непрозорий).

1. h1 ( color: hsl(120, 100%, 50%); ) /* зелений у звичайному HSL */
2. h2 ( color: hsla(120, 100%, 50%, 1); ) /* той же зелений в HSLA, тому що непрозорість: 100% */
3. h3 (color: hsla(120, 100%, 50%, 0.5); ) /* непрозорість: 50% */
4. h4 (color: hsla(120, 100%, 50%, .155); ) /* непрозорість: 15.5% */
5. h5 ( color: hsla(120, 100%, 50%, 0); ) /* повністю прозорий */

CMYK

Колірна модель CMYK часто асоціюється з кольоровим друком, з поліграфією. CMYK (на відміну від RGB) є субтрактивною моделлю, це означає, що більш високі значення пов'язані з темнішими кольорами.

Кольори визначаються співвідношенням блакитного (Cyan), пурпурового (Magenta), жовтого (Yellow) з додаванням чорного (Key/blacK).

Кожне з чисел, що визначає колір у CMYK, є відсотком фарби даного кольору, що становить колірну комбінацію, а точніше, розмір точки растру, що виводиться на фотонабірному апараті на плівці даного кольору (або прямо на друкованій формі у випадку CTP).

Наприклад, для отримання кольору PANTONE 7526 слід змішати 9 частин блакитної фарби, 83 частин пурпурової фарби, 100 - жовтої фарби, і 46 - чорної. Це можна позначити так: (9,83,100,46). Іноді мають такі позначення: C9M83Y100K46, або (9%, 83%, 100%, 46%), або (0,09/0,83/1,0/0,46).

HSB/HSV

HSB (також відома як HSV) схожа на HSL, але це дві різні колірні моделі. Вони обидві засновані на циліндричній геометрії, але HSB/HSV заснована на моделі "hexcone", у той час як HSL заснована на моделі "bi-hexcone". Художники часто вважають за краще використовувати цю модель, прийнято вважати, що пристрій HSB/HSV ближче до природного сприйняття кольорів. Зокрема, колірна модель HSBзастосовується в Adobe Photoshop.

HSB/HSV розшифровується як Hue (колір/відтінок), Saturation (насиченість), Brightness/Value (яскравість/значення).

Hue задає положення кольору на колі (від 0 до 360). Saturation є відсоткове значення насиченості (від 0% до 100%). Brightness є відсотковим значенням яскравості (від 0 до 100%).

XYZ

Колірна модель XYZ (CIE 1931 XYZ) є суто математичним простором. На відміну від RGB, CMYK та інших моделей, у XYZ основні компоненти є «уявними», тобто ви не можете співвіднести X, Y, і Z з будь-яким набором кольорів для змішування. XYZ є майстер-моделлю практично всіх інших колірних моделей, що використовуються в технічних галузях.

LAB

Колірна модель LAB (CIELAB, CIE 1976 L*a*b*) обчислюється з простору CIE XYZ. При розробці Lab ставилася мета створення колірного простору, Зміна кольору в якому буде більш лінійним з точки зору людського сприйняття (у порівнянні з XYZ), тобто з тим, щоб однакова зміна значень координат кольору в різних областяхколірного простору справляло однакове відчуття зміни кольору.