Цвет 0 11. Учeбник HTML. Цвета RGB. Цвета безопасной палитры. Использование безопасной палитры цветов
В web-дизайне существует несколько способов представления цвета
HEX – шестнадцатеричная система представления цвета по основанию 16. Для данной системы используются арабские десятичные цифры от 0 до 9 и латинские буквы от A до F для дополнения цифрового количества до 16. Для web-дизайна взяты 16 основных (ключевых) цветов, так называемый шестнадцатеричный код цвета #RRGGBB, где каждая пара отвечает за свою долю цвета: RR – красный, GG – зеленый и BB – синий. Каждая доля цвета находится в диапазоне от 00 до FF.
Два других представления цвета в web-дизайне это: в виде RGB(*,*,*), где каждая «*» доля цвета представлена десятичными цифрами от 0 до 255 и по наименованиям цвета на английском языке.
При создании цветного изображения главной проблемой является правильная передача цветов на разных типах компьтеров, мониторов и браузеров. Если браузер не может правильно отобразить цвет, то он подбирает похожий или смешивает несколько цветов. А иногда может заменить на какой-то совсем другой цвет.
Таблица 16 основных цветов , которые используются во всех браузерах
| Название | Цвет | Hex | (RGB) |
| Aqua (морская волна) | #00FFFF | (000,255,255) | |
| Black (черный) | #000000 | (000,000,000) | |
| Blue (голубой) | #0000FF | (000,000,255) | |
| Fuchsia (фуксин) | #FF00FF | (255,000,255) | |
| Gray (серый) | #808080 | (128,128,128) | |
| Green (зеленый) | #008000 | (000,128,000) | |
| Lime (ярко-зеленый) | #00FF00 | (000,255,000) | |
| Maroon (темно-бордовый) | #800000 | (128,000,000) | |
| Navy (темно-синий) | #000080 | (000,000,128) | |
| Olive (оливковый) | #808000 | (128,128,000) | |
| Purple (фиолетовый) | #800080 | (128,000,128) | |
| Red (красный) | #FF0000 | (255,000,000) | |
| Silver (серебряный) | #C0C0C0 | (192,192,192) | |
| Teal (серо-зеленый) | #008080 | (000,128,128) | |
| White (белый) | #FFFFFF | (255,255,255) | |
| Yellow (желтый) | #FFFF00 | (255,255,000) |
Таблица пурпурного цвета и его оттенков
| Название | Цвет | Hex | (RGB) |
| Magenta (пурпурный) | #FFCBDB | (255,203,219) | |
| Magenta (пурпурный) | #FF0099 | (255,000,153) | |
| Magenta (маджента) | #F95A61 | (249,090,097) | |
| Fuchsia (фуксия) | #FF00FF | (255,000,255) | |
| Мовеин (анилиновый пурпур) | #EF0097 | (239,000,151) | |
| Salmon pink (оранжево розовый) | #FF91A4 | (255,145,164) | |
| Cenise (оттенок пурпурного) | #DE3163 | (153,149,140) | |
| Aubergine Eggplant (баклажановый) | #990066 | (153,000,132) | |
| Lavender blush (розовато-лавандовый) | #FFF0F5 | (255,240,245) | |
| Lilac (сиреневый) | #C8A2C8 | (200,162,200) | |
| Magenta (маджента) | #FF008F | (255,000,143) | |
| Orchid (орхидея) | #DA70D6 | (218,112,214) | |
| Red-violet (фиолетово-красный) | #C71585 | (199,021,133) | |
| Sanguine (сангиновый) | #92000A | (146,000,010) | |
| Thistle (оттенок пурпурного) | #D8BFD8 | (185,211,238) | |
| Violet-eggplant (оттенок пурпурного) | #991199 | (153,017,153) | |
| Rosa vivo (насыщено розовый) | #FF007F | (255,000,127) | |
| Lavender-rose (оттенок пурпурного) | #FBA0E3 | (108,123,139) | |
| Mountbatten pink (розовый Маунбаттена) | #997ABD | (153,122,141) |
Таблица серого цвета и его оттенков
| Название | Цвет | Hex | (RGB) |
| Gray (Серый) | #808080 | (128,128,128) | |
| Gray (Серый) | #bebebe | (190,190,190) | |
| (Серый-оттенок) | #858585 | (133,133,133) | |
| Gray33 (Серый-33) | #545454 | (084,084,084) | |
| (Серого шифера) | #708090 | (112,128,144) | |
| (Кварцевый) | #99958с | (153,149,140) | |
| (Светло-серый) | #bbbbbb | (187,187,187) | |
| (Серебристый) | #c0c0c0 | (192,192,192) | |
| (Серо-белый) | #f0f0f0 | (240,240,240) | |
| (Бороды Абдель-Керима) | #e0e0e0 | (224,224,224) | |
| LightGray (Серый светлый) | #d3d3d3 | (211,211,211) | |
| LightStateGray () | #778899 | (119,136,153) | |
| StateGray-1 (Бледно-васильковый1) | #c6e2ff | (198,226,255) | |
| StateGray-2 (Бледно-васильковый2) | #b9d3ee | (185,211,238) | |
| StateGray3 () | #9fb6cd | (159,182,205) | |
| StateGray4 () | #6c7b8b | (108,123,139) |
К сожалению, вкусовые ощущения на сайте отобразить пока невозможно. Но это можно сполна компенсировать с помощью цветовой гаммы. Ведь цвета 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 этот инструмент реализован немного иначе:
Насыщенность каждого цвета в генераторе задается с помощью специальных ползунков. Визуально оттенок отображается цветом рамки и прямоугольника с левой стороны. Внизу в 3 полях отображается цветовой код в основных форматах.
Но генератор цветов доступен не только на специализированных сайтах. Подобным инструментом снабжены почти все графические редакторы. Например, Photoshop :
Техника безопасности при работе с цветом
А было это давно, еще в эпоху видеокарт, поддерживающих всего 256 цветов. В те далекие времена операционные системы могли без искажений отображать лишь определенное количество восьми битных оттенков.
Тогда была выведена великая таблица безопасных цветов. В ней указывалось 216 оттенков, которые могли быть отображены без искажения в любом из браузеров того времени. И по сей день эта «великая рукопись » еще доступна на некоторых ресурсах:
В наше время все изменилось. Поэтому все правила техники безопасности при работе с цветом в html полностью аннулируются. Ведь современное компьютерное железо поддерживает более 16 миллионов различных оттенков. И 216 безопасных цветов канули в лету.
Эти данные полностью подтверждаются статистикой. Судя по ней, в 2014 году всего лишь 0.5% пользователей имеют компьютеры, поддерживающие лишь 256 оттенков.
Основы цветовой гармонии
Природным гармоничным чувством вкуса наделены далеко не все из нас. Поэтому правильный подбор цвета может стать настоящим испытанием. Но, хвала науке, даже цветовую гармонию ей удалось описать в виде нескольких схем. Все они основаны на использовании цветового круга. Схемы гармоничного подбора цветов в html .
На этой странице приведена таблица с ключевыми словами, которые можно использовать для обозначения цветов в таких языках 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 .
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Модуль 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 цвета и способы их указания
В языке 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, вы со временем освоитесь и сами сможете подбирать себе цвет, какой только захотите.