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

Модуль CSS colorдокладно описує значення, які дозволяють авторам визначати кольори та непрозорість html-елементів, а також значення якості color.

Властивість color

1. Пріоритетні кольори: якість color

Властивість задає колір шрифту за допомогою різних системкольоропередачі. Властивість визначає колір текстового вмісту елемента. Крім того, воно використовується для надання потенційного непрямого значення (currentColor) для будь-яких інших властивостей, які набувають значення кольору.

Властивість успадковується.

2. Значення кольору

2.1. Основні ключові слова

Список основних ключових слів включає наступні значення:

Назви кольорів не чутливі до регістру.

Синтаксис

Color: teal;

2.2. Числові значення кольору

2.2.1. Кольори моделі RGB

Формат значення RGB у шістнадцятковому форматі — це знак # , за яким відразу йдуть три або шість шістнадцяткових символів. Тризначний запис RGB #rgb перетворюється на шестизначну форму #rrggbb шляхом копіювання цифр, а не шляхом додавання нулів. Наприклад, #fb0 розширюється до #ffbb00. Це гарантує, що білий #ffffff може бути вказаний у короткому записі #fff і видаляє будь-які залежності від глибини кольору дисплея.

Формат значення RGB у функціональній нотації — rgb(, за яким слідує розділений комами список із трьох числових значень(або трьох цілочисельних значень, або трьох відсоткових значень), за якими слідує символ) . Цілочисленне значення 255 відповідає 100% і F або FF у шістнадцятковому записі:

RGB (255,255,255) = RGB (100%, 100%, 100%) = #FFF

Символи пропуску допускаються навколо числових значень.

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

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

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

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

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

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

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

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

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

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

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

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

Коди кольорів CSS використовуються для вказівки кольору. Як правило, коди кольору або значення кольору використовуються для встановлення кольору або для переднього плану елемента (наприклад, колір тексту, посилання), або для фону елемента (колір фону, блоку). Вони також можуть використовуватися для зміни кольору кнопки, меж, маркера, при наведенні та інших декоративних ефектів.

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

Нижче докладно описані перелічені формати.

Кольори CSS - шістнадцяткові коди

Шістнадцятковий код кольору- це шестизначне уявлення кольору. Перші дві цифри (RR) – являють собою червоне значення, наступні дві – це зелене значення (GG), а останні – синє значення (BB).

Кольори CSS - короткі шістнадцяткові коди

Короткий шістнадцятковий код кольору- це коротша форма шестизначної нотації. У цьому форматі повторюється кожна цифра, щоб отримати еквівалентне шестизначне значення кольору. Наприклад: #0F0 стає #00FF00.

Шістнадцяткове значення може бути взято з будь-якого графічного програмного забезпечення, такого як Adobe Photoshop, Core Draw та ін.

Кожному шістнадцятковому коду кольору CSS передуватиме знак хеша «#». Нижче наведено приклади використання шістнадцяткових позначень.

Кольори CSS - RGB значення

RGB значення- це код кольору, який задається за допомогою rgb(). Ця властивість набуває трьох значень: по одному для червоного, зеленого та синього. Значення може бути цілим числом від 0 до 255 або відсотком.

Примітка:не всі браузери підтримують властивість кольору rgb(), тому не рекомендується його використовувати.

Нижче наведено приклад, який показує кілька кольорів з використанням значень RGB.

Генератор колірних кодів

Ви можете створювати мільйони колірних кодів за допомогою нашого сервісу.

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

Нижче представлена ​​таблиця з 216 кольорів, які є найбільш безпечними та незалежними від комп'ютера. Ці кольори в CSS варіюються від 000000 до FFFFFF шістнадцяткового коду. Вони безпечні у використанні, оскільки гарантують, що всі комп'ютери правильно відображатимуть колір при роботі з 256 палітрою кольорів.