HTML-цвета
Перейти к навигацииПерейти к поиску
Веб-цвета — цвета, используемые при отображении веб-страниц, а также методы описания и определения этих цветов.
Существуют несколько основных способов их представления:
- В виде #123ABC. Представление в виде трёх пар шестнадцатеричных цифр, где каждая пара отвечает за свой цвет:
- Представление ключевыми словами, например green, black. Во избежание случаев, когда указанное ключевое слово «не понимается» браузером, следует использовать лишь небольшой набор основных цветов, используемых во всех браузерах.
- В виде RGB(*,*,*), где «*» — числа от 0 до 255, обозначающих количество соответствующего цвета (красный, зелёный, синий) в получаемом.
- Возможен и RGBA(*,*,*,*), где первые 3 «*» — компоненты цвета, задающиеся в диапазоне 0 до 255, а последняя «*» — уровень непрозрачности (альфа-канал), задающийся рациональными числами от 0 до 1.
Имена цветов в HTML
В спецификации HTML 4.01[1] определены следующие 16 ключевых цветов (в данном контексте можно использовать как заглавные, так и строчные буквы):
| Цвет | Код | Название | Цвет | Код | Название | Цвет | Код | Название | Цвет | Код | Название |
|---|---|---|---|---|---|---|---|---|---|---|---|
| #00ffff | aqua | морская волна, cyan | #000000 | black | чёрный | #0000ff | blue | синий | #ff00ff | fuchsia | фуксия |
| #808080 | gray | серый | #008000 | green | зелёный | #00ff00 | lime | ярко-зелёный | #800000 | maroon | тёмно-бордовый |
| #000080 | navy | тёмно-синий | #808000 | olive | оливковый | #800080 | purple | пурпурный | #ff0000 | red | красный |
| #c0c0c0 | silver | серебряный | #008080 | teal | сине-зелёный | #ffffff | white | белый | #ffff00 | yellow | жёлтый |
^В спецификации используются английские названия цветов.
Безопасная палитра Netscape
В эпоху 256-цветных видеокарт широко применялась так называемая «безопасная палитра Netscape» — однородная палитра 6×6×6. В truecolor у безопасных цветов все три компонента — R, G и B — равняются 00, 33, 66, 99, CC и FF. Браузер Netscape гарантировал, что эти цвета будут отображены без приближения или растрирования.
Другими словами, 216 цветов стандартной 16-цветовой палитры и палитры 6×6×6 были наиболее предпочтительными для цвета изображения и фона.
К концу 1990-х годов, с полным исчезновением 8-битного цвета с рабочих столов ОС, это требование исчезло. Тем не менее, Adobe Photoshop и поныне оснащён опцией «Только Web-цвета» (англ. Only Web Colors).
Названия цветов в X11
|
|
|
- Слово «Gray» в названиях серых цветов не нужно писать как «Grey», так как ряд браузеров интерпретируют это как «Green»[]
Цвета CSS
Язык Cascading Style Sheets определяет все цвета HTML4 и X11, а также такие[2]:
| Color | Name | Hex (RGB) | Red (RGB) | Green (RGB) | Blue (RGB) | Hue (HSL/HSV) | Satur (HSL) | Light (HSL) | Satur (HSV) | Value (HSV) | Alias |
|---|---|---|---|---|---|---|---|---|---|---|---|
| orange | #FFA500 | 100% | 65% | 0% | 39° | 100% | 50% | 100% | 100% |
| Color | Name | Hex (RGB) | Red (RGB) | Green (RGB) | Blue (RGB) | Hue (HSL/HSV) | Satur (HSL) | Light (HSL) | Satur (HSV) | Value (HSV) | Alias |
|---|---|---|---|---|---|---|---|---|---|---|---|
| RebeccaPurple | #663399 | 40% | 20% | 60% | 270° | 50% | 40% | 67% | 60% |
Цвет назван в честь Ребекки, дочери Эрика Мейера, пропагандиста и одного из разработчиков CSS. Она умерла от опухоли мозга в возрасте 6 лет.
CSS 2, SVG и CSS 2.1 также позволяют использование системных цветов — имён цветов, значения которых определяются операционной системой, например, использование системного цвета для подсвеченного текста или фона для управляющих элементов. Это позволяет web-разработчикам адаптировать контент страницы к стилю операционной системы пользователя.[3] В модуле работы с цветом CSS3 использование системных цветов объявлено нежелательным и заменено на CSS3 UI System Appearance property,[4][5] который впоследствии был удален из CSS3.[6]
Спецификация CSS3 также вводит цветовую модель HSL:
/* имя цвета */
p { color: red } /* Базовый список цветов */
p { color: blanchedalmond } /* Расширенный список цветов (X11) */
/* модель RGB */
p { color: #F00}/* #rgb */
p { color: #FF0000 } /* #rrggbb */
p { color: rgb(255,0,0)} /* целое в диапазоне 0 — 255 */
p { color: rgb(100%,0%, 0%) } /* число с плавающей точкой 0.0% — 100.0% */
/* модель RGB с альфа-каналом, введена в CSS3 */
p { color: rgba(255, 0, 0, 0.5) } /* 0.5 прозрачность, полупрозрачность */
/* модель HSL, введена в CSS3 */
p { color: hsl(0, 100%, 50%) } /* красный (red) */
p { color: hsl(120, 100%, 50%) } /* зелёный (green) */
p { color: hsl(120, 100%, 25%) } /* тёмно-зелёный (dark green) */
p { color: hsl(120, 100%, 75%) } /* светло-зелёный (light green) */
p { color: hsl(120, 50%, 50%) } /* пастельный зелёный (pastel green) */
/* модель HSL с альфа-каналом */
p { color: hsla(120, 100%, 50%, 1) } /* зелёный (green) */
p { color: hsla(120, 100%, 50%, 0.5) } /* полупрозрачный зелёный */
p { color: hsla(120, 100%, 50%, 0.1) } /* очень прозрачный зелёный */
Примечания
- ↑ HTML 4.01 Specification section 6.5 «Colors». Дата обращения: 9 ноября 2016. Архивировано 14 ноября 2016 года.
- ↑ CSS 2.1 Specification: Syntax and basic data types: Colors (8 сентября 2009). Дата обращения: 21 декабря 2009. Архивировано 7 февраля 2013 года.
- ↑ User interface — System colors. Дата обращения: 27 января 2013. Архивировано 28 марта 2008 года.
- ↑ CSS3 Color Module — CSS2 System Colors. Дата обращения: 27 января 2013. Архивировано 29 ноября 2017 года.
- ↑ CSS3Basic User Interface Module, W3C Candidate Recommendation 11 May 2004: System Appearance. Дата обращения: 27 января 2013. Архивировано 26 января 2013 года.
- ↑ CSS Basic User Interface Module Level 3 (CSS3 UI), W3C Working Draft 17 January 2012: List of substantial changes Архивная копия от 1 декабря 2010 на Wayback Machine, «System Appearance has been dropped, including appearance values & property, and system fonts / extension of the ‘font’ property shorthand.»
Ссылки
Список цветов, правильно отображаемых браузерами:
- Таблица безопасных цветов
- Безопасные цвета для Веб. Таблица из 216 цветов
- Web Color Reference The Websafe and Reallysafe Palettes (англ.) (недоступная ссылка с 30-08-2018 [2221 день])
