skip to main content

Цвета в вебе

css

Название цвета 🔗

Самый простой способ указания цвета в вебе — ключевые слова. Используются английские названия цветов. Самые популярные базовые цвета:

  • Чёрный black
  • Белый white
  • Красный red
  • Зелёный green
  • Синий blue

На самом деле ключевых слов для цветов очень много. Нет особого смысла их все запоминать. Всегда можно заглянуть в таблицу цветов.

Таблица с ключевыми словами для обозначения цвета в CSS
IndianRedLightCoralSalmonDarkSalmon
LightSalmonCrimsonRedFireBrick
DarkRedPinkLightPinkHotPink
DeepPinkMediumVioletRedPaleVioletRedCoral
TomatoOrangeRedDarkOrangeOrange
GoldYellowLightYellowLemonChiffon
LightGoldenrodYellowPapayaWhipMoccasinPeachPuff
PaleGoldenrodKhakiDarkKhakiLavender
ThistlePlumVioletOrchid
FuchsiaMagentaMediumOrchidMediumPurple
RebeccaPurpleBlueVioletDarkVioletDarkOrchid
DarkMagentaPurpleIndigoSlateBlue
DarkSlateBlueMediumSlateBlueGreenYellowChartreuse
LawnGreenLimeLimeGreenPaleGreen
LightGreenMediumSpringGreenSpringGreenMediumSeaGreen
SeaGreenForestGreenGreenDarkGreen
YellowGreenOliveDrabOliveDarkOliveGreen
MediumAquamarineDarkSeaGreenLightSeaGreenDarkCyan
TealAquaCyanLightCyan
PaleTurquoiseAquamarineTurquoiseMediumTurquoise
DarkTurquoiseCadetBlueSteelBlueLightSteelBlue
PowderBlueLightBlueSkyBlueLightSkyBlue
DeepSkyBlueDodgerBlueCornflowerBlueMediumSlateBlue
RoyalBlueBlueMediumBlueDarkBlue
NavyMidnightBlueCornsilkBlanchedAlmond
BisqueNavajoWhiteWheatBurlyWood
TanRosyBrownSandyBrownGoldenrod
DarkGoldenrodPeruChocolateSaddleBrown
SiennaBrownMaroonWhite
SnowHoneyDewMintCreamAzure
AliceBlueGhostWhiteWhiteSmokeSeaShell
BeigeOldLaceFloralWhiteIvory
AntiqueWhiteLinenLavenderBlushMistyRose
GainsboroLightGraySilverDarkGray
GrayDimGrayLightSlateGraySlateGray
DarkSlateGrayBlack

Как пишется 🔗

.selector {
color: black;
background-color: AntiqueWhite;
}

Ключевые слова регистронезависимые — вы можете писать их как угодно и браузер всё равно вас поймёт.

RGB 🔗

Принцип комбинации красного, зелёного и синего для получения разных цветов

Для задания цвета используется функция rgb(), например, rgb(0 63 255) для синего. Каждое из трёх значений отвечает за отдельный канал RGB и может быть записано числом от 0 до 255 или в процентах. Для добавления прозрачности, после записи каналов нужно поставить слэш и записать нужное значение от 0 до 1 или в процентах, например rgb(0 63 255 / 0.5) для полупрозрачного синего.

Раньше синтаксис RGB отличался от современного и вы всё ещё можете встретить его в коде или выбрать для лучшей кроссбраузерности, см. Can I Use. Для разделения каналов внутри функции нужно было использовать запятые rgb(0, 63, 255), а для добавления прозрачности — специальную функцию rgba(), которая принимала последним параметром прозрачность цвета, например rgba(255, 0, 0, 0.5).

HEX 🔗

Два цвета 2021 года по версии Pantone: серый и жёлтый

Шестнадцатеричный код цвета в цветовой модели RGB, который начинается с #, например, #ff0000. Сплошные цвета записываются в формате #RRGGBB или в сокращённом #RGB (если символы каждой группы одинаковые). Например #009900 или #090. Если нужно указать прозрачность, она добавляется в конце в HEX-формате #RRGGBBAA или #RGBA, например #00990055 или #0905.

Раньше нельзя было задать цвет в нотации #RGBA и приходилось использовать функцию rgba(), но сегодня у этого способа неплохая кроссбраузерность. Проблема одна: мало кто сходу сможет рассчитать 50% в шестнадцатеричном формате, поэтому для указания прозрачности цвета чаще всего используют функцию rgb(), где прозрачность можно задать в дробях или процентах.

Как пишется 🔗

.selector {
color: #FFF;
border-color: #00000080;
background-color: #ff00ff;
}

HSL 🔗

Параметры в системе HSL

Цветовая модель HSL описывает те же цвета, что и RGB, но иначе: H — Hue (оттенок), S — Saturation (насыщенность), L — Lightness (светлота). Например, hsl(120 100% 50%) для зелёного. Первое значение оттенка задаётся в градусах и его можно записать просто как 120 (как чаще всего и делают) или с указанием единицы 120deg, второе и третье значение указываются в процентах. Прозрачность добавляется так же, как в rgb, с помощью слэша со значением, например hsl(120 100% 50% / 0.5) полупрозрачный зелёный.

Синтаксис hsl() отличался от современного точно так же, как rgb(): нужны были запятые и специальная функция hsla() для задания прозрачности цвета. Используйте старый синтаксис для лучшей совместимости и не удивляйтесь, если встретите его в коде.

Ключевые слова 🔗

transparent 🔗

Ключевое слово transparent задаёт прозрачный цвет текста. Технически это равносильно записи любого цвета с нулевой прозрачностью rgb(0 0 0 / 0), но бывают случаи, когда просто прозрачность и прозрачность цвета могут работать иначе, например, в градиентах.

currentColor 🔗

За ключевым словом currentColor скрывается цвет, указанный в свойстве color элемента. Очень удобно указывать это слово в качестве значения других свойств, чтобы многократно не указывать один и тот же цвет.

Пример 🔗

Пусть цвет рамки элемента будет совпадать с цветом текста:

.element {
color: #6e4aff;
border: 1px solid currentColor;
}

Если мы захотим менять цвет текста и рамки по наведению курсора, то нам достаточно будет изменить значение одного свойства, а цвет рамки подстроится за счёт currentColor:

.element:hover {
color: #09ff00;
}