CSS Цвета
Курс по основам CSS. W3Schools на русском языке. Уроки для начинающих
Цвета задаются с использованием предварительно определенных имен цветов или значений: RGB, HEX, HSL, RGBA, HSLA.
Color Names / Названия цветов
Пример
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
Цвет фона / Background Color
Вы можете установить цвет фона для элементов HTML:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Пример
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem
ipsum...</p>
Попробуйте сами »
Цвет текста / Text Color
Вы можете установить цвет текста:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Пример
<h1 style="color:Tomato;">Hello
World</h1>
<p style="color:DodgerBlue;">Lorem
ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi
enim...</p>
Попробуйте сами »
Цвет границы / Border Color
Вы можете установить цвет границ:
Hello World
Hello World
Hello World
Пример
<h1 style="border:2px
solid Tomato;">Hello
World</h1>
<h1 style="border:2px
solid DodgerBlue;">Hello
World</h1>
<h1 style="border:2px
solid Violet;">Hello
World</h1>
Попробуйте сами »
Цветовые значения
В HTML цвета также могут быть указаны с использованием значений RGB, HEX, HSL, RGBA и HSLA:
То же, что и название цвета "Tomato":
То же, что и название цвета "Tomato", но прозрачное на 50%:
Пример
<h1 style="background-color:rgb(255,
99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9,
100%, 64%);">...</h1>
<h1 style="background-color:rgba(255,
99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9,
100%, 64%, 0.5);">...</h1>
Попробуйте сами »
RGB значение
В HTML цвет можно указать как значение RGB, используя эту формулу:
rgb(red, green, blue)
где red - красный, green - зелёный, blue - синий.
Каждый параметр (красный, зеленый и синий) определяет интенсивность цвета от 0 до 255.
Например, rgb(255, 0, 0) отображается красным, потому что для красного установлено самое высокое значение (255), а для других - 0.
Чтобы отобразить черный цвет, все параметры цвета должны быть установлены на 0, как здесь: rgb(0, 0, 0).
Чтобы отобразить белый цвет, все параметры цвета должны быть установлены на 255, как здесь: rgb(255, 255, 255).
Экспериментируйте, смешивая значения RGB!
Пример
rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)
Попробуйте сами »
Оттенки серого часто определяются с использованием равных значений для всех трёх источников света:
Пример
rgb(0, 0, 0)
rgb(60, 60, 60)
rgb(120, 120, 120)
rgb(180, 180, 180)
rgb(240, 240, 240)
rgb(255, 255, 255)
Попробуйте сами »
HEX Значение
В HTML цвет можно указать, используя шестнадцатеричное значение HEX в форме:
#rrggbb
Где rr (red), gg (green) и bb (blue) шестнадцатеричные значения от 00 до ff (такие же, как десятичные 0-255).
Например, #ff0000 отображается красным, потому что для красного установлено самое высокое значение (ff), а для остальных установлено самое низкое значение (00).
Оттенки серого часто определяются с использованием равных значений для всех 3 источников света:
HSL Значение
В HTML цвет можно указать с помощью оттенка (hue), насыщенности (saturation) и яркости (lightness) HSL в форме:
hsl(hue, saturation, lightness)
Оттенок (hue) - это градус цветового круга от 0 до 360. 0 - красный, 120 - зеленый, а 240 - синий.
Насыщенность (saturation) - это процентное значение, 0% означает оттенок серого, а 100% - это полный цвет.
Яркость (lightness) также в процентах, 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%, чтобы получить более темные/более светлые оттенки:
Пример
hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)
Попробуйте сами »
RGBA Значение
Цветовые значения RGBA являются расширением цветовых значений RGB с альфа-каналом, который определяет непрозрачность для цвета.
Значение цвета RGBA указывается с:
rgba(red, green, blue, alpha)
Альфа-параметр - это число от 0,0 (полностью прозрачное) до 1,0 (совсем не прозрачное):
Пример
rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)
Попробуйте сами »
HSLA Значение
Значения цвета HSLA являются расширением значений цвета HSL с альфа-каналом, который определяет непрозрачность для цвета.
Значение цвета HSLA указывается с:
hsla: hue (оттенок), saturation (насыщенность), lightness (яркость), alpha (альфа).
Альфа-параметр - это число от 0,0 (полностью прозрачное) до 1,0 (совсем не прозрачное):
Пример
hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)
Попробуйте сами »