HTML-цвета
Веб-цвета — это цвета, используемые при отображении веб-страниц, а также методы описания и определения этих цветов.
Существуют несколько основных способов их представления:
- В виде #123ABC. Представление в виде трёх пар шестнадцатеричных цифр, где каждая пара отвечает за свой цвет:
- Представление ключевыми словами, например green, black. Во избежание случаев, когда указанное ключевое слово «не понимается» браузером, следует использовать лишь небольшой набор основных цветов, используемых во всех браузерах.
- В виде RGB(*,*,*), где «*» — числа от 0 до 255, обозначающих количество соответствующего цвета (красный, зелёный, синий) в получаемом.
- Возможен и RGBA(*,*,*,*), где первые 3 «*» — компоненты цвета, задающиеся в диапазоне 0 до 255, а последняя «*» — уровень непрозрачности (альфа-канал), задающийся дробными числами от 0 до 1.
Имена цветов в HTML
В спецификации HTML 4.01[1] определены следующие 16 ключевых цветов (в данном контексте можно использовать как заглавные, так и строчные буквы):
| Цвет | Код | Цвет | Код | Цвет | Код | Цвет | Код |
|---|---|---|---|---|---|---|---|
| aqua (морская волна, cyan) | #00ffff | black (чёрный) | #000000 | blue (синий) | #0000ff | fuchsia (фуксия, magenta) | #ff00ff |
| gray (серый) | #808080 | green (зелёный) | #008000 | lime (лайм, lightgreen) | #00ff00 | maroon (тёмно-бордовый) | #800000 |
| navy (тёмно-синий) | #000080 | olive (оливковый) | #808000 | purple (пурпурный) | #800080 | red (красный) | #ff0000 |
| silver (серебряный) | #c0c0c0 | teal (сине-зелёный) | #008080 | white (белый) | #ffffff | yellow (жёлтый) | #ffff00 |
^В спецификации используются английские названия цветов.
Безопасная палитра 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»
- CSS 2.1 Specification: Syntax and basic data types: Colors (8 сентября 2009). Дата обращения: 21 декабря 2009. Архивировано 7 февраля 2013 года.
- User interface — System colors
- CSS3 Color Module — CSS2 System Colors
- CSS3Basic User Interface Module, W3C Candidate Recommendation 11 May 2004: System Appearance
- CSS Basic User Interface Module Level 3 (CSS3 UI), W3C Working Draft 17 January 2012: List of substantial changes, «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 [1273 дня])
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.