Цвет в CSS


Содержание

Цвета в CSS

Цвет в языке CSS можно задавать разными способами:

  • по названию,
  • по шестнадцатеричному значению,
  • в форматах RGB и RGBA,
  • в форматах HSL и HSLA.

Задание цвета по названию

Браузеры поддерживают указание некоторых цветов элементам по названиям. В этой таблице некоторые ключевые слова (английские названия цветов), используемые для задания свойств цвета, RGB код, шестнадцатеричный код (HEX) и HSL код.

Табл. 1. Названия цветов, их RGB, HEX и HSL код.

Имя Цвет RGB HEX HSL Описание
white rgb(255, 255, 255) #ffffff или #fff hsl(0, 0%, 100%) Белый
silver rgb(192, 192, 192) #c0c0c0 hsl(0, 0%, 75%) Серый
gray rgb(128, 128, 128) #808080 hsl(0, 0%, 50%) Темно-серый
black rgb(0, 0, 0) #000000 или #000 hsl(0, 0%, 0%) Черный
maroon rgb(128, 0, 0) #800000 hsl(0, 100%, 25%) Темно-красный
red rgb(255, 0, 0) #ff0000 или #f00 hsl(0, 100%, 50%) Красный
orange rgb(255, 165, 0) #ffa500 hsl(38.8, 100%, 50%) Оранжевый
yellow rgb(255, 255, 0) #ffff00 или #ff0 hsl(60, 100%, 50%) Желтый
olive rgb(128, 128, 0) #808000 hsl(60, 100%, 25%) Оливковый
lime rgb(0, 255, 0) #00ff00 или #0f0 hsl(120, 100%, 50%) Светло-зеленый
green rgb(0, 128, 0) #008000 hsl(120, 100%, 25%) Зеленый
aqua rgb(0, 255, 255) #00ffff или #0ff hsl(180, 100%, 50%) Голубой
blue rgb(0, 0, 255) #0000ff или #00f hsl(240, 100%, 50%) Синий
navy rgb(0,0,128) #000080 hsl(240, 100%, 25%) Темно-синий
teal rgb(0, 128, 128) #008080 hsl(180, 100%, 25%) Сине-зеленый
fuchsia rgb(255, 0, 255) #ff00ff или #f0f hsl(300, 100%, 50%) Розовый
purple rgb(128, 0, 128) #800080 hsl(300, 100%, 25%) Фиолетовый

Первоночально в стандартах W3C использовались лишь эти 16 ключевых слов для задания цветов. Позже в стандарты было добавлено ещё 130 цветов, полный их список смотрите тут: таблица цветов CSS.

Это образец использования имен цветов, навзания цветов взяты из расширеной таблицы.

Вот как работает этот код:

Установка цвета с помощью RGB

— аддитивная цветовая модель. На английском языке addition — добавление. RGB — это аббревиатура английских слов: Red, Green, Blue — красный, зелёный, синий). Из этого понятно что в модели RGB цвета синтезируются путём добавления трёх цветов (красного, зелёного, синего) в различных количествах.

Смешивая красный, зелёный и синий цвета можно получить несколько миллионов оттенков. В памяти компьютеров хранятся все возможные комбинации.

Для установки свойств в этом формате используется запись rgb(r, g, b) , где r, g, b — это три канала для каждого цвета (red, green, blue). Значения для каждого канала задаются в диапазоне от 0 до 255.

Чтобы всё стало понятно, приведу пример кода:

Вот так должен сработать этот пример:

Рис.1. Цвета в RGB.

Пояснения к примеру.

В начале страницы создаём класс div.rgb , он нужен чтобы блоки созданные тегом

Далее, в коде устанавливаем фоновый цвет блока

Попробуйте отредактировать этот пример и указать свои значения, например rgb(100, 100, 100) .

Установка цвета с помощью RGBA

В CSS3 появился новый инструмент для работы с цветом — формат RGBA. Его можно назвать развитием модели RGB, но с добавлением одного нового канала — A или альфа-канала. Этот канал устанавливает прозрачность цвета. Его значения задаются в диапазоне от 0 до 1. Значение равное 0 соответствует полной прозрачности, 1 — полной непрозрачности (цвет будет таким, каким он задан в первых трёх каналах RGB), а промежуточные значения, как 0.4 или 0.6 — полупрозрачности в различной степени.

Вот как он сработает:

Этот код по своему визуальному представлению аналогичен следующему, использующему модель RGB для задания значения цвета:

Вот его результат:

Значение альфа канала равное нолю делает любой цвет невидимым — абсолютно прозрачным, значение равное единице транслирует цвет в RGB-коде без изменений. Свойство rgba(255,0,0,1.0) показывает красный цвет rgb(255, 0, 0) .

По шестнадцатеричному значению (HEX-код)

В повсежневной жизни мы пользуемся десятичной системой счёта. Её истоки очень просты — у нас десять пальцев на руках, и считать по пальцам в жизни бывало удобно. Если в десятичной системе десять цифр: от 0 до 9, а число 10 — это уже следующий разряд, то в шестнадцатеричная система счисления 16 цифр, а следующим разрядом будет число 16.

Для указания кодов цветов в качестве шестнадцатеричных цифр используются обычные десятичные цифры от 0 до 9 и для обозначения цифр от 10 до 15 используют латинские буквы от A до F то есть (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Для наглядности сведём это в таблицу:

Табл. Десятичные и шестнадцатеричные числа меньше 16

Десятичные 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Шестнадцатеричные 1 2 3 4 5 6 7 8 9 A B C D E F

Для записи шестнадцатеричных чисел больше F (15 по десятичной системе), как и в десятичной системе, также используют объединение двух цифр, но уже шестнадцатеричных, что очевидно. Так, для записи десятичного числа 255 в шестнадцатеричной системе используется запись FF.

Табл. Десятичные и шестнадцатеричные числа больше 16

Десятичные 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
Шестнадцатеричные 10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F


Шестнадцатеричная система более понятна компьютеру, он быстрее обрабатывает значения, заданные по шестнадцатеричному значению.

Чтобы указать цвет в 16-ричной системе, перед числовым значением нужно ставить знак «#», пример: #FFC0CB . Само значение #FFC0CB состоит из трёх шестнадцатеричных цифр FF , C0 и CB . Смысл этой записи такой же, как и установка цвета в формате RGB ( rgb(r, g, b) ) — каждая шестнадцатиричная цифра в HEX-коде указывает насыщение цвета в своём канале модели RGB.

Этот код отобразит следующие элементы:

А вот рисунок с результатом из раздела «Установка цвета с помощью RGB» на этой странице выше.

Рис.1. Цвета в RGB.

Мы видим что цвета идентичны.

Допускается сокращенная запись HEX-кода цвета: 6-значное число можно записать как 3-значное. Это допустимо только в случае, когда две цифры в значении цвета одного канала повторяются.

То есть допустимо следующее сокращение записи:

Например, цвет #ff22aa допустимо написать так — #f2a , или цвет #44aa22 допустимо указать в виде #4a2 .

Установка цвета с помощью HSL

В CSS3 появился новый формат для указания цвета.

Формат HSL — это аббревиатура от английских слов: Hue (оттенок), Saturate (насыщенность) и Lightness (светлота).

Оттенок в HSL — это значение цвета на специальном цветовом круге (рисунок 2) и оно задаётся в градусах. Если проводить аналогии с моделью RGB, то 0° соответствует красному, 120° соответствует зелёному, а 240° — синему цвету.

Значение оттенка изменятся в диапазоне от 0 до 359.

Рисунок 2. Цветовой круг HSL.

Второе значение — насыщенность (Saturate) задаётся в процентах. При 100% насыщенности цвет максимально «сочный», по мере движения показателя насыщеннсоти к 0%, цвет становится всё более тусклым и скатывается в серый.

Третье значение — светлота (Lightness) также задаётся в процентах. Чем выше процент, тем более яркий будет цвет. Крайние значения 0% и 100% будут обозначать соответственно чёрный (отсутствие света) и белый (засвеченный) цвета, при этом неважно, какой цвет из цветового круга был выбран в первом канале. Оптимальным можно считать значение яркости цвета равное 50%.

Установка цвета с помощью HSLA

Формат HSLA соотносится с HSL, так же как и RGB с RGBA. В формате HSLA, как и в RGBA добавлен альфа-канал отвечающий за прозрачность цвета.

Некоторые итоги и советы

Цвет, заданный в формате HSL, читать более просто. Можно сказать что он интуитивно понятен. Например, код hsl(120,60%,50%) можно представить итоговый цвет, если в памяти есть картинка цветового круга HSL. Про форматы RGB и HEX такого сказать нельзя, код цвета заданный в этих форматах становится понятный только после его визуализации на мониторе.

Новые форматы в CSS3 (HSL, HSLA и RGBA) работают в браузерах начиная с версий: IE 9.0, Opera 10.0 Firefox 3.0. Как сделать так, чтобы стили работали на старых браузерах?

При использовании такого кода в старых браузерах фоновый цвет для класса .somebloсk хоть и не будет использовать альфа-канал, но будет отображаться в формате RGB.

CSS Цвета

Цвета отображаются сочетания красный, зеленый и синий свет.

Значения цвета

CSS цвета определяются с помощью шестнадцатеричной (HEX) обозначение для комбинации красного, зеленого и синего цветовых значений (RGB) . Самое низкое значение , которое может быть дано одному из источников света 0 (HEX 00) . Наибольшее значение равно 255 (HEX FF) .

Значения HEX записываются в виде 3 двойных чисел цифры, начиная с символа #.

пример

цвет Цвет HEX Цвет RGB
# 000000 RGB (0,0,0)
# FF0000 RGB (255,0,0)
# 00FF00 RGB (0,255,0)
# 0000FF RGB (0,0,255)
# FFFF00 RGB (255,255,0)
# 00FFFF RGB (0255255)
# FF00FF RGB (255.0.255)
# C0C0C0 RGB (192192192)
#FFFFFF RGB (255,255,255)
Илон Маск рекомендует:  Что такое код xpath_new_context

Оттенки серого

Серые цвета отображаются с помощью равное количество энергии для всех источников света. Для того, чтобы сделать его более легким для вас, чтобы выбрать правильный серый цвет мы составили таблицу оттенков серого для Вас:

оттенков серого цвета 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 (104104104)
# 707070 RGB (112112112)
# 787878 RGB (120120120)
# 808080 RGB (128128128)
# 888888 RGB (136136136)
# 909090 RGB (144144144)
# 989898 RGB (152152152)
# A0A0A0 RGB (160160160)
# A8A8A8 RGB (168168168)
# b0b0b0 RGB (176176176)
# B8B8B8 RGB (184184184)
# C0C0C0 RGB (192192192)
# C8C8C8 RGB (200200200)
# D0D0D0 RGB (208208208)
# D8D8D8 RGB (216216216)
# E0E0E0 RGB (224224224)
# E8E8E8 RGB (232232232)
# F0F0F0 RGB (240240240)
# F8F8F8 RGB (248248248)
#FFFFFF RGB (255,255,255)


Оттенки красного

Если вы посмотрите на таблицу цвета ниже, вы увидите результат той или иной красный свет от 0 до 255, при этом сохраняя зеленый и синий свет в нуле.

Нажмите на шестнадцатеричные значения, если вы хотите, чтобы проанализировать цвет в нашей палитры цветов.

Красный свет 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)

16 миллионов цветов

Сочетание значений красного, зеленого и синего от 0 до 255 дает в общей сложности более 16 миллионов различных цветов , чтобы играть с (256 x 256 x 256) .

Большинство современных мониторов способны отображать по меньшей мере 16384 различных цветов.

Web Safe цвета?

Много лет назад, когда компьютеры поддерживаются максимум 256 различных цветов, список 216 «Web Safe Colors» был предложен в качестве Web стандарта (40 фиксированных оговорку цвета системы).

Это не важно сейчас, так как большинство компьютеров может отображать миллионы разных цветов.

Это 216 шестнадцатеричные значения кросс-браузерный цветовая палитра была создана, чтобы гарантировать, что все компьютеры будут корректно отображать цвета при работе 256 цветовой палитры в:

Гид по CSS-цветам

CSS можно применять для настройки размеров, расположения, полей и промежутков, очередности слоев, а также множества других характеристик отображения элементов на экране. Одним из наиболее важных аспектов считаются цвета CSS . Практически все элементы веб-страницы можно “ раскрасить ” с помощью CSS .

Свойство CSS Color

Свойства color воздействует не на сам элемент ( блок ), а на шрифт внутри него. Цвет элемента обычно регулируется с помощью свойств background-color , border-color , а также сокращенных версий свойств background и border . Также можно использовать свойство box-shadow , которое отвечает за тень элемента.

Свойство background-color , примененное к элементу, отвечает за его содержимое, поля и границы. Но есть способы оформить поля и контент разными цветами.

Объявление цвета

Есть три способа определения цвета текста CSS : RGB-значение , HEX и название:

Второй по счету пример ( HEX-значение ) наиболее распространен. Но HEX-значение покажется абсолютно бессмысленным, если вы не знакомы с принципом работы модели RGB .

RGB-значения

На цветных экранах устройств каждый пиксель делится на три субпикселя: красный, зеленый и синий — так называемые “ первичные цвета света ”. Комбинация этих трех цветов с различной интенсивностью позволяет получить любой оттенок, который способен распознать человеческий глаз и формирует таблицу цветов CSS .

Модели дисплеев различаются между собой по диапазону интенсивности излучения, который могут воспроизвести субпиксели. Самый простой экран может иметь лишь две интенсивности ( то есть, режимы «включено» и «выключено» ), в то время как высокотехнологичные современные экраны способны предложить обширную градацию. Обычно в компьютерных мониторах используются шкала от 0 до 255 . Интенсивность каждого субпикселя может иметь значение до 256 . А это значит, что значение каждого субпикселя можно хранить в виде 8-битного байта ( 28 = 256 ). Так как задействуется три цвета, то каждый из них представляется в 8 битах. Общее количество цветов превышает 16 млн. ( 2563 = 16,777,216 ).

Эту шкалу цветов можно задействовать, указывая значение каждого субпикселя следующим образом:

В данном примере красный субпиксель выключен, зеленый используется наполовину, а синий — полностью включен. Такое объявление позволит нам получить следующий цвет:

В рамках данной системы объявление белого цвета ( все цвета включены ) выглядит так: rgb ( 255, 255, 255 ). Объявление черного цвета ( все цвета выключены ): rgb ( 0, 0, 0 ).

RGB-цвета также можно указывать в процентном соотношении, используя десятичные числа, но такой способ не получил широкого распространения:

HEX-значения

Аналогичный результат можно получить более простым — используя HEX-значение . Оно задается с использованием хэша (#) и 6 символов, разделенных на три пары:

Первая пара цвета в CSS отвечает за красный, вторая отвечает за зеленый, третья – за синий. В данном примере 00 означает, что красного не будет вообще. 80 указывает, что зеленый задействован наполовину, а ff означает полное включение синего цвета. То есть, мы получим тот же результат, что и при rgb (0, 128, 255) .

Поначалу это может сбивать с толку, особенно если вы раньше никогда не работали с шестнадцатеричными числами. В привычной десятичной системе у каждого символа есть 10 значений от 0 до 9. В шестнадцатеричной – у каждого символа 16 возможных значений ( 0-9 и a-f ). Это и позволяет указывать цвета от 0 до 255 при помощи двух символов, 0 = ff . В рамках шестнадцатеричной системы, белый цвет обозначается как #ffffff , а черный – #000000 . HEX-значения наиболее часто используются для указания цветов в CSS .

Названия цветов в CSS

Последний способ указания цветов в CSS заключается в использовании предопределенных названий конкретных цветов. W3C регулярно обновляет таблицу цветов CSS . Например, вместо #000000 можно использовать название black .


На «заре» интернета эти названия позволяли использовать небольшой неофициальный набор “ безопасных для веб ” цветов, которые точно поддерживались всеми доступными на тот момент браузерами.

На сегодняшний день одно из главных преимуществ данного подхода заключается в том, что эти названия цветов гораздо проще запомнить. Например, слово lightblue ( светло-голубой ) запомнить гораздо проще, чем его эквиваленты: #add8e6 или rgb (173, 216, 230) .

Данная публикация представляет собой перевод статьи « CSS Colors Reference » , подготовленной дружной командой проекта Интернет-технологии.ру

Таблица цветов html

Разработчикам дизайнов сайтов, да и просто сайтостроителям, часто приходится подбирать какие-то цветовые гаммы, чтобы сайт смотрелся красиво и удобно. Как известно, задать цвета в html можно с помощью трех способов (записаны в порядке понижения популярности их применения):

Как можно задать цвет в CSS

1. Задание цвета в виде шести цифр шестнадцатеричного кода

Синтаксис этого способа: # XXXXXX . Первые две цифры отвечают за красный цвет (Red), вторые две цифры за зеленый (Green) и последние две цифры за синий цвет (Blue). Сокращенно его называют RGB. Этот метод встречается чаще всего среди вебмастеров, поскольку он позволяет точно подобрать нужный оттенок цвета.

Возможна более краткая запись в виде трех шестнадцатеричных цифры: # XXX . Поскольку каждый из цветов определяется двухзначным шестнадцатеричным числом, то в данном случае каждая цифра дублируется. Например, # ABC будет равнозначен коду # AABBCC . Аналогично с цифрами.

2. Задание цвета через его название

Самый простой и понятный способ задания цвета — просто написать его название. Сразу скажу, что не для каждого цвета есть свое название, а только для некоторых. Однако этих цветов так много, что, скорее всего, Вы сможете подобрать подходящий для Вас вариант.

3. Задание цвета в виде трех десятичных чисел

Этот способ похож на предыдущий, однако имеет более сложный синтаксис: rgb (XYZ,XYZ,XYZ) , где X, Y, Z — любые десятичные цифры, но XYZ не должно превышать 255. Как и в предыдущем случае каждый из трех чисел отвечает за какой-то цвет (красный, зелёный, синий).

Ниже представлена таблица цветов html, в которой можно посмотреть его название, посмотреть как он выглядит, узнать RGB и html код цвета.

HTML Таблица цветов

Для окраски текста или изменения фона в HTML применяется атрибут style. Текст, цвет которого нужно изменить, помещают в теги, например для отдельных слов или

Цвет текста определяется свойством CSS style = «color:#RRGGBB;» , а цвет фона style = «background-color:#RRGGBB;» .

«#RRGGBB» — это шестнадцатеричный код цвета, где доли красного (RR), зелёного (GG) и синего цвета (BB) могут лежать в диапазоне от 00 до FF, что соответствует десятичному числу 255. Вместо кодировки «#RRGGBB» можно использовать соответствующие названия цветов (без # ).

Таблица цветов HTML и CSS

А вы знали, что CSS для раскраски HTML предлагает для использования более ста сорока цветов?

Я говорю не о тех, которые можно назначить с помощью шестнадцатеричного представления, вроде #rrggbb или аналогичный им десятеричной триаде rgb(rr, gg, bb). Это цвета, для которых выделено именованное название.

В общем, если есть желание, можно воспользоваться представленной ниже HTML таблицей цветов для CSS и поразить всех своей интеллектуальностью. Шутка.

На мой взгляд, использовать названия цветов в текстовом виде (слова) не очень разумно. Ведь куда проще привести шестнадцатеричное или десятеричное представление, и тогда человек, который будет править их под себя, скажет вам огромное спасибо, ведь в обиходе встречается очень мало людей, которые знают эту таблицу наизусть (мне, по крайней мере, такие не попадались).

Илон Маск рекомендует:  sha1_file - Возвращает SHA1 хэш файла

Приведенные ниже значения можно использовать для задания:

  • цвета фона background-color (как в таблице ниже);
  • цвета текста color;
  • в других местах, подразумевающих ввод цвета, например, свойства border-color, box-shadow и некоторые другие.

Для использования в HTML существует атрибут style, например, следующий код раскрасит блок в красный цвет:

HEX Dec CSS-название Цвет
Основные цвета
#000000 rgb(0,0,0) black чёрный
#C0C0C0 rgb(192,192,192) silver серебряный
#808080 rgb(128,128,128) gray серый
#FFFFFF rgb(255,255,255) white белый
#800000 rgb(128,0,0) maroon тёмно-бордовый
#FF0000 rgb(255,0,0) red красный
#800080 rgb(128,0,128) purple пурпурный
#FF00FF rgb(255,0,255) fuchsia фуксия
#008000 rgb(0,128,0) green зелёный
#00FF00 rgb(0,255,0) lime лаймовый
#808000 rgb(128,128,0) olive оливковый (желтовато-зелёный)
#FFFF00 rgb(255,255,0) yellow жёлтый
#000080 rgb(0,0,128) navy тёмно-синий (морской)
#0000FF rgb(0,0,255) blue синий
#008080 rgb(0,128,128) teal зеленовато-голубой
#00FFFF rgb(0,255,255) aqua цвет морской волны
Дополнительные цвета
#F0F8FF rgb(240,248,255) aliceblue бледно-голубой
#FAEBD7 rgb(250,235,215) antiquewhite античный белый
#7FFFD4 rgb(127,255,212) aquamarine аквамарин (зеленовато-голубой)
#F0FFFF rgb(240,255,255) azure лазурный
#F5F5DC rgb(245,245,220) beige бежевый
#FFE4C4 rgb(255,228,196) bisque фарфоровый
#FFEBCD rgb(255,235,205) blanchedalmond бланшированный миндаль
#8A2BE2 rgb(138,43,226) blueviolet голубовато-фиолетовый
#A52A2A rgb(165,42,42) brown коричневый
#DEB887 rgb(222,184,135) burlywood тяжёлая древесина
#5F9EA0 rgb(95,158,160) cadetblue синий курсантский
#7FFF00 rgb(127,255,0) chartreuse беледно-зелёный (зеленовато-жёлтый)
#D2691E rgb(210,105,30) chocolate шоколадный
#FF7F50 rgb(255,127,80) coral коралловый
#6495ED rgb(100,149,237) cornflowerblue васильковый
#FFF8DC rgb(255,248,220) cornsilk кукурузный
#DC143C rgb(220,20,60) crimson малиновый (тёмно-красный)
#00FFFF rgb(0,255,255) cyan циан (голубой)
#00008B rgb(0,0,139) darkblue тёмно-синий
#008B8B rgb(0,139,139) darkcyan тёмно-голубой
#B8860B rgb(184,134,11) darkgoldenrod тёмно-золотистый
#A9A9A9 rgb(169,169,169) darkgray тёмно-серый
#006400 rgb(0,100,0) darkgreen тёмно-зелёный
#A9A9A9 rgb(169,169,169) darkgrey тёмно-серый
#BDB76B rgb(189,183,107) darkkhaki тёмный хаки
#8B008B rgb(139,0,139) darkmagenta фиолетовый
#556B2F rgb(85,107,47) darkolivegreen тёмно-оливковый
#FF8C00 rgb(255,140,0) darkorange тёмно-оранжевый
#9932CC rgb(153,50,204) darkorchid тёмная орхидея
#8B0000 rgb(139,0,0) darkred тёмно-красный
#E9967A rgb(233,150,122) darksalmon тёмно-лососевый
#8FBC8F rgb(143,188,143) darkseagreen тёмный морской волны
#483D8B rgb(72,61,139) darkslateblue тёмный грифельно-синий
#2F4F4F rgb(47,79,79) darkslategray тёмный грифельно-серый
#2F4F4F rgb(47,79,79) darkslategrey тёмный грифельно-серый
#00CED1 rgb(0,206,209) darkturquoise тёмно-бирюзовый
#9400D3 rgb(148,0,211) darkviolet тёмно-фиолетовый
#FF1493 rgb(255,20,147) deeppink розовый (глубокий розовый)
#00BFFF rgb(0,191,255) deepskyblue глубокий лазурный (небесно-голубой)
#696969 rgb(105,105,105) dimgray тускло-сервый
#696969 rgb(105,105,105) dimgrey тускло-сервый
#1E90FF rgb(30,144,255) dodgerblue синий рекламный
#B22222 rgb(178,34,34) firebrick огнеупорный кирпич
#FFFAF0 rgb(255,250,240) floralwhite цветочный белый
#228B22 rgb(34,139,34) forestgreen тёмно-зелёный (травянисто-зелёный)
#DCDCDC rgb(220,220,220) gainsboro гейнсборо
#F8F8FF rgb(248,248,255) ghostwhite призрачно-белый
#FFD700 rgb(255,215,0) gold золотой
#DAA520 rgb(218,165,32) goldenrod золотистый
#ADFF2F rgb(173,255,47) greenyellow зелёно-жёлтый
#808080 rgb(128,128,128) grey серый
#F0FFF0 rgb(240,255,240) honeydew цвет нектара
#FF69B4 rgb(255,105,180) hotpink ярко-розовый
#CD5C5C rgb(205,92,92) indianred красный индийский
#4B0082 rgb(75,0,130) indigo индиго
#FFFFF0 rgb(255,255,240) ivory слоновая кость
#F0E68C rgb(240,230,140) khaki хаки
#E6E6FA rgb(230,230,250) lavender лавандовый
#FFF0F5 rgb(255,240,245) lavenderblush розовато-ловандовый (багряный)
#7CFC00 rgb(124,252,0) lawngreen зелёный газон
#FFFACD rgb(255,250,205) lemonchiffon лимонный шифон
#ADD8E6 rgb(173,216,230) lightblue светло-синий
#F08080 rgb(240,128,128) lightcoral светло-коралловый
#E0FFFF rgb(224,255,255) lightcyan светло-голубой
#FAFAD2 rgb(250,250,210) lightgoldenrodyellow светлый золотисто-жёлтый
#D3D3D3 rgb(211,211,211) lightgray светло-серый
#90EE90 rgb(144,238,144) lightgreen светло-зелёный
#D3D3D3 rgb(211,211,211) lightgrey светло-серый
#FFB6C1 rgb(255,182,193) lightpink светло-розовый
#FFA07A rgb(255,160,122) lightsalmon светло-лососевый
#20B2AA rgb(32,178,170) lightseagreen светлый морской волны
#87CEFA rgb(135,206,250) lightskyblue светлый лазурный
#778899 rgb(119,136,153) lightslategray светлый грифельно-серый
#778899 rgb(119,136,153) lightslategrey светлый грифельно-серый
#B0C4DE rgb(176,196,222) lightsteelblue светло-серо-голубой
#FFFFE0 rgb(255,255,224) lightyellow светло-жёлтый
#32CD32 rgb(50,205,50) limegreen зелёный лайм
#FAF0E6 rgb(250,240,230) linen льняной (полотняный)
#FF00FF rgb(255,0,255) magenta пурпурный (фуксия, мажента)
#66CDAA rgb(102,205,170) mediumaquamarine средний аквамарин
#0000CD rgb(0,0,205) mediumblue средний синий
#BA55D3 rgb(186,85,211) mediumorchid средний орхидейный
#9370DB rgb(147,112,219) mediumpurple средне-фиолетовый
#3CB371 rgb(60,179,113) mediumseagreen средний морской волны
#7B68EE rgb(123,104,238) mediumslateblue средний грифельно-синий
#00FA9A rgb(0,250,154) mediumspringgreen средний весенне-зелёный
#48D1CC rgb(72,209,204) mediumturquoise средне-бирюзовый
#C71585 rgb(199,21,133) mediumvioletred средний фиолетово-красный
#191970 rgb(25,25,112) midnightblue полуночно-синий
#F5FFFA rgb(245,255,250) mintcream мятно-кремовый
#FFE4E1 rgb(255,228,225) mistyrose дымчато-розовый
#FFE4B5 rgb(255,228,181) moccasin мокасин
#FFDEAD rgb(255,222,173) navajowhite белый навахо
#FDF5E6 rgb(253,245,230) oldlace старые кружева
#6B8E23 rgb(107,142,35) olivedrab оливково-жёлтый
#FFA500 rgb(255,165,0) orange оранжевый
#FF4500 rgb(255,69,0) orangered оранжево-красный
#DA70D6 rgb(218,112,214) orchid светло-лиловый (орхидея)
#EEE8AA rgb(238,232,170) palegoldenrod бледно-золотистый
#98FB98 rgb(152,251,152) palegreen бледно-зелёный
#AFEEEE rgb(175,238,238) paleturquoise бледно-бирюзовый
#DB7093 rgb(219,112,147) palevioletred фиолетово-красный
#FFEFD5 rgb(255,239,213) papayawhip взбитая папайя
#FFDAB9 rgb(255,218,185) peachpuff слойные персики
#CD853F rgb(205,133,63) peru перуанский
#FFC0CB rgb(255,192,203) pink розовый
#DDA0DD rgb(221,160,221) plum сливовый
#B0E0E6 rgb(176,224,230) powderblue пыльно-голубой
#BC8F8F rgb(188,143,143) rosybrown розово-коричневый
#4169E1 rgb(65,105,225) royalblue ярко-синий
#8B4513 rgb(139,69,19) saddlebrown бурый
#FA8072 rgb(250,128,114) salmon оранжево-розовый (лососевый)
#F4A460 rgb(244,164,96) sandybrown кожаный
#2E8B57 rgb(46,139,87) seagreen морской волны
#FFF5EE rgb(255,245,238) seashell морская ракушка
#A0522D rgb(160,82,45) sienna охра
#87CEEB rgb(135,206,235) skyblue лазурный (небесно-голубой)
#6A5ACD rgb(106,90,205) slateblue грифельно-синий
#708090 rgb(112,128,144) slategray грифельно-серый
#708090 rgb(112,128,144) slategrey синевато-серый
#FFFAFA rgb(255,250,250) snow снежный
#00FF7F rgb(0,255,127) springgreen весенне-зелёный
#4682B4 rgb(70,130,180) steelblue синевато-стальной
#D2B48C rgb(210,180,140) tan жёлто-коричневый (дубильная кора)
#D8BFD8 rgb(216,191,216) thistle чертополох
#FF6347 rgb(255,99,71) tomato томатный
#40E0D0 rgb(64,224,208) turquoise бирюзовый
#EE82EE rgb(238,130,238) violet фиолетовый (лиловый)
#F5DEB3 rgb(245,222,179) wheat пшеничный
#F5F5F5 rgb(245,245,245) whitesmoke дымчато-белый
#9ACD32 rgb(154,205,50) yellowgreen жёлто-зелёный

Прошу простить за возможные ошибки перевода, но не носителю языка некоторые конструкции (которые и словарям неизвестны) трудно представить на русском.

Цвет в CSS

Цвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию, в формате RGB, RGBA, HSL, HSLA.

По шестнадцатеричному значению

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трёх цветов — красный, зелёный и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зелёную, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.


По названию

Браузеры поддерживают некоторые цвета по их названию. В табл. 1 приведены названия, шестнадцатеричный код, значения в формате RGB, HSL и описание.

Табл. 1. Названия цветов

Имя Цвет Код RGB HSL Описание
white #ffffff или #fff rgb(255,255,255) hsl(0,0%,100%) Белый
silver #c0c0c0 rgb(192,192,192) hsl(0,0%,75%) Серый
gray #808080 rgb(128,128,128) hsl(0,0%,50%) Тёмно-серый
black #000000 или #000 rgb(0,0,0) hsl(0,0%,0%) Черный
maroon #800000 rgb(128,0,0) hsl(0,100%,25%) Тёмно-красный
red #ff0000 или #f00 rgb(255,0,0) hsl(0,100%,50%) Красный
orange #ffa500 rgb(255,165,0) hsl(38.8,100%,50%) Оранжевый
yellow #ffff00 или #ff0 rgb(255,255,0) hsl(60,100%,50%) Желтый
olive #808000 rgb(128,128,0) hsl(60,100%,25%) Оливковый
lime #00ff00 или #0f0 rgb(0,255,0) hsl(120,100%,50%) Светло-зелёный
green #008000 rgb(0,128,0) hsl(120,100%,25%) Зелёный
aqua #00ffff или #0ff rgb(0,255,255) hsl(180,100%,50%) Голубой
blue #0000ff или #00f rgb(0,0,255) hsl(240,100%,50%) Синий
navy #000080 rgb(0,0,128) hsl(240,100%,25%) Тёмно-синий
teal #008080 rgb(0,128,128) hsl(180,100%,25%) Сине-зелёный
fuchsia #ff00ff или #f0f rgb(255,0,255) hsl(300,100%,50%) Розовый
purple #800080 rgb(128,0,128) hsl(300,100%,25%) Фиолетовый

С помощью RGB

Можно определить цвет, используя значения красной, зелёной и синей составляющей в десятичном исчислении. Каждая из трёх компонент цвета принимает значение от 0 до 255. Также допустимо задавать цвет в процентном отношении, при этом 100% будет соответствовать числу 255. Вначале указывается ключевое слово rgb , а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 128, 128) или rgb(100%, 50%, 50%).

Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок это значение цвета на цветовом круге (рис. 1) и задаётся в градусах. 0° соответствует красному цвету, 120° — зелёному, а 240° — синему. Значение оттенка может изменяться от 0 до 359.

Рис. 1. Цветовой круг

Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.

Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.

Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

Пример

Результат данного примера показан на рис. 2.

Цвета CSS

С помощью цвета CSS можно задать цвет текста, ссылки, цвет фона или любого другого объекта. Все современные браузеры поддерживают 140 названий цветов. 17 названий цветов CSS считаются стандартными, а остальные 123 – дополнительными.

Стандартными цветами CSS считаются следующие: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.

Существует несколько методов задания CSS цветов. Наиболее распространенные способы следующие:

  1. Задание цвета CSS с помощью английского названия (color: fuchsia).
  2. Задание цвета CSS шестнадцатеричными значением HEX (color: #FF00FF)
  3. Задание цвета CSS десятичным RGB значением (255,0,255).

Таблица цветов CSS

В данной статье ниже приведена таблица, в которой перечислены все английские названия цветов CSS, а также HEX и RGB коды цветов.

Таблица HTML цветов — коды и названия

Коды цветов HTML — это шестнадцатеричные триплеты, представляющие цвета красный, зеленый и синий (#RRGGBB). Например, в красном цвете код цвета # FF0000, который является «255» красным, «0» зеленым и «0» синим. Эти цветовые коды можно использовать для изменения цвета фона, текста и таблиц на веб-странице через CSS.

Название цвета Цветовой код Название цвета Цветовой код
Красный # FF0000 Белый #FFFFFF
Сине-зелёный # 00FFFF Серебряный # C0C0C0
Синий # 0000FF Серый или серый #808080
Темно-синий # 0000A0 Черный #000000
Светло-синий # ADD8E6 Оранжевый # FFA500
Пурпурный #800080 Коричневый # A52A2A
Желтый # FFFF00 Каштановый #800000
известь # 00FF00 Зеленый #008000
Fuxin # FF00FF Оливковый #808000

Цветовая схема

Совет. Используйте наш выбор цвета HTML, если вам нужно выбрать из почти бесконечного множества цветов.

Код цвет
#000000 черный
# 0C090A Ночь
# 2C3539 темно-серый цвет
# 2B1B17 полуночный
# 34282C Древесный уголь
# 25383C Темный шифер серый
# 3B3131 масло
#413839 Черная кошка
# 3D3C3A Iridii
# 463E3F Черный угорь
# 4C4646 Черная корова
# 504A4B Серый волк
#565051 Сердце вампиров
# 5C5858 Серый дельфин
# 625D5D Углеродный серый
#666362 Ясень
# 6D6968 Облачно серый
# 726E6D Дымчатый серый
# 736F6E Серый
# 837E7C гранит
#848482 Броненосец Серый
# B6B6B4 Серый облако
# D1D0CE Серый гусь
# Скорость4E2 платиновый
# BCC6CC Металлический серебристый
# 98AFC7 Серо-голубой
# 6D7B8D Светлый серый шифер
#657383 Шифер серый
# 616D7E Jet Grey
# 646D7E Mist Blue
# 566D7E Мраморный синий
# 737CA1 Шифер Синий
# 4863A0 Стальной синий
# 2B547E Голубая сойка
# 2B3856 Темный шифер Синий
# 151B54 Темно-синий
#000080 Темно-синий
# 342D7E Синий кит
# 15317E Ляпис синий
# 151B8D Джинсовая темно-синяя
# 0000A0 Земля Синий
# 0020C2 Синий кобальт
# 0041C2 Голубика голубая
# 2554C7 Сапфирово-синий
# 1569C7 Голубые глаза
# 2B60DE Королевский синий
# 1F45FC Голубая орхидея
# 6960EC Голубой Лотос
# 736AFF Световой шифер синий
# 357EC7 Windows Blue
# 368BC1 Ледяной синий лед
# 488AC7 Синий Синий
# 3090C7 Голубой плющ
# 659EC7 Синий кои
# 87AFC7 Columbia Blue
# 95B9C7 Голубые
# 728FCE Легкий стальной синий
# 2B65EC Синий океан
# 306EFF Голубая лента
# 157DEC Голубое платье
# 1589FF Dodger Blue
# 6495ED Васильковый
# 6698FF Голубое небо
# 38ACEC Бабочка Blue
# 56A5EC айсберг
# 5CB3FF Кристально синий
# 3BB9FF Глубокий небесно-голубой
# 79BAEC Джинсовый синий
# 82CAFA Светло-голубой
# 82CAFF День Голубого
# A0CFEC Джинсы синие
# B7CEEC Голубой ангел
# B4CFEC Пастель Синий
# C2DFFF Синее море
# C6DEFF Порошок синий
#AFDCEC Коралловый синий
#ADDFFF Светло-синий
#BDEDFF Робин Яйцо Синий
#CFECEC Бле дно-голубая лилия
# E0FFFF Светлый голубой
# EBF4FA вода
# F0F8FF AliceBlue
# F0FFFF лазурь
#CCFFFF Свет овой шифер
# 93FFE8 Легкий аквамарин
# 9AFEFF Электрический синий
# 7FFFD4 Аквамарин
# 00FFFF Голубой или Аква
# 7DFDFE Трон Блю
# 57FEFF Синий циркон
# 8EEBEC Голубая лагуна
# 50EBEC небесный
# 4EE2EC Голубой бриллиант
# 81D8D0 Тиффани Блю
# 92C7C7 Cyan Opaque
# 77BFC7 Голубая Хоста
# 78C7C7 Северное сияние
# 48CCCD Средняя бирюза
# 43C6DB Бирюзовый
# 46C7C7 медуза
# 7BCCB5 Цвет морской волны
# 43BFC7 Ара синий зеленый
# 3EA99F Светло-зеленый
# 3B9C9C Темный бирюзовый
# 438D80 Морская черепаха зеленая
#348781 Средний аквамарин
# 307D7E Зеленый
# 5E7D7E Сероватый бирюзовый
# 4C787E Жук Зеленый
#008080 чирок
# 4E8975 Цвет морской волны
# 78866B Камуфляж зеленый
# 848b79 Зеленый шалфей
# 617C58 Хейзел Грин
# 728C00 Зеленый яд
# 667C26 Папоротник зеленый
#254117 Темный лес зеленый
#306754 Средний морской зеленый
#347235 Средний лес зеленый
# 437C17 Морские водоросли
# 387C44 Сосновый зеленый
# 347C2C Джунгли Грин
# 347C17 Shamrock Green
#348017 Средний весенний зеленый
# 4E9258 Зеленый лес
# 6AA121 Зеленый лук
# 4AA02C Весенний зеленый
# 41A317 Лайм Грин
# 3EA055 Зеленый клевер
# 6CBB3C Зеленая змея
# 6CC417 Чужой Грин
# 4CC417 Зеленое яблоко
# 52D017 Желто-зеленый
# 4CC552 Келли зеленый
# 54C571 Зомби-зеленый
# 99C68E Лягушка зеленый
# 89C35C Зеленый горошек
# 85BB65 Доллар Билл Грин
# 8BB381 Темное море
# 9CB071 Игуана Грин
# B2C248 Авокадо-зеленый
# 9DC209 Фисташковый зеленый
# A1C935 Зеленый салат
# 7FE817 Колибри Зеленый
# 59E817 Туманность Грин
# 57E964 Стоп-сигнал Go Green
# 64E986 Водоросли Зеленые
# 5EFB6E Нефрит зеленый
# 00FF00 зеленый
# 5FFB17 Изумрудно-зеленый
# 87F717 Зеленый газон
# 8AFB17 картезианский монастырь
# 6AFB92 Зеленый дракон
# 98FF98 мятно-зеленый
# B5EAAA Зеленый большой палец
# C3FDB8 Легкий нефрит
# CCFB5D Чай зеленый
# B1FB17 Желто-зеленый
# BCE954 Слизь зеленый
# EDDA74 Goldenrod
# EDE275 Урожайное золото
# FFE87C Солнце
# FFFF00 желтый
# FFF380 Кукуруза желтая
# FFFFC2 Пергамент
#FFFFCC Крем
# FFF8C6 Лимонный шифон
# FFF8DC Кукурузные рыльца
# F5F5DC Бежевый
# FBF6D9 Блондинка
# FAEBD7 AntiqueWhite
# F7E7CE шампанское
#FFEBCD BlanchedAlmond
# F3E5AB ваниль
# ECE5B6 Тан Браун
# FFE5B4 персик
# FFDB58 горчичный
# FFD801 Резиновый Ducky Yellow
# FDD017 Яркое золото
# EAC117 золотисто-коричневый
# F2BB66 Макароны с сыром
# FBB917 шафран
# FBB117 Пиво
# FFA62F Мускусная дыня
# E9AB17 Пчела Желтая
# E2A76F Коричневый сахар
# DEB887 BurlyWood
# FFCBA4 Глубокий персик
# C9BE62 Имбирь Браун
# E8A317 Школьный автобус желтый
# EE9A4D Сэнди Браун
# C8B560 Падение листьев
# D4A017 Оранжевое золото
# C2B280 песок
# C7A317 Коричневый Печенье
# C68E17 карамель
# B5A642 Латунь
# ADA96 в Хаки
# C19A6B Верблюд коричневый
# CD7F32 бронза
# C88141 Тигр Оранж
# C58917 корица
# AF9B60 Bullet Shell
# AF7817 Темный Goldenrod
# B87333 медь
# 966F33 Дерево
#806517 Дуб Браун
#827839 мокасин
# 827B60 Армия Браун
# 786D5F песчаник
# 493D26 кофе мокко
# 483C32 темно-серый
# 6F4E37 Кофе
# 835C3B Бурый медведь
# 7F5217 Красная грязь
# 7F462C сепия
# C47451 Оранжевый лосось
# C36241 Ржавчина
# C35817 Рыжая лиса
# C85A17 Шоколад
# CC6600 Sedona
# E56717 Папайя апельсин
# E66C2C Хэллоуин Оранж
# F87217 Тыква оранжевый
# F87431 Строительство Cone Orange
# E67451 Восход Оранжевый
# FF8040 Манго Оранж
# F88017 Темный оранжевый
# FF7F50 коралловый
# F88158 Баскетбол Оранжевый
# F9966B Легкий лосось
# E78A61 мандарин
# E18B6B Темный лосось
# E77471 Светлый коралл
# F75D59 Бин красный
# E55451 Валентин Красный
# E55B3C Шокирующий Оранжевый
# FF0000 красный
# FF2400 алый
# F62217 Рубиново-красный
# F70D1A Ferrari Red
# F62817 Пожарная машина
# E42217 Лава красный
# E41B17 Любовь Красная
# DC381F Грейпфрут
# C34A2C Честнат красный
# C24641 Черри красный
# C04000 красное дерево
# C11B17 Перец чили
# 9F000F Клюква
#990012 Красное вино
# 8C001A Бургундия
#954535 каштан
# 7E3517 Кроваво красный
# 8A4117 охра
# 7E3817 сангрия
#800517 огнеупорный кирпич
#810541 каштановый
# 7D0541 Сливочный пирог
# 7E354D Бархатный мрамор
# 7D0552 Слива бархат
# 7F4E52 Розовый Финч
# 7F5A58 красновато-коричневый
# 7F525D Тусклый фиолетовый
# B38481 Розовый Браун
# C5908E Хаки Роуз
# C48189 Розовый лук
# C48793 Губная помада Розовая
# E8ADAA Роза
# ECC5C0 Розовое золото
# EDC9AF Песок пустыни
# FDD7E4 Свинья Розовый
#FCDFFF Сахарная вата
#FFDFDD Розовая пузырьковая камедь
# FBBBB9 Туманная роза
#FAAFBE розовый
#FAAFBA Светло-розовый
# F9A7B0 Фламинго Розовый
# E7A1B0 Розовая роза
# E799A3 Розовая ромашка
# E38AAE Кадиллак Пинк
# F778A1 Гвоздика розовая
# E56E94 Румяна красные
# F660AB Ярко-розовый
# FC6C85 Арбуз розовый
# F6358A Фиолетовый Красный
# F52887 Темно-розовый
# E45E9D Розовый кекс
# E4287C Розовый лемонад
# F535AA Неоновый розовый
# FF00FF фуксин
# E3319D Dimorphotheca Magenta
# F433FF Яркий неоновый розовый
# D16587 Бледно-фиолетовый красный
# C25A7C Тюльпан Розовый
# CA226B Средний фиолетовый красный
# C12869 Розовый Розовый
# C12267 Утомленные розовые
# C25283 Застенчивый розовый
# C12283 Темная гвоздика Розовая
# B93B8F слива
# 7E587E Виола Фиолетовый
# 571B7E Фиолетовая радужка
#583759 Слива Фиолетовая
# 4B0082 Индиго
# 461B7E Фиолетовый монстр
# 4E387E Фиолетовый туман
#614051 Баклажан
# 5E5A80 виноград
# 6A287E Фиолетовый джем
# 7D1B7E Темная орхидея
# A74AC7 Фиолетовый цветок
# B048B5 Средняя орхидея
# 6C2DC7 Фиолетовый аметист
# 842DCE Темно-фиолетовый
# 8D38C9 Фиолетовый
# 7A5DC7 Фиолетовый мудрец Буш
# 7F38EC Прекрасный фиолетовый
#8E35EF Пурпурный
#893BFF Aztech Purple
#8467D7 Средний фиолетовый
#A23BEC Жасмин Фиолетовый
#B041FF Фиолетовый нарцисс
#C45AEC Тирьян Фиолетовый
#9172EC Крокус Фиолетовый
#9E7BFF Фиолетовая мимоза
#D462FF Гелиотроп Фиолетовый
#E238EC малиновый
#C38EC7 Фиолетовый дракон
#C8A2C8 Сирень
#E6A9EC Румяна Розовый
#E0B0FF розовато-лиловый
#C6AEC7 Вистерия Фиолетовый
#F9B7FF Цветущий Розовый
#D2B9D3 чертополох
#E9CFEC барвинок малый
#EBDDE2 Лаванда Пиноккио
#E3E4FA Лаванда синяя
#FDEEF4 жемчужный
#FFF5EE Морская ракушка
#FEFCFF Молочный белый
#FFFFFF белый

Код цвета HTML для #FF0000

Цвета, которые составляют # FF0000

W3C Название цвета: Красный
RGB: 255, 0, 0 — HSL: 0,00, 1,00, 0,50
CSS Сокращение: #F00
Web Safe Цвет: Да

Про CSS

Цвета в Css


Мне очень нравится возможность задавать цвета в коде несколькими разными способами, в зависимости от цели использования. Всего таких способов 7.

1. Именованные цвета.

Их достаточно много, все цвета можно найти тут: w3.org/TR/css3-color/#svg-color

Для себя я отсортировала их по оттенкам, моя таблица цветов лежит тут: Handy colors.

Преимущество: через некоторое время использования всегда знаешь как называется нужный цвет или наоборот — как выглядит на странице цвет, имя которого видишь в коде. Очень удобно для экспериментов с CSS.

Недостаток: их всего 147, и не всегда можно подобрать нужный набор оттенков.

2. RGB.

Red, Green, Blue.

Можно задавать двумя способами:

Преимущество: значения цвета можно брать из фотошопа.

Недостаток: неудобно подбирать значения руками, а также нельзя задавать значения числами с плавающей точкой. Например, если захочется задать какой-нибудь цвет через 25%, в цифрах это будет 63.75 — строка с таким значением работать не будет.

3. HEX.

Это тот же RGB, но записанный в шестнадцатеричной системе счисления. Каждая пара знаков означает в той же последовательности красный, зеленый и синий цвета в диапазоне от 00 до FF. Если в парах оба знака одинаковые, можно использовать короткую запись. Например: #FFFFFF → #FFF.

Преимущество: значения удобно брать из фотошопа. Недостаток: неудобно подбирать значения руками, хотя распространенные сочетания легко запоминаются, например #F00 или #DDD или #F90 .

4. RGBA.

RGB с параметром прозрачности (alpha).

Преимущество: наличие прозрачности и возможности гибко ею управлять.

Недостатки: те же, что и для rgb. Так же не поддерживается в IE8 и ниже.

5. HSL.

Hue — цвет. Задается в диапазоне от 0 до 360, означает угол цветового круга (радуги, представленной в виде круга). Saturation — насыщеность цвета, задается в процентах. Lightness — яркость цвета, задается в процентах.

Этот пример дает представление о соответствии цветов градусам:

У цветов был изменен только первый параметр. Изменяя остальные, можно получить много соседних оттенков.

Здесь посередине исходный цвет, слева — с повышенной яркостью, справа — с пониженной насыщенностью:

С помощью HSL удобно подбирать подходящие оттенки не используя графические редакторы:

Преимущество: можно написать нужный цвет не пользуясь колорпикерами, легко подобрать несколько сочетающихся оттенков. Недостатки: не поддерживается в IE8 и ниже.

6. HSLA.

Как HSL, но с прозрачностью.

7. Ключевые слова.

transparent — для обозначения полной прозрачности.

currentColor — текущий цвет текста ( color ) для элемента.

Например, можно написать:

И задавая каждому элементу свой цвет текста получить рамки разного цвета:

Можно даже совсем опустить ключевое слово, и цвет текста будет унаследован автоматически:

Илон Маск рекомендует:  Сформировать залитый прямоугольник с закругленными краями
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL