Html таблица цветов
Содержание:
Система HSL
При установке цвета в системе HSL, указываются три параметра — оттенок, насыщенность и осветление. Оттенок определяется на основе цветового кгруга. Он указывается в градусах от 0 до 360. 0 градусов соответствует самому верху круга. При этом, никаких знаков ставить не нужно, указывается просто число.
Насыщенность определяет яркость цвета. Она указывается в процентах от 0 до 100.
Осветление может сделать цвет более светлым или более тёмным. Указывается также в процентах. Для установки цвета пишется слово hsl, затем в скобках перечисляются параметры.
Чтобы задать тексту тот же цвет, нужно указать ему следующий стиль:
HSLA — это способ установки цвета, при котором так же, как и при RGBA, есть альфа канал, устанавливающий прозрачный цвет элемента. Прозрачность также принимает значения от 0 до 1. Для установки цвета пишется слово hsla, затем в скобках указываются параметры и прозрачность. Чтобы сделать текст таким же цветом, но при этом прозрачным, ему нужно установить такой стиль:
Shades of Red
If you look at the color table below, you will see the result of varying
the red light from 0 to 255, while keeping the green and blue light at zero.
Click on the hexadecimal values, if you want to analyze the color in our color picker.
| Red Light | HEX | RGB |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #080000 | rgb(8,0,0) | |
| #100000 | rgb(16,0,0) | |
| #180000 | rgb(24,0,0) | |
| #200000 | rgb(32,0,0) | |
| #280000 | rgb(40,0,0) | |
| #300000 | rgb(48,0,0) | |
| #380000 | rgb(56,0,0) | |
| #400000 | rgb(64,0,0) | |
| #480000 | rgb(72,0,0) | |
| #500000 | rgb(80,0,0) | |
| #580000 | rgb(88,0,0) | |
| #600000 | rgb(96,0,0) | |
| #680000 | rgb(104,0,0) | |
| #700000 | rgb(112,0,0) | |
| #780000 | rgb(120,0,0) | |
| #800000 | rgb(128,0,0) | |
| #880000 | rgb(136,0,0) | |
| #900000 | rgb(144,0,0) | |
| #980000 | rgb(152,0,0) | |
| #A00000 | rgb(160,0,0) | |
| #A80000 | rgb(168,0,0) | |
| #B00000 | rgb(176,0,0) | |
| #B80000 | rgb(184,0,0) | |
| #C00000 | rgb(192,0,0) | |
| #C80000 | rgb(200,0,0) | |
| #D00000 | rgb(208,0,0) | |
| #D80000 | rgb(216,0,0) | |
| #E00000 | rgb(224,0,0) | |
| #E80000 | rgb(232,0,0) | |
| #F00000 | rgb(240,0,0) | |
| #F80000 | rgb(248,0,0) | |
| #FF0000 | rgb(255,0,0) |
Метод 1: как изменить цвет текста HTML с помощью CSS
- Откройте HTML-файл. Лучший способ изменить цвет текста – это воспользоваться CSS. Тег <font> не поддерживается в HTML5. Поэтому воспользуйтесь CSS, чтобы определить стиль элементов страницы.
- Этот метод также работает с внешними таблицами стилей (отдельными файлами CSS). Приведенные ниже примеры предназначены для HTML-файла с внутренней таблицей стилей:
Поместите курсор внутри тега
. Стили определяются внутри этого тега, если используется внутренняя таблица стилей:
Введите
<!DOCTYPE html> <html> <head> <style> </style> </head>
Введите элемент, цвет текста которого нужно изменить. Используйте раздел
<!DOCTYPE html>
<html>
<head>
<style>
body {
}
</style>
</head>
<!DOCTYPE html>
<html>
<head>
<style>
body {
color:
}
</style>
</head>
Введите цвет текста. Это можно сделать тремя способами: ввести название, шестнадцатеричное значение или значение RGB. Например, чтобы сделать текст синим, введите blue, rgb(0, 0, 255) или #0000FF:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
}
</style>
</head>
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
}
h1 {
color: #00FF00;
}
p {
color: rgb(0,0,255)
}
</style>
</head>
<body>
<h1>Этот заголовок будет зеленым.</h1>
<p>Этот параграф будет синим.</p>
Этот основной текст будет красным.
</body>
</html>
Укажите стилевой класс CSS вместо того, чтобы менять элемент. Перед тем, как сделать цвет фона в HTML или изменить стиль элемента, можно указать стилевой класс, а затем применить его к любому элементу страницы. Например, класс .redtext окрасит текст элемента в красный цвет:
<!DOCTYPE html>
<html>
<head>
<style>
.redtext {
color: red;
}
</style>
</head>
<body>
<h1 class="redtext">Этот заголовок будет красным</h1>
<p>Этот параграф будет стандартным.</p>
<p class="redtext">Этот параграф будет красным</p>
</body>
</html>
Форматы задания цветов в CSS
Все цвета шрифта вы можете задавать в различных форматах. Вот наиболее распространённые:
- 1. При помощи кодового значения цвета хтмл.
Например:
color: black;
где black – это черный цвет html.
Примеры конкретных значений цветов HTML и CSS смотрите ниже.
- 2. Задание цвета в шестнадцатеричном коде:
Например:
color: #000000;
Где #000000; — это код черного цвета.
Если значение цвета в шестнадцатеричном коде имеет 6 одинаковых цифр или букв, то его можно сократить до трёх.
Например:
#ffffff – это код белого цвета
Его можно записать так: #fff
- 1. Задание цвета в формате rgb
Данный формат представляет собой набор трёх числовых значений от 0 до 255.
Он основывается на использовании трёх цветов, путём смешивания которых получаются все остальные оттенки
R – (red) – числовое значение красного цвета
G – (green) – числовое зелёного
B – (blue) — числовое значение синего
В CSS это выглядит так:
сolor: rgb (0, 155, 0);
Где 0, 155, 0 – это код зелёного цвета.
Таблица, в которой представлены основные цвета ргб, приведена ниже
- 4. Задание цвета при помощи формата rgba
Здесь принцип использования абсолютно такой же как и в предыдущем случае, но добавляется ещё один параметр – прозрачность. То есть вы можете регулировать не только оттенок, но и его прозрачность
Например:
color: rgba (89, 107, 108, 0.5);
Где 89, 107, 108 – это ргб код серого цвета, а 0,5 – это уровень прозрачности.
Прозрачность задаётся в виде десятичного значения от 0 до 1, где 0 – цвет совсем не виден, а 1 – цвет максимально непрозрачный
В одной из прошлых статей я писала про определение цвета на сайте. Там я давала несколько полезных инструментов по определению цветов.
Если вы её ещё не читали вот ссылка
Оттенки серого
Серые цвета отображаются с использованием одинакового количества энергии для всех источников света.
Чтобы сделать его легким для вас, чтобы выбрать серый цвет мы составили таблицу серых оттенков для вас:
| Gray Shades | HEX | RGB |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #080808 | rgb(8,8,8) | |
| #101010 | rgb(16,16,16) | |
| #181818 | rgb(24,24,24) | |
| #202020 | rgb(32,32,32) | |
| #282828 | rgb(40,40,40) | |
| #303030 | rgb(48,48,48) | |
| #383838 | rgb(56,56,56) | |
| #404040 | rgb(64,64,64) | |
| #484848 | rgb(72,72,72) | |
| #505050 | rgb(80,80,80) | |
| #585858 | rgb(88,88,88) | |
| #606060 | rgb(96,96,96) | |
| #686868 | rgb(104,104,104) | |
| #696969 | rgb(105,105,105) | |
| #707070 | rgb(112,112,112) | |
| #787878 | rgb(120,120,120) | |
| HTML Gray | #808080 | rgb(128,128,128) |
| #888888 | rgb(136,136,136) | |
| #909090 | rgb(144,144,144) | |
| #989898 | rgb(152,152,152) | |
| #A0A0A0 | rgb(160,160,160) | |
| #A8A8A8 | rgb(168,168,168) | |
| HTML DarkGray !!! | #A9A9A9 | rgb(169,169,169) |
| #B0B0B0 | rgb(176,176,176) | |
| #B8B8B8 | rgb(184,184,184) | |
| X11 Gray | #BEBEBE | rgb(190,190,190) |
| HTML Silver | #C0C0C0 | rgb(192,192,192) |
| #C8C8C8 | rgb(200,200,200) | |
| #D0D0D0 | rgb(208,208,208) | |
| HTML LightGray | #D3D3D3 | rgb(211,211,211) |
| #D8D8D8 | rgb(216,216,216) | |
| HTML Gainsboro | #DCDCDC | rgb(220,220,220) |
| #E0E0E0 | rgb(224,224,224) | |
| #E8E8E8 | rgb(232,232,232) | |
| #F0F0F0 | rgb(240,240,240) | |
| HTML WhiteSmoke | #F5F5F5 | rgb(245,245,245) |
| #F8F8F8 | rgb(248,248,248) | |
| HTML White | #FFFFFF | rgb(255,255,255) |
An anomaly in the table above is that HTML Gray is darker than DarkGray.
The color names of HTML / CSS was inherited from the X11 standard.
HTML / CSS defined gray at the midpoint of the 8-bit gray scale (128,128,128).
X11 defined gray to be (190,190,190); which is closer to HTML silver.
Web Safe цвета?
Много лет назад, когда компьютеры поддерживаются максимум 256 различных цветов, список 216 «Web Safe Colors» был предложен в качестве Web стандарта (40 фиксированных оговорку цвета системы).
Это не важно сейчас, так как большинство компьютеров может отображать миллионы разных цветов. Это 216 шестнадцатеричные значения кросс-браузерный цветовая палитра была создана, чтобы гарантировать, что все компьютеры будут корректно отображать цвета при работе 256 цветовой палитры в:
Это 216 шестнадцатеричные значения кросс-браузерный цветовая палитра была создана, чтобы гарантировать, что все компьютеры будут корректно отображать цвета при работе 256 цветовой палитры в:
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366cc | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| cc0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | cc33ff |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | ff9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
❮ Предыдущий Следующий Ссылка ❯
HSL значение
В HTML цвет можно задать с помощью оттенка, насыщенности и легкости (HSL) в форме:
HSL (оттенок, насыщенность, легкость)
Hue-это степень на цветном колесе от 0 до 360. 0-красный, 120-зеленый, 240-синий.
Насыщенность представляет собой процентное значение, 0% означает оттенок серого, а 100%-полный цвет.
Легкость также процент, 0% черный, 50% не является ни светлым, ни темным, 100% белый
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
Насыщенность
Насыщенность может быть охарактеризована как интенсивность цвета.
100% является чистым цветом, не оттенки серого
50% является 50% серый, но вы все еще можете увидеть цвет.
0% полностью серый, вы больше не можете видеть цвет.
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
Легкость
Легкость цвета можно описать как сколько света вы хотите дать цвет, где 0% означает отсутствие света (черный), 50% означает 50% света (ни темный, ни свет) 100% означает полную легкость (белый).
hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
Оттенки серого часто определяются установкой оттенка и насыщенности в 0, и отрегулируйте легкость от 0% до 100%, чтобы получить более темные/светлые оттенки:
RGBA
Обычно по дизайну полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity
здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba
, затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1 (рис. 1), при этом 0 означает полную прозрачность, а 1 непрозрачность цвета..
Рис. 1. Синтаксис применения rgba
В примере 2 показано применение формата RGBA для создания полупрозрачного фона.
Пример 2. Полупрозрачный фон
HTML5
CSS3
IE 9+
Cr
Op
Sa
Fx
rgbaГоббс одним из первых осветил эту проблему с позиций психологии.
Результат данного примера показан на рис. 2. Значение непрозрачности для фона установлено 90%.
Рис. 2. Полупрозрачный фон и непрозрачный текст
Свойство CSS RGBa позволяет задать фоновый цвет с альфа-каналом (т.е. заливать блоки полупрозрачным цветом).
Разумеется, в CSS есть свойство opacity, однако основной его недостаток: все дочерние элементы внутри прозрачного блока будут также наследовать его прозрачность.
Чаще всего используют заливку фона элемента одно-пиксельным PNG24 и фиксят прозрачность в IE6, или ещё фон делают прозрачным через css opacity. Текст позиционируют отдельно уже в другом элементе, но это, на мой взгляд, не совсем удобно…
С помощью RGBa
решение выглядит следующим образом:
1. Допустим, нам нужен синий фон с прозрачностью 50%.
А не поддерживать его будут IE6–8, Opera 9.x, Mozilla Firefox 2.x
2. Для IE можно постараться и сделать более изящно:
|
.element{ background filter:progid endColorstr= zoom: } |
Примечание: Цвет в фильтре задается 8 числами. Первые 2 числа это степень прозрачности: FF — полностью непрозрачный, 00 — прозрачный. Следующие 6 чисел привычное обозначение HTML-цвета.
Использование RGBa не ограничивается только фоновым цветом у блоков…
В CSS есть три способа изменить прозрачность элемента:с
помощью свойства opacity ,с
помощью функции rgba() ,с
помощью функции hsla() .
1. Свойство opacity
Свойство opacity позволяет сделать любой элемент веб-страницы частично или полностью прозрачным. Данное свойство изменяет прозрачность элементов, для которых установлено фоновое изображение (картинка) или задан фон с помощью цвета или градиента. Если элемент, для которого применено свойство opacity , содержит внутри себя другие элементы, то они также изменят свою прозрачность.
Свойство opacity принимает значения в диапазоне от 0 (полностью прозрачный) до 1 (непрозрачный), например:
H1 {color: #CD6829;}
div {
background: #CDD6DB;
opacity: .3;
}
Рис. 1. Прозрачность элементов с помощью opacity
2. Функция rgba()
Цветовая модель RGBA создает цветовой оттенок путем смешивания в необходимых пропорциях красного (Red)
, зеленого (Green)
и синего (Blue)
цветов, а альфа-канал (Alpha)
отвечает за степень прозрачности цвета. В отличие от свойства opacity , для блока, содержащего другие элементы, функция rgba() изменит прозрачность только блока.
3. Функция hsla()
Функция hsla() , параметры которой означают тон (Hue)
, насыщенность (Saturation)
, яркость (Lightness)
и альфа-канал (Alpha)
, также позволяет задать полупрозрачный цвет.
Оттенки цвета задаются в процентах, используя соответствующее значение из цветового круга. Сам круг разбит на сектора, на границах которых находятся основные цвета:
0/360° — красный цвет
60° — желтый цвет
120° — зеленый цвет
180° — голубой цвет
240° — синий цвет
270° — фиолетовый цвет
300° — пурпурный цвет
.
Чтобы получить черный цвет, нужно присвоить показателям тона, насыщенности и яркости нулевое значение — hsla(0, 0%, 0%, 1) . Белый цвет получается при 100%-ном значении яркости hsla(0, 0%, 100%, 1) , а серый цвет — при нулевом значении насыщенности hsla(0, 0%, 50%, 1) .
Прозрачность в палитрах
Отдельный элемент палитры в индексированном цветном изображении может быть обозначен как прозрачный цвет, чтобы выполнить простое наложение видео : наложение данного изображения на фон таким образом, чтобы некоторая часть перекрывающегося изображения закрывала фон, а оставшаяся нет . Наложение титров фильмов / телепрограмм и титров — типичное применение наложения видео.
В наложенном изображении (предполагается индексированный цвет) данная запись палитры играет роль прозрачного цвета. Обычно индексный номер 0, но можно выбрать другой, если наложение выполняется программно . Во время разработки элемент прозрачной цветовой палитры назначается произвольному (обычно отличительному) цвету. В приведенном ниже примере типичный стрелочный указатель для указывающего устройства разработан на оранжевом фоне, поэтому здесь оранжевые области обозначают прозрачные области (слева). Во время выполнения перекрывающееся изображение помещается в любом месте поверх фонового изображения и смешивается таким образом, что, если индекс цвета пикселя является прозрачным цветом, пиксель фона сохраняется, в противном случае он заменяется.
Этот метод используется для указателей, в типичных двухмерных видеоиграх для персонажей, маркеров и т. Д. ( Спрайтов ), титров видео и других приложений для смешивания изображений.
Некоторые ранние компьютеры, такие как Commodore 64 , MSX и Amiga , аппаратно поддерживают спрайты и / или полноэкранное наложение видео . В этих случаях номер записи прозрачной палитры определяется оборудованием, и раньше это был номер 0.
Некоторые форматы файлов индексированных цветных изображений, такие как GIF, изначально поддерживают обозначение данной записи палитры как прозрачной , свободно выбираемой среди любых записей палитры, используемых для данного изображения. Формат файла BMP резервирует пространство для значений альфа-канала в своей таблице цветов, однако в настоящее время это пространство не используется для хранения каких-либо данных прозрачности и установлено на ноль. Напротив, PNG поддерживает альфа-каналы в записях палитры, обеспечивая полупрозрачность изображений с палитрой.
При работе с полноцветных изображений, некоторые видео оборудование для смешивания может использовать триплет RGB (0,0,0) (не красный, не зеленый, не синий: самый темный оттенок черного, иногда называют superblack в этом контексте) в качестве прозрачного цвета . Во время разработки его заменяют на так называемый волшебный розовый . Точно так же типичное программное обеспечение для настольных издательских систем может предполагать, что чистый белый цвет, триплет RGB (255,255,255) из фотографий и иллюстраций должен быть исключен, чтобы позволить абзацам текста вторгаться в ограничивающую рамку изображения для нерегулярного расположения текста вокруг предметов изображения.
Программы двухмерного рисования , такие как Microsoft Paint и Deluxe Paint , могут использовать указанный пользователем цвет фона в качестве прозрачного цвета при выполнении операций вырезания, копирования и вставки .
Несмотря на то, что они связаны (поскольку они используются для одних и тех же целей), битовые маски изображений и альфа-каналы — это методы, которые вообще не предполагают использования палитр или прозрачного цвета, но вне изображения добавляют дополнительные слои двоичных данных.
Палитра (вычислительная) — Palette (computing)
В компьютерной графике , А палитра , которая также называется цветом таблица поиска (CLUT), является таблицей соответствия , в которой выбраны цвета из определенного цветового пространства «ы диапазон воспроизведения цветов назначен индекс, с помощью которого они могут ссылаться. Ссылаясь на цвета через индекс, который требует меньше информации, чем та, которая необходима для описания фактических цветов в указанном цветовом пространстве, этот метод направлен на сокращение использования данных, будь то полезная нагрузка обработки, пропускная способность передачи, использование ОЗУ или постоянное хранилище. Изображения, в которых цвета обозначены ссылками на CLUT, называются индексированными цветными изображениями.
Таблица цветов
| Цветовая константа | Red | Green | Blue | Образец |
|---|---|---|---|---|
| alicemblue | F0 | F8 | FF | |
| antiquewhite | FA | EB | D7 | |
| aqua | 00 | FF | FF | |
| aquamarine | 7F | FF | D4 | |
| azure | F0 | FF | FF | |
| beige | F5 | F5 | DC | |
| bisque | FF | E4 | C4 | |
| black | 00 | 00 | 00 | |
| blanchedalmond | FF | EB | CD | |
| blue | 00 | 00 | FF | |
| blueviolet | 8A | 2B | E2 | |
| brown | A5 | 2A | 2A | |
| burlywood | DE | B8 | 87 | |
| cadetblue | 5F | 9E | A0 | |
| chartreuse | 7F | FF | 00 | |
| chocolate | D2 | 69 | 1E | |
| coral | FF | 7F | 50 | |
| cornflowerblue | 64 | 95 | ED | |
| cornsilk | FF | F8 | DC | |
| crimson | DC | 14 | 3C | |
| cyan | 00 | FF | FF | |
| darkblue | 00 | 00 | 8B | |
| darkcyan | 00 | 8B | 8B | |
| darkgoldenrod | B8 | 86 | 0B | |
| darkgray | A9 | A9 | A9 | |
| darkgreen | 00 | 64 | 00 | |
| darkkhaki | BD | B7 | 6B | |
| darkmagenta | 8B | 00 | 8b | |
| darkolivegreen | 55 | 6B | 2F | |
| darkorange | FF | 8C | 00 | |
| darkochid | 99 | 32 | CC | |
| darkred | 8B | 00 | 00 | |
| darksalmon | E9 | 96 | 7A | |
| darkseagreen | 8F | BC | 8F | |
| darkslateblue | 48 | 3D | 8B | |
| darkslategray | 2F | 4F | 4F | |
| darkturquoise | 00 | CE | D1 | |
| darkviolet | 94 | 00 | D3 | |
| deeppink | FF | 14 | 93 | |
| deepskyblue | 00 | BF | FF | |
| dimgray | 69 | 69 | 69 | |
| dodgerblue | 1E | 90 | FF | |
| firebrick | B2 | 22 | 22 | |
| floralwhite | FF | FA | F0 | |
| forestgreen | 22 | 8B | 22 | |
| fushsia | FF | 00 | FF | |
| gainsboro | DC | DC | DC | |
| ghostwhite | F8 | F8 | FF | |
| gold | FF | D7 | 00 | |
| goldenrod | DA | A5 | 20 | |
| gray | 80 | 80 | 80 | |
| green | 00 | 80 | 00 | |
| greenyellow | AD | FF | 2F | |
| honeydew | F0 | FF | F0 | |
| hotpink | FF | 69 | B4 | |
| indiandred | CD | 5C | 5C | |
| indigo | 4B | 00 | 82 | |
| ivory | FF | FF | F0 | |
| khaki | F0 | E6 | 8C | |
| lavender | E6 | E6 | FA | |
| lavenderblush | FF | F0 | F5 | |
| lawngreen | 7C | FC | 00 | |
| lemonchiffon | FF | FA | CD | |
| ligtblue | AD | D8 | E6 | |
| lightcoral | F0 | 80 | 80 | |
| lightcyan | E0 | FF | FF | |
| lightgoldenrodyellow | FA | FA | D2 | |
| lightgreen | 90 | EE | 90 | |
| lightgrey | D3 | D3 | D3 | |
| lightpink | FF | B6 | C1 |
| Цветовая константа | Red | Green | Blue | Образец |
|---|---|---|---|---|
| lightsalmon | FF | A0 | 7A | |
| lightseagreen | 20 | B2 | AA | |
| lightscyblue | 87 | CE | FA | |
| lightslategray | 77 | 88 | 99 | |
| lightsteelblue | B0 | C4 | DE | |
| lightyellow | FF | FF | E0 | |
| lime | 00 | FF | 00 | |
| limegreen | 32 | CD | 32 | |
| linen | FA | F0 | E6 | |
| magenta | FF | 00 | FF | |
| maroon | 80 | 00 | 00 | |
| mediumaquamarine | 66 | CD | AA | |
| mediumblue | 00 | 00 | CD | |
| mediumorchid | BA | 55 | D3 | |
| mediumpurple | 93 | 70 | DB | |
| mediumseagreen | 3C | B3 | 71 | |
| mediumslateblue | 7B | 68 | EE | |
| mediumspringgreen | 00 | FA | 9A | |
| mediumturquoise | 48 | D1 | CC | |
| medium violetred | C7 | 15 | 85 | |
| midnightblue | 19 | 19 | 70 | |
| mintcream | F5 | FF | FA | |
| mistyrose | FF | E4 | E1 | |
| moccasin | FF | E4 | B5 | |
| navajowhite | FF | DE | AD | |
| navy | 00 | 00 | 80 | |
| oldlace | FD | F5 | E6 | |
| olive | 80 | 80 | 00 | |
| olivedrab | 6B | 8E | 23 | |
| orange | FF | A5 | 00 | |
| orengered | FF | 45 | 00 | |
| orchid | DA | 70 | D6 | |
| palegoldenrod | EE | E8 | AA | |
| palegreen | 98 | FB | 98 | |
| paleturquose | AF | EE | EE | |
| palevioletred | DB | 70 | 93 | |
| papayawhop | FF | EF | D5 | |
| peachpuff | FF | DA | B9 | |
| peru | CD | 85 | 3F | |
| pink | FF | C0 | CB | |
| plum | DD | A0 | DD | |
| powderblue | B0 | E0 | E6 | |
| purple | 80 | 00 | 80 | |
| red | FF | 00 | 00 | |
| rosybrown | BC | 8F | 8F | |
| royalblue | 41 | 69 | E1 | |
| saddlebrown | 8B | 45 | 13 | |
| salmon | FA | 80 | 72 | |
| sandybrown | F4 | A4 | 60 | |
| seagreen | 2E | 8B | 57 | |
| seashell | FF | F5 | EE | |
| sienna | A0 | 52 | 2D | |
| silver | C0 | C0 | C0 | |
| skyblue | 87 | CE | EB | |
| slateblue | 6A | 5A | CD | |
| slategray | 70 | 80 | 80 | |
| snow | FF | FA | FA | |
| springgreen | 00 | FF | 7F | |
| steelblue | 46 | 82 | B4 | |
| tan | D2 | B4 | 8C | |
| teal | 00 | 80 | 80 | |
| thistle | D8 | BF | D8 | |
| tomato | FF | 63 | 47 | |
| turquose | 40 | E0 | D0 | |
| violet | EE | 82 | EE | |
| wheat | F5 | DE | B3 | |
| white | FF | FF | FF | |
| whitesmoke | F5 | F5 | F5 | |
| yellow | FF | FF | 00 | |
| yellowgreen | 9A | CD | 32 |
Web Safe Colors?
Many years ago, when computers supported maximum 256 different colors, a list
of 216 «Web Safe Colors» was suggested as a Web standard (reserving 40 fixed
system colors).
This is not important now, since most computers can display millions of
different colors.
This 216 hex values cross-browser color palette was created to ensure that all computers
would display the colors correctly when running a 256 color palette:
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
❮ Назад
Дальше ❯
Результат примера с RGBA:
Второй скриншот намного лучше смотрится, чем первый.
Играясь с полупрозрачностью фона блоков, можно добиться на сайте интересных эффектов
Важно, чтобы эти полупрозрачные блоки шли поверх пестрого рисунка, например фотографии. Только в этом случае эффект будет заметен
Этот прием уже давно применялся в дизайне, ещё до появления всяких CSS3, реализовывался он чисто в графических программах.
Если заказчик требует, чтобы верстка хорошо смотрелась и в старых версиях браузера Internet Explorer, тогда добавляйте свойство filter и не забудьте закомментировать, чтобы не пострадала валидность кода.
