Кольори 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 кольорів.
Якщо, наприклад, трапляється колір, який браузер неспроможна правильно відобразити, то:
- Браузер замінює його на той, який найбільше на нього схожий і може бути успішно відтворений;
- Для правильного відображення браузер може змішати кілька кольорів та відтворити результат.
Щоб гарантовано отримати на виході в будь-якому браузері та на будь-якому моніторі колір, який Ви прописали в коді, рекомендується використовувати "Безпечні кольори". Вони були визначені не вручну чи за чиїмось бажанням, а математично. Таких на 100% безпечних кольорів для html документів існує 216. І хоча сьогоднішні технології дійшли до того, що сучасні монітори та браузери розпізнають мільйони відтінків, ми рекомендуємо для гарантії передачі кольору використовувати саме ці безпечні кольори.
Шістнадцяткова система кольорів. | Коди кольорів у 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 та опис.
Ім'я | Колір | Код | 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. |
У цьому випадку колір визначається трьома шістнадцятковими числами, кожне з яких складається з двох цифр. Перше число визначає інтенсивність червоногокольору, середнє- зеленого, останнє- синьогокольори. Всі числа можуть набувати значення в діапазоні від 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 |