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

Кольори html позначаються шістьма символами після символу слєш - наприклад #000000. Ці шість символів позначають частки різних кольорів (Червоного, Зеленого та Синього кольорів (Red, Green, Blue)) у підсумковому кольорі. У моніторі вашого ком'ютера зображення формується з величезної кількості точок, які називаються пікселями. Кожен піксел – це маленьке джерело світла, назвемо його "ліхтарик", який у свою чергу складається з трьох ліхтариків – червоного, зеленого та синього кольору. Зменшуючи або збільшуючи інтенсивність свічення окремих кольорових ліхтариків, ми отримуємо потрібний колір.

Коди кольорів html

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

Найменшим значенням кольору є 0 (шістнадцяткове 00). Найбільшим значенням кольору є 255 (шістнадцяткове FF).

Шістнадцяткове значення кольору є три цифри, що починаються зі знака #.

Коди (значення) кольорів

Колір Код HEX Код RGB
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)

16 мільйонів відтінків

Поєднання червоного, синього та зеленого кольорів зі значеннями з часткою кожного кольору від 0 до 255 дають у сумі понад 16 мільйонів відтінків (256 x 256 x 256).

Більшість сучасних моніторів здатні відобразити не менше 16384 різних відтінків (ЖК-монітори, в основному, здатні відображати 262 тисячі 16 мільйонів (оновлено у жовтні 2013 р.)кольорів, а ЕПТ-монітори здатні відображати практично необмежену кількість кольорів).

У таблиці нижче наведено зміну частки червоного кольору з 0 до 255 при нульових значеннях синього і зеленого кольорів:

червоний Код HEX Код RGB
#000000 rgb(0,0,0)
#080000 rgb(8,0,0)
#100000 rgb(16,0,0)
#180000 rgb(24,0,0)
#200000 rgb(32,0,0)
#280000 rgb(40,0,0)
#300000 rgb(48,0,0)
#380000 rgb(56,0,0)
#400000 rgb(64,0,0)
#480000 rgb(72,0,0)
#500000 rgb(80,0,0)
#580000 rgb(88,0,0)
#600000 rgb(96,0,0)
#680000 rgb(104,0,0)
#700000 rgb(112,0,0)
#780000 rgb(120,0,0)
#800000 rgb(128,0,0)
#880000 rgb(136,0,0)
#900000 rgb(144,0,0)
#980000 rgb(152,0,0)
#A00000 rgb(160,0,0)
#A80000 rgb(168,0,0)
# B00000 rgb(176,0,0)
#B80000 rgb(184,0,0)
#C00000 rgb(192,0,0)
#C80000 rgb(200,0,0)
#D00000 rgb(208,0,0)
#D80000 rgb(216,0,0)
#E00000 rgb(224,0,0)
#E80000 rgb(232,0,0)
#F00000 rgb(240,0,0)
#F80000 rgb(248,0,0)
#FF0000 rgb(255,0,0)

Відтінки сірого

Для отримання відтінків сірого кольору використовуються рівні частки всіх кольорів. Для полегшення вибору потрібного кольору ми наводимо вам коди відтінків сірого кольору

Відтінки сірого Код HEX Код RGB
#000000 rgb(0,0,0)
#080808 rgb(8,8,8)
#101010 rgb(16,16,16)
#181818 rgb(24,24,24)
#202020 rgb(32,32,32)
#282828 rgb(40,40,40)
#303030 rgb(48,48,48)
#383838 rgb(56,56,56)
#404040 rgb(64,64,64)
#484848 rgb(72,72,72)
#505050 rgb(80,80,80)
#585858 rgb(88,88,88)
#606060 rgb(96,96,96)
#686868 rgb(104,104,104)
#707070 rgb(112,112,112)
#787878 rgb(120,120,120)
#808080 rgb(128,128,128)
#888888 rgb(136,136,136)
#909090 rgb(144,144,144)
#989898 rgb(152,152,152)
#A0A0A0 rgb(160,160,160)
#A8A8A8 rgb(168,168,168)
#B0B0B0 rgb(176,176,176)
#B8B8B8 rgb(184,184,184)
#C0C0C0 rgb(192,192,192)
#C8C8C8 rgb(200,200,200)
#D0D0D0 rgb(208,208,208)
#D8D8D8 rgb(216,216,216)
#E0E0E0 rgb(224,224,224)
#E8E8E8 rgb(232,232,232)
#F0F0F0 rgb(240,240,240)
#F8F8F8 rgb(248,248,248)
#FFFFFF rgb(255,255,255)

Крос-браузерні (для всіх браузерів) назви кольорів

Колекція зі 150 назв кольорів у html, що підтримуються у всіх браузерах.

Стандартизовані назви кольорів

Консорціум W3C перераховує 16 валідних назв кольорів для HTML і CSS: aqua (аквамарин), black (чорний), blue (синій), fuchsia (фуксиновий), gray (сірий), green (зелений), lime (лайм або салатовий), maroon (каштановий), navy (ультрамарин), olive (оливковий), purple (пурпурний), red (червоний), silver (сріблястий), teal (сизий), white (білий) та yellow (жовтий).

При використанні кольорів, які не входять до цього списку, правильніше буде використовувати їх шістнадцятковий код (HEX) або RGB.

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

Кілька років тому, коли комп'ютери могли підтримувати максимум 256 різних кольорів, було запропоновано список із 216 «Безпечних web-квітів» із 40 кольорами, зарезервованими для системи.

Ця 216-кольорова палітра була створена для того, щоб правильно відобразити кольори у режимі 256-кольорової палітри.

Тепер це не має значення, тому що більшість комп'ютерів у всьому світі підтримують мільйони відтінків кольору. У будь-якому випадку ось список цих кольорів:

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

У html колір може бути заданий у кількох форматах:

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

  • Перша числова пара відповідає за червоний колір;
  • Друга пара – за вміст зеленого кольору;
  • Остання – за зміст синього кольору.

На початку коду (перед цифрами) ставиться решітка. Так позначається шістнадцятковий колірний код. Крім чисел від 1 до 9 у цій системі обчислення використовуються літери латинського алфавіту (A, B, C, D, E, F).

Наприклад, код білого кольору в html матиме вигляд #FFFFFF:

2. Ключове слово – зараз html підтримує близько 147 ключових слів. Але не всі з цих слів є унікальними. Деякі з них посилаються на той самий колірний відтінок.

Сірий колір позначається двома ключовими словами: grey та gray . Їх шістнадцятковий код (HEX) задається одним і тим же значенням #808080.

Приклад:

#808080



3. У форматі RGB – це кодування кольорів у html засноване на використанні трьох значень, що задаються в діапазоні від 0 до 255. Кожне з них визначає насиченість відтінку одним з основних кольорів:

  • R - червоний (red);
  • G - зелений (green);
  • B – синій (blue).

Номер кольору у форматі RGB записується у такому вигляді: rgb(0, 210, 100).

background-color:rgb(100,186,43)

4. У форматі RGBA – він є удосконаленим форматом RGB , де четвертим значенням задається прозорість кольору у вигляді десяткового дробу від 0 до 1.

Приклад використання:

background-color:rgba(100,86,143,0.2)

background-color:rgba(100,86,143,0.5)

background-color:rgba(100,86,143,0.8)

background-color:rgba(100,86,143,1)

Таблиці кольорів html та генератори кольору

За такого великого розкиду форматів установки кольору легко заплутатися. Тому було придумано спеціальну таблицю кольорів. У ній до 147 ключових назв колірних відтінків наведено коди відповідності у всіх основних стандартах подання кольору. Додатково кожне поле має планку для візуального підбору кольору. Одна з таких таблиць представлена ​​на сайті colorscheme.ru:

Але навіть за допомогою такої структуризації відповідності підбір потрібного відтінку може виявитися скрутним. Та й не факт, що у таблиці кодів кольорів знайдеться необхідний.

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

На сайті html-color-codes.info генератор квітів має такий вигляд:

А в рамках сервісу color-picker.appsmaster.co цей інструмент реалізований трохи інакше:

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

Але генератор кольорів доступний не лише на спеціалізованих сайтах. Подібним інструментом забезпечені майже всі графічні редактори. Наприклад, Photoshop :

Техніка безпеки під час роботи з кольором

А було це давно, ще в епоху відеокарт, що підтримують лише 256 кольорів. У ті далекі часи Операційні системимогли без спотворень відображати лише певну кількість восьми бітових відтінків.

Тоді було виведено велику таблицю безпечних кольорів. В ній вказувалося 216 відтінків, які могли бути відображені без спотворення будь-якого з браузерів того часу. І до цього дня ця « великий рукопис» ще доступна на деяких ресурсах:

Нині все змінилося. Тому всі правила техніки безпеки під час роботи з кольором у html повністю анулюються. Адже сучасне комп'ютерне залізо підтримує понад 16 мільйонів відтінків. І 216 безпечних квітів канули в лету.

Ці дані повністю підтверджуються статистикою. Судячи з неї, у 2014 році лише 0.5% користувачів мають комп'ютери, що підтримують лише 256 відтінків.

Основи колірної гармонії

Природним гармонійним почуттям смаку наділені далеко не всі з нас. Тому правильний вибір кольору може стати справжнім випробуванням. Але, хвала науці, навіть колірну гармонію їй удалося описати у вигляді кількох схем. Усі вони ґрунтуються на використанні колірного кола. Схеми гармонійного підбору кольорів у html.

Для html сторіноккольори позначаються переважно у шістнадцятковій системі. Для цього використовують два види запису коду - повне або скорочене. Щоб правильно вказати html колір повним записом, необхідно прописати шість знаків (цифри та/або англійські літери) після решітки, наприклад, чорний записується так: #000000. Скорочений запис вказівки html кольорів складається з решітки та трьох цифр та/або букв за нею. При цьому даний вид запасів можна використовувати тільки в тому випадку, якщо повний записданого кольору складається однакових символів після ґрат. Наприклад, цей чорний колір можна записати так: #000. Вказувати html кольоруможна як великими, і маленькими символами, оскільки де вони чутливі до регістру.

Кожен символ, записаний після "#", відповідає певній частині червоного, зеленого та синього кольорів. У свою чергу всі монітори складаються з величезної кількості пікселів (мікроскопічних точок), кожен з яких включає 3 так званих "ліхтарика" (джерела світла): червоні, зелений і синій. Потім, регулюючи інтенсивність світла, що випромінюється цими "ліхтариками", монітор відображає потрібний нам колір.

Поєднуючи інтенсивність випромінювання червоного, синього та зеленого світла (від 0 до 256), монітори можуть відображати 16.000.000 різних відтінків.

Також кольори для сайтів можуть вказуватися словесно або в коді RGB.

На сьогоднішній день словесно можна прописати 147 кольорів. При цьому важливо знати, що деякі різні назви можуть позначати однакові кольори, наприклад, Gray і Grey - це сірий колір (#808080).

Безпечні кольори для сайтів.

Не кожен монітор та браузер може правильно відображати всі 16 мільйонів html кольорів.

Якщо, наприклад, трапляється колір, який браузер неспроможна правильно відобразити, то:

  1. Браузер замінює його на той, який найбільше на нього схожий і може бути успішно відтворений;
  2. Для правильного відображення браузер може змішати кілька кольорів та відтворити результат.

Щоб гарантовано отримати на виході в будь-якому браузері та на будь-якому моніторі колір, який Ви прописали в коді, рекомендується використовувати "Безпечні кольори". Вони були визначені не вручну чи за чиїмось бажанням, а математично. Таких на 100% безпечних кольорів для html документів існує 216. І хоча сьогоднішні технології дійшли до того, що сучасні монітори та браузери розпізнають мільйони відтінків, ми рекомендуємо для гарантії передачі кольору використовувати саме ці безпечні кольори.

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

Ця таблиця включає 216 кодів безпечних html кольорів. Кожен колір має значення в RGB для визначення кольору в графічних редакторівта HEX для вказівки кольору на html сторінках.

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

>>Управління кольором

Шістнадцяткові значення кольору RGB

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

У другому випадку за основу приймається чорнийколір екрану монітора, кожен осередок якого світиться одним з трьох кольорів: red-червоний, green-зелений та blue-синій. Тоді при повній відсутності будь-якого світіння ми отримуємо чистий чорний колір екрану, а будь-який із потрібних кольорів задається співвідношенням кожного із трьох кольорів. У цьому випадку ми отримаємо RGB-Спосіб передачі кольору. Основні кольори можуть мати значення від 0 до 255 , або від 0% до 100% або можуть бути представлені у вигляді шістнадцяткового значення. На малюнку нижче можна побачити результати змішування основних кольорів.

Шістнадцяткова система числення, на відміну від десяткової у ряді цифр має десять знаків, а шістнадцять - звідси й назва. Відповідно не повторюваних варіантів поєднань з двох цифр може бути тільки - 256 , для продовження ряду цифр після 9 використовуються літери від Aдо F, отже, ряд виглядатиме так -

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.
Для переведення чисел з однієї системи числення до іншої і навпаки скористайтеся калькулятором, наведеним нижче. Максимальне значеннятут може бути FF - 255 .

У цьому випадку колір визначається трьома шістнадцятковими числами, кожне з яких складається з двох цифр. Перше число визначає інтенсивність червоногокольору, середнє- зеленого, останнє- синьогокольори. Всі числа можуть набувати значення в діапазоні від 00 до FF(Від 0 до 255). Наприклад: зелений колір задається як #00FF00, червоний - як #FF0000, синій - як #0000FF, білий - як #FFFFFF, повна відсутність кольору або чорний задається як #000000 .

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

Приклади деяких шістнадцяткових значень кольорів RGB: градації червоного, синього та зеленого кольорів.

вигляд код вигляд код вигляд код вигляд код вигляд код вигляд код
#010000 #800000 #000100 #008000 #000001 #000080
#100000 #900000 #001000 #009000 #000010 #000090
#200000 #A00000 #002000 #00A000 #000020 #0000A0
#300000 # B00000 #003000 #00B000 #000030 #0000B0
#400000 #C00000 #004000 #00C000 #000040 #0000C0
#500000 #D00000 #005000 #00D000 #000050 #0000D0
#600000 #E00000 #006000 #00E000 #000060 #0000E0
#700000 #FF0000 #007000 #00FF00 #000070 #0000FF

Завдання кольору за допомогою малих літералів

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

вигляд ім'я вигляд ім'я вигляд ім'я вигляд ім'я
White Red Orange Yellow
Green Blue Purple Black
Aliceblue Antiquewhite Aqua Aquamarine
Azure Beige Bisque Blanchedalmond
Blueviolet Brown Burlywood Cadetblue
Chartreuse Chocolate Coral Cornflowerblue
Cornsilk Crimson Cyan Darkblue
Darkcyan Darkgoldenrod Darkgray Darkgreen
Darkkhaki Darkmagenta Darkoliegreen Darkorange
Darkorchid Darkred Darksalmon Darkseagreen
Darkslateblue Darkslategray Darkturquoise Darkviolet
Deeppink Deepskyblue Dimgray Dodgerblue
Firebrick Floralwhite Forestgreen Fuschia
Gainsboro Ghostwhite Gold Goldenrod
Gray Greenyellow Honeydew Hotpink
Indianred Indigo Ivory Khaki
Lavender Lavenderblush Lemonchiffon Lightblue
Lightcoral Lightcyan Lightcoldenrodyellow Lightgreen
Lightgray Lightpink Lightsalmon Lightseagreen
Lightskyblue Lightslategray Lightsteelblue Lightyellow
Lime Limegreen Linen Magenta
Maroon Mediumaquamarine Mediumblue Mediumorchid
Mediumpurple Mediumseagreen Mediumslateblue Mediumspringgreen
Mediumturquoise Mediumvioletred Midnightblue Mintcream
Mistyrose Navajowhite Navy Oldlace
Olive Olivedrab Orangered Orchid
Palegoldenrod Palegreen Paleturquoise Palevioletred
Papayawhip Peachpuff Peru Pink
Plum Powderblue Rosybrown Royalblue
Saddlebrown Seagreen Seashell Sienna
Silver Skyblue Slateblue Slategray
Snow Springgreen Steelblue Tan
Teal Thistle Tomato Turquoise
Violet Wheat Whitesmoke Yellowgreen
Список малих літералів з назвами кольорів досить великий і більш ніж достатній. Якщо необхідно задати як фоновий колірнастільки незвичайний, що йому навіть немає назви, то можна скористатися шістнадцятковим значенням.

Використання безпечної палітри кольорів

На жаль, на різних платформах, з різними системними налаштуваннями, правильна передача кольору є проблемою. Вся справа в тому, що браузер завжди намагається підлаштувати палітру кольорів документа під системні налаштуваннята можливості монітора, шляхом самостійного змішування кольорів та їх заміщення. Як наслідок – іноді користувач бачить не зовсім те, що хотів йому показати web-майстер. Вихід із цієї ситуації було знайдено у застосуванні палітри, кожен колір якої гарантовано передається однаково всіма браузерами на різних платформах. Це так звана гарантованапалітра, ще її називають безпечноюпалітрою. У цю палітру входять кольори, колірні складові яких приймають такі значення: 00 ,33 ,66 ,99 , CC,FF, у всіх можливих 216 їх поєднаннях.

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