Цвет в CSS

Цвета в CSS

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

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

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

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

Первоночально в стандартах 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). Для наглядности сведём это в таблицу:

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

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

Чтобы указать цвет в 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 двойных чисел цифры, начиная с символа #.

пример

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

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

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

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

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

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 и поразить всех своей интеллектуальностью. Шутка.

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

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

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

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

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

Цвет в 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 и описание.

С помощью 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.

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

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

Код цвета 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 ) для элемента.

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

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

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