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

Таблиця (палітра) кольорів htmlнадає можливість самостійно підібрати потрібний вам тон. Значення кольору відображається у трьох форматах: Hex, RGB та HSV.

• Hex складається з трьох двох символьних значень у шістнадцятковій системі числення. Наприклад: #ff00b3, де перша пара чисел – червоний, друга – зелений, а третя – синій.
• RGB (RedGreenBlue) має вигляд "200,100,255", що позначає кількість відповідного тону (червоний, зелений, синій) в кольорі.
• HSV (Hue, Saturation, Value - тон, насиченість, значення) - колірна модель, в якій координатами є:
  • Hue - колірний тон, може змінюватись в межах від 0° до 360°.
  • Saturation - насиченість, що варіюється в межах 0-100 або 0-1. Чим більший цей параметр, тим чистіший колір, тому цей параметр іноді називають чистотою кольору. А чим ближче цей параметр до нуля, тим ближчий колір до нейтрального сірого.
  • Value (значення кольору) - задає яскравість, значення так само може змінюватись в межах 0-100 або 0-1.

Введіть код кольору: GO

Список квітів із назвами

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

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

За назвою

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

За допомогою RGB

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

RGBA

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

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

HSL

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

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

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

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

HSLA

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

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

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

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

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

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

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

У web-дизайні існує кілька способів подання кольору

HEX – шістнадцяткова система представлення кольору на основі 16. Для даної системи використовуються арабські десяткові цифри від 0 до 9 та латинські літери від A до F для доповнення цифрової кількості до 16. Для web-дизайну взято 16 основних (ключових) кольорів, так званий шістнадцятковий код кольору #RRGGBB, де кожна пара відповідає за свою частку кольору: RR – червоний, GG – зелений та BB – синій. Кожна частка кольору в діапазоні від 00 до FF.

Два інших уявлення кольору в web-дизайні це: у вигляді RGB(*,*,*), де кожна «*» частка кольору представлена ​​десятковими цифрами від 0 до 255 та за найменуваннями кольору англійською мовою.

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

Таблиця 16 основних кольорів, які використовуються у всіх браузерах

Таблиця пурпурногокольори та його відтінків

Таблиця сірогокольори та його відтінків

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

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

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

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

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

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

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

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

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

У таблиці нижче наведено зміну частки червоного кольору з 0 до 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-кольорової палітри.

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

На цій сторінці наведено таблицю з ключовими словами, які можна використовувати для позначення кольорів у таких мовах Web-розробника як: HTML, CSS, JavaScript, Flash та ін.

У старих специфікаціях концерну WC3 було прописано лише 16 ключових слів, за допомогою яких встановлювалися кольори в HTML і CSS. У подальших, більш сучасних специфікаціях було додано ще 130 ключових слів для позначення назв кольорів. Наступна таблиця містить імена кольорів, шістнадцятковий та RGB коди, яким вони відповідають.

Відповідно до правил CSS імена кольору не чутливі до регістру. Записи кольору IndianRed і indianred рівнозначні.

Також варто звернути увагу, що із 146 ключових слів таблиці, кольорів у ній насправді менше. Це викликано тим, що деякі ключові слова позначають той самий колір. Так імена Grey, і Gray позначають 50-відсотковий сірий колір з кодом #808080, а слово Magenta - це синонім HTML кольору Fuchsia, що відповідає шістнадцятковому коду #FF00FF. Також синонімами є слова Aqua і Cyan, вони відповідають коду #00FFFF.