Синій rgb колір. Колір у стилях можна задавати різними способами: за шістнадцятковим значенням, за назвою, у форматі RGB, RGBA, HSL, HSLA
Як відомо, колір може впливати на стан людини: як психічний, так і фізичний. Щодня, переглядаючи сайти в інтернеті, очі оцінюють мільйони кольорів та відтінків. Веб-дизайнер, який ознайомлений із психологією кольору, може керувати настроєм відвідувача для досягнення будь-яких цілей.
Це пов'язано з тим, деякі відтінки заспокоюють, а деякі навпаки – збуджують. Далі йтиметься про те, як синтезується і відображається колір за допомогою комп'ютерної техніки.
RGB – це колірна модель, що представляє метод отримання всіх кольорів та їх відтінків шляхом змішування у різних пропорціях трьох головних компонентів, якими є:
- червоний колір ( Red);
- зелений колір ( Green);
- синій колір ( Blue).
Звідси і походить скорочена назва RGB. Дані кольору неспроста обрані основними: причиною є фізіологія сітківки людського ока, і те, як вона сприймає їх:
RGB-модель на сьогоднішній день залишається найпопулярнішою та застосовується для відтворення кольорів на екранах телевізорів та комп'ютерних моніторах. Так як виробники наділяють свої вироби різними характеристиками, в 1996 була створена єдина система синтезу кольорів на основі RGB під назвою sRGB, над якою спільно попрацювали компанії Microsoft і HP.
Числове уявлення кольору
Як було сказано раніше, RGB кольори формуються шляхом змішування основних. Для опису інтенсивності кожного їх прийняли схему, у якій колір представляється діапазоном 0-255 (8 біт ), що у шістнадцятковій системі обчислення відповідає 00-FF .
Тобто, основні кольори матимуть такий вигляд:
- Червоний - RGB (255,0,0);
- Зелений - RGB (0,255,0);
- Синій - RGB (0,0,255);
Якщо ж інтенсивність кольору набуває значення менше 255, то виходять різні відтінки червоного, зеленого та синього. Далі наведено таблицю їх градації, а також представлені шістнадцяткові значення кожного з відтінків:
Таблиці кольорів RGB
Звичайно, крім градацій основних кольорів, існують змішані, і їх кількість досить велика. Тому була створена таблиця RGB-квітів, в якій представлені всі існуючі відтінки, а також наведені їх назви та числові уявлення ( у десятковій та шістнадцятковій формі).
Ознайомитись з нею можна тут. Ця таблиця дуже полегшує життя веб-дизайнерам, оскільки за кілька секунд можна знайти необхідний відтінок і дізнатися його числове уявлення.
Безпечна палітра RGB кольорів
Однак у якийсь момент існувала проблема відображення кольорів у різних браузерах, і для її вирішення була скомпонована так звана "безпечна" палітра RGB кольорів, які були виведені математичними обчисленнями.
Коли браузер не може коректно відобразити колір, він намагається отримати близький до необхідного шляхом змішування сусідніх кольорів, і швидше за все результат буде абсолютно неприйнятним:
Використовуючи коди кольорів RGB з даної панелі, веб-розробник може не боятися за відображення кольорів на сторінках свого сайту під час перегляду за допомогою різних браузерів, різних платформ і моніторів. Хоча на даний момент таблиця безпечних кольорів втрачає свою актуальність ( технічний прогрес все ж таки не стоїть на місці), при її використанні можна, як то кажуть, спати спокійно.
Золотий колір в моделі RGB
Вперше слово «золотий» було використано на початку XIV століття для опису кольору хімічного елемента під назвою Aurum – золото. У моделі RGB золотий колір представлений такими числовими значеннями:
- RGB (255, 215, 0) - десятирічна система;
- HEX #FFD700 – шістнадцяткова система.
Бежевий колір у RGB моделі
Бежевий колір займає досить значне місце в історії, нехай він і не найвиразніший. Багато пам'яток культури, особливо античні скульптури, були виготовлені зі стеатиту і мильного каменю, що мають бежевий відтінок. У моделі RGB бежевий колір має такі числові уявлення.
На цій сторінці наведено таблицю з ключовими словами, які можна використовувати для позначення кольорів у таких мовах 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.
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Кольори HTML
HTML кольори та способи їх вказівки
У мові HTML, існує два способи вказати колір:
1. За допомогою імені кольору,
2. За допомогою системи RGB, де кольори задані у шістнадцятковому форматі.
Ім'я кольору
Ім'я кольори в HTMLвказується англійськими словами, наприклад, red або green . Ім'я кольору виступає як значення атрибута HTML-тегу. Імен квітів дуже багато, у цій статті ми розглянемо лише основні з них.
Зазвичай для завдання кольору, у мові HTML використовують два атрибути:
1. Атрибут color="ім'я_колір" - колір тексту,
2. Атрибут bgcolor="ім'я_колір" - колір фону.
Приклади використання атрибутів кольорів:
color="red" - призначаємо тексту червоний колір,
bgcolor = "green" - призначаємо фону зелений колір.
Таблиця основних імен кольорів HTML:
| Ім'я кольору | Його вигляд | Переклад |
|---|---|---|
| white | Білий | |
| ivory | Слонова кістка | |
| silver | Срібний | |
| gray | Сірий | |
| black | Чорний | |
| maroon | Темно-бордовий | |
| red | червоний | |
| orange | Помаранчевий | |
| gold | Золотий | |
| yellow | Жовтий | |
| olive | Оливковий | |
| lime | Лайм | |
| green | Зелений | |
| aqua | Морська хвиля | |
| blue | Синій | |
| navy | Наві | |
| teal | Бірюзовий | |
| fuchsia | Фуксиновий | |
| purple | Пурпурний |
Шістнадцяткова система числення
У повсякденному житті ми користуємося десятковою системою числення від 0 до 9 . Програмісти та дизайнери часто використовують шістнадцяткову систему числення від 0 до 15 де:
10 = A
11 = B
12 = C
13 = D
14 = E
15 = F
Практично кожен колір і відтінок видимий нашому зору можна записати в шістнадцятковій системі, наприклад червоний колір red (червоний) в шістнадцятковій системі дорівнюватиме ff0000
color="red" - червоний колір, на ім'я,
color="#ff0000" - червоний колір, в шістнадцятковій системі числення.
У мові HTML, перед шістнадцятковим числом, значення атрибута ставлять знак решітки #
RGB
Перед тим як почати вказувати кольори в HTML за допомогою шістнадцяткової системи числення, вам спочатку потрібно дізнатися про таке поняття як R G B
RGB- Це скорочення від слів R ed G reen B lue (Червоний Зелений Синій).
Колір у HTML, записаний у шістнадцятковій системі, складається з трьох блоків чисел 00 00 00 , де кожен блок відповідає за один із кольорів RGB, перший блок за червоний колір, другий за зелений колір, третій за синій колір. Числа можуть змінюватись від 00 до ff.
Де, ff — це 255 у десятковій системі числення.
Схема RGB:
Red - від 00 до ff
Green - від 00 до ff
Blue - від 00 до ff
У результаті отримуємо число із шести цифр 000000 , де перші два числа відповідають за червоний колір, другі два числа відповідають за зелений колір, треті два числа відповідають за синій колір.
Якщо ми хочемо отримати червоний колір, то пишемо ff0000, зелений колір 00ff00, синій колір 0000ff. Наприклад, якщо хочемо отримати темно-червоний колір, то потрібно зменшити перший блок чисел і замість ff (який дорівнює десятковій системі числення 255), записати наприклад 96 (який дорівнює десятковій системі числення 150).
Наведемо для наочності, приклади кольорів та їх шістнадцятковий код:
Змішуємо кольори в HTML
Якщо ви в школі не пропускали заняття з малювання, то пам'ятайте, що при рівномірному змішуванні червоного і зеленого кольору можна отримати жовтий,
при додаванні до червоного кольору трохи зеленого можна одержати помаранчевий і т.д.
Кольори, задані за допомогою шістнадцяткової системи числення та RGB, також можна змішувати:
Експериментуючи з шістнадцятковою системою числення і RGB, ви з часом освоїтеся і зможете підбирати собі колір, який тільки захочете.
Модуль CSS color докладно описує значення, які дозволяють авторам визначати кольори та непрозорість html-елементів, а також значення якості color.
Властивість color
1. Пріоритетні кольори: якість color
Властивість задає колір шрифту за допомогою різних систем передачі кольорів. Властивість визначає колір текстового вмісту елемента. Крім того, воно використовується для надання потенційного непрямого значення (currentColor) для будь-яких інших властивостей, які набувають значення кольору.
Властивість успадковується.
2. Значення кольору
2.1. Основні ключові слова
Список основних ключових слів включає наступні значення:
| Назва | HEX | RGB | Колір |
|---|---|---|---|
| black | #000000 | 0,0,0 | |
| silver | #C0C0C0 | 192,192,192 | |
| gray | #808080 | 128,128,128 | |
| white | #FFFFFF | 255,255,255 | |
| maroon | #800000 | 128,0,0 | |
| red | #FF0000 | 255,0,0 | |
| purple | #800080 | 128,0,128 | |
| fuchsia | #FF00FF | 255,0,255 | |
| green | #008000 | 0,128,0 | |
| lime | #00FF00 | 0,255,0 | |
| olive | #808000 | 128,128,0 | |
| yellow | #FFFF00 | 255,255,0 | |
| navy | #000080 | 0,0,128 | |
| blue | #0000FF | 0,0,255 | |
| teal | #008080 | 0,128,128 | |
| aqua | #00FFFF | 0,255,255 |
Назви кольорів не чутливі до регістру.
Синтаксис
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
Символи пропуску допускаються навколо числових значень.
У HTML колір можна задавати трьома способами:
Завдання кольору в HTML за його назвою
Деякі кольори можна задавати за їхньою назвою, використовуючи як значення назву кольору англійською мовою. Найпоширеніші ключові слова: black (чорний), white (білий), red (червоний), green (зелений), blue (синій) та ін.
Колір тексту – червоний
Найбільш популярні кольори стандарту Консорціуму Всесвітньої павутини (World Wide Web Consortium, W3C):
| Колір | Назва | Колір | Назва | Колір | Назва | Колір | Назва |
|---|---|---|---|---|---|---|---|
| Black | Gray | Silver | White | ||||
| Yellow | Lime | Aqua | Fuchsia | ||||
| Red | Green | Blue | Purple | ||||
| Maroon | Olive | Navy | Teal |
Приклад використання різних колірних назв:
Приклад: завдання кольору за назвою
- Спробуй сам »
Заголовок на червоному тлі
Заголовок на помаранчевому фоні
Заголовок на фоні лайм
Білий текст на блакитному тлі
Заголовок на червоному тлі
Заголовок на помаранчевому фоні
Заголовок на фоні лайм
Білий текст на блакитному тлі
Завдання кольору за допомогою RGB
При відображенні різних кольорів на моніторі за основу береться палітра RGB. Будь-який колір отримують, змішуючи три основні: R - червоний (red), G - зелений (green), В - синій (blue). Яскравість кожного кольору задається одним байтом і, отже, може набувати значення від 0 до 255. Наприклад, RGB (255,0,0) відображається як червоний, так як червоний встановлюється в його найвище значення (255), а інші встановлені в 0 Також можна задавати колір у відсотковому відношенні. Кожен із параметрів позначає рівень яскравості відповідного кольору. Наприклад: значення rgb(127, 255, 127) і rgb(50%, 100%, 50%) будуть задавати однаковий зелений колір середньої насиченості:
Приклад: Завдання кольору за допомогою RGB
- Спробуй сам »
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
Завдання кольору за шістнадцятковим значенням
Значення R G Bтакож можуть бути вказані за допомогою шістнадцяткових (HEX) значень кольору у формі: #RRGGBB, де RR (червоний), GG (зелений) та BB (синій) є шістнадцятковими значеннями від 00 до FF (так само, як десяткове 0-255) . Шістнадцяткова система, на відміну десяткової системи, базується, як випливає з її назви, на числі 16. Шістнадцяткова система використовує такі знаки: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, А, В, З, D, E, F. Тут цифри від 10 до 15 замінено латинськими літерами. Числа більше 15 у шістнадцятковій системі являють собою об'єднання двох знаків в одне значення. Наприклад, найбільшому числу 255 у десятковій системі відповідає найвище значення FF у шістнадцятковій системі. На відміну від десяткової системи, перед шістнадцятковим числом ставлять символ решітки # , наприклад, #FF0000 відображається як червоний колір, оскільки червоний встановлюється у його найвище значення (FF), а решті кольорів встановлено мінімальне значення (00). Знаки після решітки символу # можна набирати як великими, так і малими. Шістнадцяткова система дозволяє використовувати скорочену форму виду #rgb, де кожен символ рівнозначний подвоєному. Так запис #f7O слід розцінювати як #ff7700.
Приклад: Колір HEX
- Спробуй сам »
червоний: #FF0000
зелений: #00FF00
синій: #0000FF
червоний: #FF0000
зелений: #00FF00
синій: #0000FF
червоний+зелений=жовтий: #FFFF00
червоний+синій=фіолетовий: #FF00FF
зелений+синій=блакитний: #00FFFF
Список широко поширених кольорів (назва, HEX та RGB):
| Англійська назва | Російська назва | Зразок | HEX | RGB | ||
|---|---|---|---|---|---|---|
| Amaranth | Амарантовий | #E52B50 | 229 | 43 | 80 | |
| Amber | Бурштиновий | #FFBF00 | 255 | 191 | 0 | |
| Aqua | Синьо-зелений | #00FFFF | 0 | 255 | 255 | |
| Azure | Блакитний | #007FFF | 0 | 127 | 255 | |
| Black | Чорний | #000000 | 0 | 0 | 0 | |
| Blue | Синій | #0000FF | 0 | 0 | 255 | |
| Bondi Blue | Вода пляжу Бонді | #0095B6 | 0 | 149 | 182 | |
| Brass | Латунний | #B5A642 | 181 | 166 | 66 | |
| Brown | Коричневий | #964B00 | 150 | 75 | 0 | |
| Cerulean | Блакитний | #007BA7 | 0 | 123 | 167 | |
| Dark spring green | Темний весняно-зелений | #177245 | 23 | 114 | 69 | |
| Emerald | Смарагдовий | #50C878 | 80 | 200 | 120 | |
| Eggplant | Баклажановий | #990066 | 153 | 0 | 102 | |
| Fuchsia | Фуксія | #FF00FF | 255 | 0 | 255 | |
| Gold | Золотий | #FFD700 | 250 | 215 | 0 | |
| Gray | Сірий | #808080 | 128 | 128 | 128 | |
| Green | Зелений | #00FF00 | 0 | 255 | 0 | |
| Indigo | Індіго | #4B0082 | 75 | 0 | 130 | |
| Jade | Нефритовий | #00A86B | 0 | 168 | 107 | |
| Lime | Лайм | #CCFF00 | 204 | 255 | 0 | |
| Malachite | Малахітовий | #0BDA51 | 11 | 218 | 81 | |
| Navy | Темно синій | #000080 | 0 | 0 | 128 | |
| Ochre | Охра | #CC7722 | 204 | 119 | 34 | |
| Olive | Оливковий | #808000 | 128 | 128 | 0 | |
| Orange | Помаранчевий | #FFA500 | 255 | 165 | 0 | |
| Peach | Персиковий | #FFE5B4 | 255 | 229 | 180 | |
| Pumpkin | Гарбуз | #FF7518 | 255 | 117 | 24 | |
| Purple | Фіолетовий | #800080 | 128 | 0 | 128 | |
| Red | червоний | #FF0000 | 255 | 0 | 0 | |
| Saffron | Шафрановий | #F4C430 | 244 | 196 | 48 | |
| Sea Green | Зелене море | #2E8B57 | 46 | 139 | 87 | |
| Swamp green | Болотяний | #ACB78E | 172 | 183 | 142 | |
| Teal | Синьо-зелений | #008080 | 0 | 128 | 128 | |
| Ultramarine | Ультрамариновий | #120A8F | 18 | 10 | 143 | |
| Violet | Фіолетовий | #8B00FF | 139 | 0 | 255 | |
| Yellow | Жовтий | #FFFF00 | 255 | 255 | 0 | |
Коди кольорів (фон) за насиченістю та відтінком.
