Висловлюю опосередковану подяку Google за ідею та пропоную колегам естафету: необхідно поділитися з читачами зарубіжними ресурсамиз веб-розробки зі своєї RSS-стрічки, які предметно та цікаво пишуть по даному питанню. Для зниження пустослів'я потрібно виконати ряд простих положень:
- На своєму блозі опублікувати переклад (можна вільний, з коментарями та доповненнями) статті з ресурсу.
- Переклади, як і їх джерела, не повинні повторюватися, щоб забезпечити охоплення та різноманітність інформації.
- Посилання згадати блогера, від якого отримана добра звістка і, по можливості, передати естафетну паличку далі.
- Строки естафети не встановлюються; обов'язково знайдеться той, хто припинить цю вакханалію.
Першоджерелом даної посади послужила одна з нотаток Дрю МакЛеллана на колективно-календарному блозі 24ways. Поїхали!
Що таке RGBA-колір?
Не відкрию секрету якщо скажу, що необхідний колірний відтінок створюється в CSS шляхомзмішування у необхідних пропорціях червоного зеленого та синього. Існує, щоправда, один нюанс — який би колір ми не обрали, він завжди буде суцільним та непрозорим.
CSS3 пропонує кілька нових методів завдання кольору, один з яких — використання колірної моделі RGBA. Літера "A" в абревіатурі означає "Альфа"; її значення відповідає за величину прозорості кольору. За допомогою даної моделі ми можемо встановити не тільки необхідне поєднання червоного, зеленого та синього, але також визначити, наскільки колір просвічує. Щось подібне можна спостерігати під час роботи з шарами у Photoshop.
Навіщо тоді властивість оpacity?
Справа в тому, що визначення прозорості для кольору відрізняється від налаштування прозорості для елемента, задане за допомогою css- властивості opacity. Давайте подивимося на прикладі.
У нас є заголовок h1 c певними кольорами для тексту та фону, що знаходиться на сторінці з фоновим малюнком.
H1 (color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); )
Шляхом установки властивості opacity можна застосувати прозорість до всього елемента в цілому:
H1 (color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); opacity: 0.5; )
RGBA-модель надає нам більш гнучку можливість проконтролювати лише колірну прозорість, а не весь елемент. Наприклад, можна встановити прозорість лише для фонового кольору:
H1 (color: rgb(0, 0, 0); background-color: rgba(255, 255, 255, 0.5); )
Або залишити фон без змін та присвоїти прозорість тільки тексту:
H1 (color: rgba(0, 0, 0, 0.5); background-color: rgb(255, 255, 255); )
Ймовірно, використання синтаксису rgb () для визначення кольору менш поширене ніж шістнадцятковий запис (начебто #fff), однак, даному випадкуце залізна необхідність, оскільки неможливо записати RGBA-значення у шістнадцятковій нотації. Тому, задаємо rgba() саме так:
Color: rgba(255, 255, 255, 0.5);
Так само як у rgb (), перші три значення відповідають за поєднання червоного, зеленого та синього. Вони можуть набувати як цілочисельних значень в діапазоні 0-255 так і відсоткові співвідношення в проміжку від 0 до 100 %. Четверте значення визначає рівень прозорості в діапазоні від 0 (абсолютно прозорий) до 1 (абсолютно непрозорий).
Ви можете без побоювання використовувати такий спосіб скрізь, де зазвичай задаєте кольори CSS: для кольору фону і тексту, для рамок, контурів і т.д.
Підтримка у браузерах
Більшість сучасних браузерів (Firefox, Safari, Opera, Google Chrome) підтримують RGBA-колір, але не Internet Explorer.
Нічого не залишається, як вказувати RGBA-колір для браузерів, які їх підтримують, а для інших придумати свої «милиці».
CSS-парсинг працює в браузерах так, що якщо при розборі правил зустрітися якесь невідоме значення, воно буде проігноровано. Скористайтеся цим знанням, щоб віддавати для браузерів, що «не розуміють», звичайний непрозорий колір. Для цього достатньо першим оголошенням вказати колір у форматі RGB, а другим задати колірний відтінок у форматі RGBA— для браузерів, що підтримують цю колірну модель.
H1 ( color: rgb(127, 127, 127); color: rgba(0, 0, 0, 0.5); )
У випадках, коли ви хочете застосувати прозорість для властивості background-color можна вдатися до використання PNG-малюнку з альфа-каналом, щоб досягти точно такого ж ефекту. Звичайно, це більш витратний спосіб, на відміну від «чистого» CSS, оскільки доведеться створювати свій PNG для кожного рівня прозорості, але на безриб'ї та рак риба.
Використовуємо той же принцип, що й у попередньому прикладі: спочатку задаємо фон для всіх браузерів, а потім переписуємо рядок з урахуванням RGBA.
H1 ( background: transparent url(black50.png); background: rgba(0, 0, 0, 0.5) none; )
Слід зазначити, що така конструкція працездатна, оскільки використовуємо скорочену форму запису background , що дозволяє одночасно встановити і фоновий колірі фонове зображення. Браузери, що зіткнулися з невідомим значенням rgba (), повністю проігнорують другий рядок і будуть обробляти перше оголошення.
Дещо ще
Головна перевага RGBA – можливість створення різних дизайнерських рішень без використання малюнків. Вигода тут не лише у легших (як наслідок — швидших) сторінках, а й у виграші в часі: сайти з використанням згаданої технології простіше створювати та підтримувати. Під впливом Javascript або у відповідь на користувацькі дії значення CSS можуть з легкістю змінюватися. Малюнки у разі можуть утруднити такі перетворення.
Div ( color: rgba(255, 255, 255, 0.8); background-color: rgba(142, 213, 87, 0.3); ) div:hover ( color: rgba(255, 255, 255, 1); background- color: rgba(142, 213, 87, 0.6);
Розумне застосування прозорості для рамкових кольорів допоможе виглядати деяким елементам на сторінці більш органічно:
Div (color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); border: 10px solid rgba(255, 255, 255, 0.3); )
На закінчення
Як це часто буває, передові нововведення CSS підтримують передові браузери. Сподіватимемося, що хлопці з Редмонда, дещо усвідомлюють життя і приєднаються до більшості.
Колір в мові CSSможна ставити різними способами:
- за назвою,
- по шістнадцятковому значенню,
- у форматах RGB та RGBA,
- у форматах HSL та HSLA.
Завдання кольору за назвою
Браузери підтримують вказівку деяких кольорів назви. У цій таблиці деякі ключові слова(англійські назви кольорів), що використовуються для завдання властивостей кольору, код RGB, шістнадцятковий код (HEX) і HSL код.
| Ім'я | Колір | RGB | HEX | HSL | Опис |
|---|---|---|---|---|---|
| white | rgb(255, 255, 255) | #ffffff або #fff | hsl(0, 0%, 100%) | Білий | |
| silver | rgb (192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | Сірий | |
| gray | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Темно-сірий | |
| black | rgb(0, 0, 0) | #000000 або #000 | hsl(0, 0%, 0%) | Чорний | |
| maroon | rgb(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | Темно червоний | |
| red | rgb(255, 0, 0) | #ff0000 або #f00 | hsl(0, 100%, 50%) | червоний | |
| orange | rgb(255, 165, 0) | #ffa500 | hsl(38.8, 100%, 50%) | Помаранчевий | |
| yellow | rgb(255, 255, 0) | #ffff00 або #ff0 | hsl(60, 100%, 50%) | Жовтий | |
| olive | rgb(128, 128, 0) | #808000 | hsl(60, 100%, 25%) | Оливковий | |
| lime | rgb(0, 255, 0) | #00ff00 або #0f0 | hsl(120, 100%, 50%) | Світло зелений | |
| green | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | Зелений | |
| aqua | rgb(0, 255, 255) | #00ffff або #0ff | hsl(180, 100%, 50%) | Блакитний | |
| blue | rgb(0, 0, 255) | #0000ff або #00f | hsl(240, 100%, 50%) | Синій | |
| navy | rgb(0,0,128) | #000080 | hsl(240, 100%, 25%) | Темно синій | |
| teal | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | Синьо-зелений | |
| fuchsia | rgb(255, 0, 255) | #ff00ff або #f0f | hsl(300, 100%, 50%) | Рожевий | |
| purple | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | Фіолетовий |
Це зразок використання імен кольорів, наповнення кольорів взяті з розширеної таблиці.
Ось як працює цей код:
Встановлення кольору за допомогою RGB
RGB – адитивна колірна модель. на англійською addition- Додавання. RGB – це абревіатура англійських слів: Red, Green, Blue – червоний, зелений, синій). З цього зрозуміло, що в моделі RGB кольори синтезуються шляхом додавання трьохквітів (червоного, зеленого, синього) у різних кількостях.
Змішуючи червоний, зелений та синій кольориможна одержати кілька мільйонів відтінків. У пам'яті комп'ютерів зберігаються всі можливі комбінації.
Ближче до діла.
Для встановлення властивостей у цьому форматі використовується запис rgb(r, g, b) , де r, g, b - це три канали кожного кольору (red, green, blue). Значення кожного каналу задаються в діапазоні від 0 до 255.
Приклад коду.
Щоб усе стало зрозуміло, наведу приклад коду:
Ось так має спрацювати цей приклад:
Рис.1. Кольори RGB. Пояснення наприклад.
На початку сторінки створюємо клас div.rgb, він потрібен щоб блоки створені тегом
Далі, у коді встановлюємо фоновий колір блоку
Спробуйте відредагувати цей приклад і вказати значення, наприклад 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.
Подивися уважно на малюнок. Фон у вікна, що випадає, зроблений напівпрозорим. Це досить частий дизайнерський прийом. Давай подумаємо як це можна реалізувати.
Завдання
Зробити кросбраузерний напівпрозорий колір.
Рішення
Перша думка в даній ситуації - використовувати для фону png24-картинку із вже заданою напівпрозорістю. Але ця картинка зовсім зайва. Можна чудово обійтися і без неї (отже без зайвого запиту до сервера). Давай спробуємо знайти оптимальне рішення.
Друга думка - використовувати. Але в цьому випадку це не дуже зручно. Адже напівпрозорим тоді стане не лише тло, а й написи. Так, власне, все віконце одразу.
Звичайно, можна спробувати додати додатковий контейнер і застосовувати opacity тільки до нього, але цей HTML-елемент буде призначений лише для оформлення і буде зайвим. Чи можна обійтись без нього?
Звичайно можна! Якщо використовувати RGBA.
Формат опису кольору RGBA
CSS3 дозволяє задавати колір, використовуючи функції RGB та RGBA. При цьому ми повинні вказати частку кожної колірної складової, під яку приділяється один байт (від 0 до 255, раптом хто не знає).
Синтаксис у цієї справи дуже простий:
Background: rgb(0, 255, 0); /* чистий зелений колір */
Для RGBA додається четвертий параметр – альфапрозорість (від 0 до 1).
Background: rgba(255, 0, 0, 0.5); /* чистий червоний з прозорістю 50% */
Ось воно, рішення нашого завдання. Достатньо встановити колір фону з допомогою rgbaі все буде виглядати, як нам потрібно. Без зайвих картинокта елементів!
А де мені взяти ці циферки?
Подивитися на складові кольору можна за допомогою інструмента фотошопу «піпетка»
Про кросбраузерність
Так як функція RGB значно старша, ніж RGBA і присутня ще з часів стандарту CSS2, то для підстрахування від найдавніших браузерів можна використовувати таку дублюючу конструкцію:
SomeBlock ( background: rgb(255, 0, 0); background: rgba(255, 0, 0, 0.5); )
При такому підході у прадідусь сучасних браузерів не буде напівпрозорості, але сам колір залишиться правильним.
Окремо доведеться подбати про IE. Ослоподібні аж до 8 версії включно не розуміють RGBA.
Як завжди: землю — селянам, фабрики — робітникам, а ослам — милицю! У вигляді .
Само собою, в бойових умовах виносимо це правило в окремий CSS, який підключаємо.
SomeBlock ( background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )
Фішка в тому, щоб вказати початковий і кінцевий кольори однаковими (ff0000 червоний) і скористатися тим, що для градієнта в цьому фільтрі можна задати альфаканал (у прикладі значення 80).
Для довідки: у фільтрі використовується шістнадцяткова система та повністю непрозорому кольору відповідає код FF (у десятковому це 255). Відповідно шістнадцяткове 80 - це десяткове 128, тобто 50% прозорості.
Перевірено у:
- IE 6-9
- Firefox 3+
- Opera 10+
- Safari 4
- Chrome
Коди кольорів 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 |
HEX/HTML
Колір у форматі HEX - це ні що інше, як шістнадцяткове уявлення RGB.
Кольори видаються в вигляді трьохгруп шістнадцяткових цифр, де кожна група відповідає за свій колір: #112233, де 11 – червоний, 22 – зелений, 33 – синій. Усі значення мають бути між 00 та FF.
У багатьох додатках допускається скорочена форма запису шістнадцяткових кольорів. Якщо кожна з трьох групмістить однакові символи, наприклад #112233, їх можна записати як #123.
- h1 ( color: #ff0000; ) /* червоний */
- h2 ( color: #00ff00; ) /* зелений */
- h3 ( color: #0000ff; ) /* синій */
- h4 ( color: #00f; ) /* той же синій, скорочений запис */
RGB
Колірний простір RGB (Red, Green, Blue) складається з усіх можливих кольорів, які можуть бути отримані шляхом змішування червоного, зеленого та синього. Ця модель популярна у фотографії, телебаченні, та комп'ютерній графіці.
Значення RGB задаються цілим числом від 0 до 255. Наприклад, rgb(0,0,255) відображається як синій, тому що синій параметр встановлений у найвище значення (255), а інші встановлені в 0.
Деякі програми (зокрема, веб-браузери) підтримують відсотковий запис значень RGB (від 0% до 100%).
- h1 ( color: rgb(255, 0, 0); ) /* червоний */
- h2 ( color: rgb(0, 255, 0); ) /* зелений */
- h3 ( color: rgb(0, 0, 255); ) /* синій */
- h4 ( color: rgb(0%, 0%, 100%); ) /* той же синій, відсотковий запис */
Значення кольорів RGB підтримуються у всіх основних браузерах.
RGBA
Віднедавна сучасні браузеринавчилися працювати з колірною моделлю RGBA – розширенням RGB з підтримкою альфа-каналу, що визначає непрозорість об'єкта.
Значення кольори RGBAзадається у вигляді: rgba (red, green, blue, alpha). Параметр alpha – це число в діапазоні від 0.0 (повністю прозорий) до 1.0 (повністю непрозорий).
- h1 ( color: rgb(0, 0, 255); ) /* синій у звичайному RGB */
- h2 ( color: rgba(0, 0, 255, 1); ) /* той же синій в RGBA, тому що непрозорість: 100% */
- h3 ( color: rgba(0, 0, 255, 0.5); ) /* непрозорість: 50% */
- h4 ( color: rgba(0, 0, 255, .155); ) /* непрозорість: 15.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%).
- h1 (color: hsl(120, 100%, 50%); ) /* зелений */
- h2 (color: hsl(120, 100%, 75%); ) /* світло-зелений */
- h3 (color: hsl(120, 100%, 25%); ) /* темно-зелений */
- 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 (повністю непрозорий).
- h1 ( color: hsl(120, 100%, 50%); ) /* зелений у звичайному HSL */
- h2 ( color: hsla(120, 100%, 50%, 1); ) /* той же зелений в HSLA, тому що непрозорість: 100% */
- h3 (color: hsla(120, 100%, 50%, 0.5); ) /* непрозорість: 50% */
- h4 (color: hsla(120, 100%, 50%, .155); ) /* непрозорість: 15.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), тобто з тим, щоб однакова зміна значень координат кольору в різних областяхколірного простору справляло однакове відчуття зміни кольору.
