Описание цветов в html
Добавил пользователь Дмитрий К. Обновлено: 19.09.2024
Шаблон:Глубина цвета Шаблон:HTML Существуют несколько основных способов представления цветов в вебе.
Содержание
Имена цветов в HTML [ ]
В спецификации [1] определены следующие 16 ключевых цветов (в данном контексте можно использовать как заглавные, так и строчные буквы:
Безопасная палитра Netscape [ ]
Названия цветов в [ ]
Язык выше. Дополнительно CSS 2.1 добавляет название 'orange' [2] :
[3] В модуле работы с цветом нежелательным и заменено на CSS3 UI System Appearance property, [4] [5] который впоследствии был удален из CSS3. [6]
Некоторые цвета можно задавать по их названию, используя в качестве значения название цвета на английском языке. Самые распространенные ключевые слова: 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%)
Задание цвета по шестнадцатеричному значению
Пример: Цвет HEX
Список широко распространённых цветов (название, HEX и RGB):
Коды цветов (фон) по насыщенности и оттенку: HTML Таблица цветов
Задачи
Задание цвета по его названию
Установите для заголовка второго уровня фон красного цвета, используя в качестве значения название цвета на английском языке.
Задача HTML:
Цвет HEX
Поменяйте цвет текста в параграфе на зеленый, используя шестнадцатеричное (HEX) значение цвета.
Разработчикам дизайнов сайтов, да и просто сайтостроителям, часто приходится подбирать какие-то цветовые гаммы, чтобы веб-сайт смотрелся красиво и удобно. Как известно, задать цвета в html можно с помощью трех способов (записаны в порядке понижения популярности их применения):
Как можно задать цвет в CSS
1. Задание цвета в виде шести цифр шестнадцатеричного кода
2. Задание цвета через его название
Самый простой и понятный способ задания цвета - просто написать его название. Сразу скажу, что не для каждого цвета есть своё название, а только для некоторых. Однако этих цветов так много, что, скорее всего, вы сможете подобрать подходящий вариант.
3. Задание цвета в виде трех десятичных чисел
Этот способ похож на предыдущий, однако имеет более сложный синтаксис: rgb (XYZ,XYZ,XYZ) , где X, Y, Z - любые десятичные цифры, но XYZ не должно превышать 255. Как и в предыдущем случае каждый из трех чисел отвечает за какой-то цвет (красный, зелёный, синий).
Ниже представлена таблица цветов html, в которой можно посмотреть его название, посмотреть как он выглядит, узнать RGB и html код цвета.
Числовые значения RGB, CMYK, HSV можно определить в программе Photoshop, открыв окно "Color Picker" (щелкните по квадратному значку палитры цветов) и выбирая цвет на редактируемом рисунке с помощью инструмента "Пипетка". Код цвета для таблицы CSS – можно сохранить в память буфера обмена, нажав правую кнопку мыши и выбрав пункт "Copy color as HTML". Для того, чтобы получить нужный цвет из таблицы каталога цветоимён – в интерфейсе "ColorPicker" указывается его известный код RGB (используется в Интернете, с выводом на монитор компьютера и экран мобильных устройств) или CMYK (применяется в полиграфии, при физической печати красками).
Для дизайнерской работы с фотографиями и различной графикой, необходимо иметь откалиброванное оборудование – монитор, принтер и сканер.
В программе Photoshop есть возможность заменить имеющийся на картинке цвет ближайшим из стандартной, для монитора, Web-палитры ("256 colors"), нажав на "аварийный кубик" (расположен рядом с кнопками OK, Cancel) в окне "Color Picker". При этом, возможна существенная разница исходной и полученной окраски.
Пробу цвета, для сравнения, можно делать прямо с этой страницы – с помощью спец. программ или в графическом редакторе, скопировав туда скрин с экрана (скриншот снимается сочетанием кнопок Alt + PrtSc в верхнем ряду клавиатуры).
В CSS3 введена модель RGB с альфа-каналом прозрачности (0.1 – минимальная видимость, 0.9 – максимальная):
style="color: rgba(255, 0, 0, 0.5);"
Для валидности (соответствие Интернет-стандартам W3C) HTML-кода вашего сайта, надо обозначить цвет и для текста и для фона элементов страницы:
Основные 16 HTML-цветов:
HTML-цвета в текстово-графической таблице с описанием,
числовыми значениями (в формате RGB, CMYK)
и название цвета на русском и английском языке (с переводом)
Новые дополнения и редкие цветоимена – отмечены знаком вопроса (?).
Рекомендации по настройке точной передачи цвета на экране – читать.
* Для быстрого поиска на странице – нажать клавиши "CTRL F", набрать, например – ИЗУМРУДН
или HEX-код 50C878
В результате поиска, на странице будет найдена, если имеется, расшифровка кода, с информацией по цвету.
Навигация по таблице (отсортировано по буквам алфавита):
Список некоторых редких / экзотических цветов в виде картинки:
Каталог названий цвета в русском языке (с дополнениями и пояснениями)
абрикосовый – оранжево-желтый, красновато-желтый.
амарантовый – сиренево-розовый, светло-лиловый.
английский газон – ярко-зеленый
анисовый лед – холодный зеленовато-желтый
апельсиновый – оранжевый, ярко-оранжевый.
апрельское небо – голубая лазурь
балтийский пляж – беловато-бежевый
балтийский туман – тусклый светло-серый
бархатное небо – насыщенный темно-синий
бархатный подсолнух – темно-золотистый
белая ночь – светловато-белесый
берестяная грамота – золотисто-коричневый
бесконечно синее небо – глубокий синий
болотные сумерки – зеленовато-бурый
брусничный дождь – прозрачный красновато-розовый
брызги шампанского – искрящийся светло-желтый
брюшко тропической рыбки – серебристо-белый
бусый – темный голубо-серый или серо-голубой
бушующий океан – сиренево-розовый с металлическим блеском
Веджвуд – цвет веджвудского фарфора; фиалковый, серовато-голубой
венская зелень – нежно-зеленый
весенняя проталина – темно-бурый
вечер на рейде – черно-синий
вечернее южное небо – ультрамарин.
вечерний синий – темно-синий.
вишнёвый – цвета поспевшей вишни, тёмно-красный.
водяная феерия – перламутрово-голубой.
волна и пена – сочетание белого и сине-серого.
восход в восточных садах – теплый ярко-розовый.
восход в сопках – холодный розовый.
высохшая саванна – выгоревший серо-желтый.
глаза пантеры – светящийся желто-зеленый.
гнедой окрас – близкий к рыжему.
голубое сердце – серебристо-голубой
голубое утро – нежный сиренево-голубой
голубой ангел – бледно-голубой
голубой Дунай – веселый голубой
голубой Терек – прозрачный голубой
голубой цвет Пикассо – грязновато-голубой (характерный для картин Пикассо)
горные вершины – сверкающий белый
горящий камин – огненно-красный
грин – бледно-зелёный цвет американских долларовых купюр.
грозовой перевал – темно-серый
Дельфт – цвет дельфтского фарфора: серовато-синий с лиловым оттенком
деним – цвет темной джинсовой ткани: серовато-синий
дождливый восход – розовато-серый
дождь (цвет дождя) – прозрачный сероватый
жемчужная пашня – цвет изморози на влажном весеннем поле: буровато-седой
закат в джунглях – жгучий желто-красный
закат в кедровых рощах – золотисто-медный
закат в песках Сахары – золотисто-оранжевый
запах розы – пастельно-розовый
заросли камыша – мягкий буро-зеленый
затмение – тревожный черно-серый
зеленый полумрак – темный бархатисто-зеленый
зимнее утро – холодный бледно-голубой
зимние сумерки – серовато-голубой
золотая дюна – светло-песочный с золотистым оттенком
золотая осень – багряно-желтый
золотое руно – переливающийся палево-рыжий
изумруд Нефертити – темно-изумрудный
изумрудные сумерки – бархатисто-зеленый
изумрудный гейзер – цвет сверкающих на солнце зеленых брызг воды
изумрудный шартрез – искрящийся темно-зеленый
испанское вино – цвет темного красного вина
Италийская ваза – терракотовый
Каирская роза – оранжево-розовый
калина красная – темно-алый
камышовая тишь – мягкий буро-зеленый
карельский туман – молочно-белесый
киноварный – цвет киновари, ярко-красный.
кипенный сад – кипенно-белый (цветы фруктового сада в разгар цветения).
кипящая лава – слепящий огненно-красный
клубничная весна – интенсивно-розовый с синевой
коралловое утро – пастельный морковно-розовый
космический голубой – глубокий голубой
космический синий – глубокий синий
красный в тонах Пикассо – багрово-красный (характерный для картин Пикассо)
красный от Монро – цвет алого платья Мерилин Монро
красный цвет Матисса – серовато-красный (характерный для картин Матисса)
крымская лазурь – цвет морской дали в ясный день: яркий зеленовато-голубой
купоросный – цвет раствора медного купороса, пронзительно-голубой
лава Везувия – огненный
лазуревый – устаревшая форма слова лазоревый.
латунный – оттенок темно-желтого.
ледяной шторм – темный сине-серый с блестками
лиловый негр – сиреневато-шоколадный
лондонский рассвет – светло-серый с розоватым оттенком
лунная лава – цвет старой застывшей лавы: голубоватый серо-желтоватый
лунное затмение – иссиня-черный
лунный камень – глянцевый молочно-белый
лунный свет – холодный бледно-голубоватый
луч заходящего солнца – нежный пурпурно-красный
Мейсен – цвет мейсенского фарфора: темно-голубой
малахитовый зал – насыщенный темно-зеленый
мартовские тени – голубовато-серый
метистовая ночь – темный фиолетово-синий
молоко матери – кремово-белый
монастырский белый – чистый аскетический белый
море после шторма – серовато-синий
мороз и солнце – сочетание солнечно-желтого и голубого
морские камни – глянцевый голубовато-бурый
московские сумерки – сизо-серый
муаровый (франц. moire) – с волнистым отливом; переливающийся цвет.
муравый, муравленый – цвет луговой травы.
невская вода – голубовато-стальной
нефрит Клеопатры – матово-зеленый
низкое небо – мрачно-серый
нильский закат – оранжевый
ноготковый – желтый с красным оттенком.
крымская ночь – глубокая чёрная бирюза.
ночь влюбленных – тёмно-бирюзовый.
ночная вода – темный агат
ночная река – маслянистый зелено-черный
ночная тайга – черно-зеленый
ночной луг – зеленовато-черный
нью-йоркский смог – бледно-серый
оксфордский синий – тёмно-васильковый.
опаловый – цвета молочного опала, матово-белый с радужным отливом.
орлецовый – цвета орлеца (красного родонита); вишнево-розовый.
осенний закат – тревожный багряно-красный
осенние сумерки – лиловато-серый
открытое небо – открытый голубой
отлив – грязноватый сине-зеленый
оттенок весны – нежно-оливковый
офисный зеленый – цвет зеленого бильярдного сукна
парижская грязь – булыжный
пасхальный красный – охристо-алый
патина Исаакия – салатовый, зеленый с седым налетом
пепел розы – розовато-серый
персидский голубой – голубой с лиловым оттенком
песчаная буря – желтовато-серый
петербургский рассвет – однообразный тоскливо-серый с малиновым проблеском
подводное течение – темная морская волна
подмосковный загар – средне-смуглый
пожар в джунглях – аналог англ. Hotskins: на черном фоне полыхают оранжевые, алые и желтые краски
поздняя осень – темно-бурый
поземка – холодный сизо-белый
полночная синь – черно-синий.
порфировый – цвет пурпурной мантии,одеваемой монархом в торжественных случаях.
предпасхальная бирюза московского неба – ярко-голубой.
прерия – выгоревший зеленый.
пряный бальзам – коричнево-красный.
пучина океана – сине-черный.
цвет пьяной вишни – сероватый бордо.
ранние сумерки – голубовато-серый.
ранняя весна – прозрачный светло-голубой.
ранняя осень – золотисто-зеленый.
рассвет в ущелье – розовато-серый.
рассвет на Валдае – красно-розовый.
рассвет на Эльбрусе – светло-голубой с красным и белым.
редмахагони – цвет красного дерева.
рубин Моголов – глубокий малиновый
саванна – выгоревший желто-зеленый
свежее утро – нежный розовато-голубой.
свет утра – розово-серый.
северное сияние – переливающийся голубовато-розовый.
северный восход – малиновый.
седое алоэ – белесый зеленый.
седой кирпич – кирпично-красный с белесым налетом.
серебристо-полярный – серебристый голубовато-белый.
серый прибой – серовато-голубой.
синева южного неба – бархатно-синий.
сиреневые сумерки – сиренево-серый.
сиреневый дождь – прозрачный сиренево-серый.
ситец летнего неба – ярко-голубой.
скандинавские фьорды – мрачный синевато-серый.
слоеное мороженое – сочетание молочно-белого, розового и светло-коричневого.
смальта (или шмальта) – ярко-синий.
смарагдовый сомик – глянцевый сочно-зеленый.
смог над городом – светлый графитно-серый
смуглый мед – цвет светлого гречишного меда: золотисто-коричневый
солнечная роса – перламутрово-желтый
солнце в пустыне – слепящий желто-белый
старинные румяна – пунцово-красный
старое бургундское – темно-красный
старый аквариум – мутно-зеленый
студеный ручей – стальной голубой
сургучный – цвет почтового сургуча, коричневый.
таежное урочище – цвет темно-зеленой хвои
таежный омут – зелено-черный
таинственный лес – мрачный серо-зеленый
терракотовый – цвета терракоты, тёмно-рыжий, кирпично-красный, медно-красный.
тихая заводь – цвет темно-зеленой тины
туман у импрессионистов – серебристо-розовый
тусклый день – тусклый серо-голубой
утренние скалы – розовато-серый
утренние сумерки – голубовато-серый
утренний асфальт – розоватый белесо-серый
утренний плес – розово-песочный
утренний смог – полупрозрачный светло-серый
утренняя дымка – прозрачный дымчато-голубой
уходящее солнце – красно-золотой
флорентийская эмаль – яркий индиго
флотский синий – темно-синий
французский беж – изысканный бежевый
хмурое утро – тревожно-серый
холодное небо – светло-голубой
цветущая сакура – бледно-сиреневый.
черная слеза – блестящий черный
чернила осьминога – темно-фиолетовый
черные сумерки – бархатный черный.
чесучовый – цвета чесучи, желтовато-песочной шелковой ткани.
шабо – чёрный какао.
шафранный – тёмно-жёлтая расцветка.
шотландский красный – чистокрасный.
шубка крота – чёрный кофе.
южный загар – шоколадно-смуглый
южная лазурь – глубокий синий
южная ночь – бархатисто-черный
янтарный – тёмно-жёлтый, медовый.
яркая лазурь предмайского неба – яркий небесно-голубой
ясписовый (греч.Iaspis'яшма') – от песочного до ярко-красного.
яхонтовый – цвет рубина или сапфира, чаще рубина (корунд тёмно-красного цвета).
Для комбинаций окраски, используется специальная терминология. Например, пегий окрас – означает распределение раскраски в виде, более-менее, однородных цветовых пятен.
Рекомендации по настройке цветопередачи (точной передачи цвета) и калибровке ЭЛТ и ЖК мониторов:
Профиль цветности по "умолчанию" – поставить sRGB или "родной", идущий в комплекте с монитором, после чего компьютер должен быть перезагружен.
Примечание: не все программы поддерживают технологию управления цветом по профилю.
Тестовые образцы на бумаге (для калибровки "с листа") – должны быть чистые и не помятые. В качестве принтерной распечатки (оттиска) – выбираются полноцветные изображения.
Сканирование с тестового бумажного образца ("оригинала") – лучше заказать в проф. студии, на хорошем сканере (чтобы сами профессионалы посмотрели на своём студийном мониторе и убедились, что цветопередача на скане идеальна).
Файл с изображением картинки и оригинал на бумаге – это и есть тестовый комплект для оперативной калибровки своего монитора (любого типа – и трубочного ЭЛТ и ЖК).
ЭЛТ монитор (предпочтителен в профессиональной дизайнерской работе), перед настройкой, нужно сначала прогреть в течение минимум 10-15 минут.
Перед цветовой калибровкой монитора необходимо обязательно провести установку уровня яркости и контрастности.
Есть смысл отдельно калибровать для разных условий работы – естественное освещение, искуственный свет и другие внешние условия, типичные для вашего рабочего места.
Открывать файл с картинкой тестового скана и смотреть – в Photoshop на сером фоне. Смотреть при масштабе изображения 100%, то есть сомасштабно с оригиналом на бумаге. Источник внешнего освещения бумажного тестового образца – дневное солнечное (рассеяный свет, без солнечных зайчиков, бликов и отсветов в поле зрения), при хорошей, ясной погоде на улице. Если рядом окно – не должно быть прямых солн-х лучей. В помещении, перед глазами, нежелательны резкие цветовые контрасты. Сверять с оригиналом – располагая рядом.
Для ЖК мониторов, обычно, рекомендуется оставлять их собственную цветовую температуру точки белого.
Простейший способ откалибровать монитор "на глазок" – отрегулировать его яркость (для ЭЛТ мониторов ставится минимальной, при этом – чёрный цвет не должен быть серым) и контраст (хорошая резкость, чёткие границы при сохранении видимости мелких деталей).
Настройка гамма-коррекции – для ЭЛТ мониторов G ~ 2.2 , для новых моделей ЖК / LCD мониторов G ~ 1,4 – 2,2
Если нужно максимальное качество настройки, то можно заказать специалисту профессиональную программно-аппаратную калибровку применяемых устройств (монитора и принтера) с созданием персональных цветовых профилей, конкретно, для ваших условий работы.
Лампы подсветки монитора, со временем, выгорают, поэтому, калибровку надо периодически (в зависимости от требований к качеству цветопередачи и интенсивности эксплуатации оборудования) проверять параметры и повторять настройку.
Читайте также: