за допомогою атрибуту 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. У форматі HSLA, як і в 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

Для завдання кольорів використовуються числа в шістнадцятковому коді. Шістнадцяткова система, на відміну від десяткової системи, базується, як випливає з її назви, на числі 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, де кожен символ слід подвоювати. Так запис #fe0 слід розцінювати як #ffee00.

За назвою

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
4.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

Браузери підтримують деякі кольори за їхньою назвою. У табл. 1 наведено назви, шістнадцятковий код, значення у форматі RGB, HSL та опис.

Табл. 1. Назви квітів

Ім'я	Колір	Код	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	rgb(0,0,0)	hsl(0,0%,0%)	Чорний
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

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
5.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

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

RGBA

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

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

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

HSL

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	9.6+	3.1+	3.0+	2.1+	2.0+

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

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

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

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

HSLA

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

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

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

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Попередження

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

Результат цього прикладу показано на рис. 2.

Мал. 2. Кольори на веб-сторінці

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

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