Красный цвет css: Цвет «Красный»— #ff0000, rgb(255, 0, 0), cmyk(0, 100, 100, 0)

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

Все стандартные цвета – их названия, HEX коды и RGB значения.

1

Основные цвета

2

Серые тона

3

Красные тона

4

Оранжевые тона

5

Жёлтые тона

6

Зелёные тона

7

Синие тона

8

Фиолетовые тона

9

Розовые тона

Учебник HTML 5.

Перед тем как мы перейдем с Вами к изучению способов указания цвета в HTML, сразу хочу обратить ваше внимание на то, что впоследствии работа с цветом элемента будет происходить в основном с использованием CSS. В рамках изучения HTML мы познакомимся с методами указания цвета для встроенного CSS, а подробное применение рассмотрим уже при изучении CSS 3 в статье «Цветовое оформление в CSS».

В настоящее время цвета могут быть указаны с помощью следующих методов:

• Шестнадцатеричные значения цвета.
• RGB и RGBA значения цвета.
• HSL и HSLA значения цвета.
• Названия цветов (ключевые слова).

Шестнадцатеричные цвета

Шестнадцатеричные значения цвета поддерживается всеми основными браузерами. Шестнадцатеричные значение цвета имеет следующий синтаксис:

#RRGGBB, где:

• RR (красный)
• GG (зеленый)
• BB (синий)

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

Допускается сокращать шестнадцатеричные числа до трех символов, если каждое из трех двухзначных чисел содержит одинаковые символы. Например, #0000FF можно записывать как #00F.

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

<p style = color: #FF0000">Я абзац красного цвета</p> <!-- задаем цвет текста шестнадцатеричным значением --> 
<p style = color: #EE82EE">Я абзац фиолетового цвета</p> <!-- задаем цвет текста шестнадцатеричным значением --> 
<p style = color: #FF0">Я абзац желтого цвета</p> <!-- задаем цвет текста шестнадцатеричным значением --> 

RGB цвета

Значения цвета RGB поддерживается во всех основных браузерах. Значение цвета RGB задается в следующем порядке: R(красный), G(зеленый), B (синий). Каждый параметр определяет интенсивность цвета и может быть целым числом от 0 до 255 .

Например, значение rgb(0,255,0) отображается как зеленый, так как параметр зеленого установлен в максимальное точке (255), а красный и зелёный установлены в 0. Записывается это следующим образом:

<p style = color: rgb(0,255,0)">Я абзац зеленого цвета</p> <!-- задаем цвет текста значением rgb --> 
<p style = color: rgb(255,0,0)">Я абзац красного цвета</p> <!-- задаем цвет текста значением rgb --> 
<p style = color: rgb(255,165,0)">Я абзац оранжевого цвета</p> <!-- задаем цвет текста значением rgb --> 

RGBA цвета

RGBA является более современным методом задания цвета, где:

• R означает Red (красный)
• G означает Green (зеленый)
• B означает Blue (синий)
• A означает Alpha (степень смешивания с фоном)

Этот метод отличается от RGB тем, что он добавляет альфа-канал, который позволяет задать уровень прозрачности со значениями от 0 до 1, где:

• 0 — цвет невидимый.
• 1 — цвет непрозрачный.

<p style = color: rgba(255, 0, 0, 0.1)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.1 --> 
<p style = color: rgba(255, 0, 0, 0.2)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.2 --> 
<p style = color: rgba(255, 0, 0, 0.3)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.3 --> 
<p style = color: rgba(255, 0, 0, 0.4)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.4 --> 
<p style = color: rgba(255, 0, 0, 0.5)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.5 --> 
<p style = color: rgba(255, 0, 0, 0.6)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.6 --> 
<p style = color: rgba(255, 0, 0, 0.7)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.7 --> 
<p style = color: rgba(255, 0, 0, 0.8)">Я абзац красного цвета?</p> <!-- значение альфа канала 0. 8 --> 
<p style = color: rgba(255, 0, 0, 0.9)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.9 --> 

HSL цвета

К еще одному методу задания цвета относится HSL. HSL это аббревиатура, которая объединяет в себе первые буквы трех признаков:

• Hue — тон.
• Saturation — насыщенность.
• Lightness — осветленность.

При этом используется следующий синтаксис:

hsl(от 0° до 360°, от 0 до 100%, от 0% до 100%), где:

Первое значение – это тон, который указывается в градусах от 0° до 360°. Градусы соответствуют цвету на круге оттенков, изображенном ниже:

Красный цвет соответствует значениям — 0° и 360°, желтый — 60°, зеленый — 120°, голубой — 180°, синий — 240°, фиолетовый — 300° и т. д.

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

Третье значение (осветленность) — указывается в процентах от 0% (полностью черный) до 100% (полностью белый), среднее значение 50% даёт чистый цвет.

Например:

<p style = color: hsl(0,100%,50%)">Я абзац красного цвета</p> <!-- задаем цвет текста значением hsl --> 

Ниже приведено изображение, где для каждого блока задано свое значение hsl:

HSLA цвета

По аналогии с RGB, HSL поддерживает прозрачность с помощью добавления альфа-канала, который задает уровень прозрачности со значениями от 0 до 1 (от невидимого до полностью непрозрачного).

Данный формат задания цвета называется HSLA, давайте рассмотрим его применение:

<p style = color: hsla(0,100%,50%,0.1)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.1 --> 
<p style = color: hsla(0,100%,50%,0.2)">Я абзац красного цвета?</p> <!-- значение альфа канала 0. 2 --> 
<p style = color: hsla(0,100%,50%,0.3)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.3 --> 
<p style = color: hsla(0,100%,50%,0.4)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.4 --> 
<p style = color: hsla(0,100%,50%,0.5)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.5 --> 
<p style = color: hsla(0,100%,50%,0.6)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.6 --> 
<p style = color: hsla(0,100%,50%,0.7)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.7 --> 
<p style = color: hsla(0,100%,50%,0.8)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.8 --> 
<p style = color: hsla(0,100%,50%,0.9)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.9 --> 

Имена цветов

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

Пример:

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

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

Практическое задание № 11.

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

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

Когда 255 × 0 не равно нулю — CSS-LIVE

Перевод статьи When 255 × 0 does not Equal Zero с сайта danielcwilson.com для css-live.ru, автор — Дэниел Уилсон

Прежде всего, важная оговорка: я не эксперт в работе с цветами и в цветовых профилях мониторов. И я понимаю лишь самые очевидные различия между дефолтным цветовым пространством для веба — sRGB — и другими более новыми моделями. Мы обсудим оба случая, я объясню то, что знаю сам, и оставлю другим возможность (и ссылки) подключиться к разговору и объяснить лучше.

Ладно… с этим разобрались, теперь к делу (и, пожалуй… простите, что заранее проспойлерил, о чем будет статья): поговорим о математике режимов наложения!

Как режимы наложения работают в вебе сегодня

Если вы пользовались Photoshop-ом (а тем, кто тоже вспомнил Сorel-Photo-Paint-из-90-х, от меня особый привет) либо имели дело с mix-blend-mode или background-blend-mode в CSS, режимы наложения могут вам быть в какой-то мере знакомы. Когда два слоя или элемента накладываются друг на друга при указанном режиме наложения, для каждого пикселя происходит вычисление с RGB-цветами обоих элементов на входе, результатом которого становится новый цвет для отображения. Есть много разных режимов вроде multiply или hard-light, по разным формулам рассчитывающих отображаемые цвета в местах наложения элементов.

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

Веб использует sRGB в качестве цветового пространства по умолчанию. Это происходит при интерполяции цветов в анимациях и градиентах, и благодаря этому математика очень простая. Даже если указать значение в HSL (как оттенок, насыщенность и яркость), итоговый цвет будет рассчитываться как RGB-цвет (красный, зеленый и синий компоненты). В модулях CSS Color 4-го и 5-го уровней будет больше вариантов, и на гитхабе Рабочей группы идет множество обсуждений, как в будущем можно будет интерполировать значения по разным моделям.

Но на сегодня математика режимов наложения применяется один раз для красного канала, один раз для зеленого, и один раз для синего.

Мы рассмотрим эту математику на примере multiply, а затем поговорим о некоторых ключевых моментах, где с математикой что-то не складывается.

Режим наложения

Возьмем красный цвет (red), определенный как #ff0000. Каждый канал — это число от 0 до 255 (включительно). У этого цвета 255 в красном канале и по 0 в зеленом и синем.

Значение #ff0000 эквивалентно функции rgb(255,0,0). В этой функции можно использовать и проценты, так что до дальше в статье мы будем говорить о значениях от 0% до 100%, а не от 0 до 255. В такой записи red — это rgb(100%,0%,0%).

Допустим, мы хотим смешать его с другим цветом, возьмем желтый в виде rgb(100%, 100%, 0%).

Для наложения в режиме multiply мы берем значения из каждого элемента по каждому каналу и перемножаем их. Мы делаем это на шкале от 0 до 1 (так что 100% — это 1, 50% — это .5, и т.д.)

• Красный в RGB: rgb(100%, 0%, 0%)
• Желтый в RGB: rgb(100%, 100%, 0%)
• Умножение в R-канале: 1 × 1 = 1
• Умножение в G-канале: 0 × 1 = 0
• Умножение в B-канале: 0 × 0 = 0

Таким образом наш результат, переведенный обратно в проценты — это rgb(100%, 0%, 0%)… или же наше исходное значение красного цвета!

Перемножение красного и желтого дает красный. Посмотреть пример на CodePen

Что, если вместо этого мы возьмем голубой (rgb(0%,100%,100%))?

• Красный в RGB: rgb(100%, 0%, 0%)
• Голубой в RGB: rgb(0%, 100%, 100%)
• Умножение в R-канале: 1 × 0 = 0
• Умножение в G-канале: 0 × 1 = 0
• Умножение в B-канале: 0 × 1 = 0

Переведя обратно в проценты, получим rgb(0%, 0%, 0%): черный цвет

Перемножение красного и голубого дает черный. Посмотреть пример на CodePen

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

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

До тех пор, пока не окажется иначе.

Когда расчет происходит за пределами цветового пространства

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

Как отмечено выше, когда вы указываете в вебе цвет типа rgb(100% 0% 0%), вы имеете дело с цветовым пространством sRGB, и это основная спецификация цветов, которую веб знает. Есть другие, более новые способы указывать цвет, скажем, функция color(), они уже начинают понемногу поддерживаться, но в простейшем случае, если вам нужен яркий красный цвет, вы напишете rgb(100% 0% 0%). Когда вам, например, нужен градиент от этого красного цвета до синего (rgb(0% 0% 100%)), браузер определяет промежуточные значения в этом же пространстве sRGB и рассчитывает их, постепенно уменьшая красный канал от 100 до 0, одновременно увеличивая синий канал от 0 до 100.

Но разные экраны и мониторы используют разные цветовые пространства, когда отображают цвет для пользователя. Например, на Маках можно открыть настройку System Preferences > Displays > Color и посмотреть, какой экранный профиль использует ваш компьютер. Есть вероятность, что на iMac он использует нечто под названием Color LCD, и в конечном итоге это значит, что когда вы указываете rgb(100% 0% 0%) в коде страницы в браузере, который использует схему управления цветом текущего устройства (скажем, Safari или Edge/Chrome), браузер формально использует другие значения R, G и B, чтобы отобразить подобный красный цвет.

На iMac, за которым я недавно работал, цвет на экране (с помощью инструмента Digital Color Meter) оказался не 255 0 0, a 252 13 27.

Красный цвет использует слегка разные значения в sRGB и разных экранных профилях.

Аналогично, голубой цвет (заданный как rgb(0 255 255)) отобразился как rgb(45 255 254).

Голубой цвет использует слегка разные значения в sRGB и разных экранных профилях.

Большинству дизайнеров и разработчиков не приходится сталкиваться с этой информацией, потому что, опять же, интерполяция в вебе происходит в пространстве sRGB, так что расчеты для градиентов, о которых мы говорили выше, по-прежнему происходят между исходными значениями. А экранная система по-своему пересчитывает эти sRGB-цвета, определяемые браузером, в нужные цвета на экране.

Ладно.

А теперь неожиданный поворот.

Расчеты не всегда происходят в sRGB.

В частности… и вы уже могли догадаться, судя по тому, сколько времени я потратил на обсуждение режимов наложения…

Математика режимов наложения в Safari, Edge и Chrome работает в цветовом пространстве экрана, а не в sRGB.

:эмодзи со взрывающимся мозгом:

Так… что же это значит?

Это значит, что по состоянию на сегодняшний день я могу стабильно задавать цвета только в sRGB, и с режимами наложения получать результат только в цветовом профиле экрана. Преобразуя в проценты значения красного и голубого цветов на экране Мака, о которых шла речь выше, мы получим:

• Красный: rgb(98. 824% 5.098% 10.588%)
• Голубой: rgb(17.647% 100% 99.608%)

И когда Chrome или Safari выполняет наложение в режиме умножения с этим значениями (которое изначально давало нам rgb(0 0 0) в sRGB):

• Умножение в R-канале: .98824 × .17647 = 17.439%
• Умножение в G-канале: .05098 × 1 = 5.098%
• Умножение в B-канале: .10588 × .99608 = 10.546%

Это, конечно, тёмный цвет… но не черный. Два исходных цвета, определенные в sRGB, дают в результате цвет, тоже определенный в sRGB, используя расчет в другом цветовом пространстве.

Похожие комбинации цветов, которые должны давать черный, например умножение желтого (rgb(100% 100% 0%)) на синий (rgb(0% 0% 100%)), тоже дают значения, близкие к черному… но не черный.

Умножение в других цветовых пространствах дают значения, отличающиеся от черного. Посмотреть пример в CodePen

Это ожидаемо?

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

Как отмечено выше, в Firefox такой проблемы нет, хотя есть мнение, что это отчасти оттого, что Firefox не поддерживает продвинутого управления цветом.

Еще одна причина, почему это кажется неправильным способом расчета — то, что в Canvas цвета смешиваются по-другому. С теми же самыми цветами в canvas и тем же самым режимом наложения даже в Safari и Chrome получается сплошной черный цвет (black).

Наложение красного и голубого цветов в режиме умножения в canvas в Chrome верно отображает сплошной черный цвет. Смотреть пример в CodePen.

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

Более глобальная дискуссия

Люди, глубоко разбирающиеся в управлении цветами (вдобавок к цветам в вебе), предлагают разные подходы, как быть с этим в будущем. Крис Лилли и другие в W3C давно проталкивают управление цветами в вебе и обсуждают возможные варианты, как задавать цветовое пространство для документа и т.д. (спасибо Амелии Беллами-Ройдз за наводку на несколько соответствующих ишью на Гитхабе). Даже там, кажется, большинство согласно, что sRGB — дефолтный вариант ради совместимости, тем более когда вы именно в нем и работаете. В будущем, когда мы сможем писать lab() или color(display-p3 100% 0% 0%), что даст нам другой диапазон в определенных цветовых пространствах, можно будет подумать о другом дефолтном варианте для интерполяции и композитинга. Занятно будет посмотреть, до чего дойдут новые уровни спецификации цветов с такими редакторами, как Крис, Лия Веру, Юна Кравец и Адам Аргайл.

Большое спасибо Эрику Портису за введение в некоторые инструменты Мака (типа Digital Color Meter) и основы экранных профилей мониторов. Это оказалось той основой, без которой я так и не смог бы понять, почему мои визуальные результаты не совпадают с результатами расчетов по спецификации. Он также начал небольшое обсуждение в Твиттере, которое подтвердило некоторые наши теории о том, что происходило с режимами наложения.

P.S. Это тоже может быть интересно:

Цвета HTML Color Теория

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

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

В CSS, цвета могут быть установлены с помощью названия цвета:

Пример

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

С помощью CSS цвета можно задать различными способами:

• По именам цветов
• Как значения RGB
• В виде шестнадцатеричных значений
• Как HSL значения (CSS3)
• Как хвб значения (ксс4)

Цвета RGB

Значения цветов RGB поддерживаются во всех браузерах.

Значение цвета RGB задается с помощью: RGB (красный, зеленый, синий).

Каждый параметр (красный, зеленый и синий) определяет интенсивность цвета как целое число между 0 и 255.

Например, RGB (0, 0255) отображается синим цветом, поскольку параметру Blue присвоено наибольшее значение (255), а другим — 0.

Привер

Оттенки серого часто определяются с использованием одинаковых значений для всех 3 источников света:

Пример

Шестнадцатеричные цвета

Шестнадцатеричные значения цветов также поддерживаются во всех браузерах.

Шестнадцатеричный цвет задается с помощью: #RRGGBB.

RR (red), GG (зеленый) и BB (синий) являются шестнадцатеричными целыми числами между 00 и FF, указав интенсивность цвета.

Например, #0000FF отображается синим цветом, так как синий компонент имеет наивысшее значение (FF), а остальные — 00.

Цвет

Оттенки серого часто определяются с использованием одинаковых значений для всех 3 источников света:

Цвет

Верхний или нижний регистр?

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

Нижний регистр легче писать. Верхний регистр легче читать.

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

CSS поддерживает 140 стандартных имен цветов.

В следующей главе вы найдете полный алфавитный список имен цветов с шестнадцатеричными значениями:

Основы работы с языком CSS

Мы с вами уже разобрали основные теги языка HTML и теперь пришло время навести красоту. Хотелось бы иметь возможность менять цвет текста, его размер, фон и многое другое. Это делается с помощью языка CSS.

Как правило, CSS команды (стили) хранятся в отдельном файле, который подключается специальным тегом ко всем HTML страницам нашего сайта.

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

Файл со стилями должен иметь расширение .css. Чтобы подключить такой файл к HTML странице, в теге head следует написать такую конструкцию:

<link rel=»stylesheet» href=»имяФайла.css»>

В следующем примере к нашему HTML файлу подключается CSS файл styles.css:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> <link rel="stylesheet" href="styles. css"> </head> <body> <p> Это абзац с текстом. </p> </body> </html>

Создайте и подключите ко всем вашим страницам файл styles.css.

Как работать с CSS

Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу <p> соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет.

После селектора следует ставить фигурные скобки {}, внутри которых следует писать CSS свойства.

Свойства и задают цвет, размер шрифта и другие интересные вещи. Их следует писать в таком формате: имя свойства, потом двоеточие, потом значение этого свойства (например, свойство — это цвет, а «красный» — это значение). Потом нужно поставить точку с запятой и можно писать следующее свойство.

Давайте, например, покрасим все абзацы в красный цвет:

p { color: red; }

В вашем файле styles. css разместите код, красящий абзацы в красный цвет. Откройте страницы вашего сайта в браузере и убедитесь в том, что все абзацы стали красными.

Другие значения для цвета

Помимо ключевого слова red, задающего красный, можно использовать и другие английские слова для цвета, например, green — зеленый, blue — голубой, yellow — желтый, orange — оранжевый, black — черный, white — белый.

Используя соответствующие селекторы покрасьте заголовки h2 в зеленый цвет, заголовки h3 в голубой, заголовки h4 — в красный, а абзацы — в оранжевый.

Цветовая модель HSL в CSS 3.

Глава 4

Ранее в ходе обучения HTML и CSS 2.1 мы с Вами уяснили что цвет того или иного элемента сайта может быть определён следующими способами:

• Именным значением, например: red — красный.
• Значением цвета RGB, например: RGB(255,0,0) — опять таки красный.
• Шестнадцатеричным значением цвета RGB, например: #ff0000 — всё тот же красный.

Об этих методах определения цвета я писал в главе «Цвет и фон» учебника CSS поэтому повторятся не стану а расскажу о ещё одном способе определения цвета, который предлагает спецификация CSS 3.

В CSS 3 вошёл ещё один способ определения цвета с помощью HSL (от англ. Hue, Saturation, Lightness). — это модель, в которой цвет определяется тремя параметрами: Оттенком (тоном), насыщенностью и светлотой. Давайте рассмотрим каждый параметр отдельно:

Оттенок.

Для того чтобы определить тон (Hue) нужно указать градус поворота (от 0° до 360°) цветового спектра замкнутого в цветовой круг — во сказанул!! )) В общем, смотрите на рисунок там наглядно показано откуда берётся этот угол.. Имеется, значит, радуга замкнутая в круг в котором красный всегда ориентирован на север и равен 0 градусам (ну и 360° тоже), 120 градусов это зелёный, 240° синий — это основные три цвета которые, смешиваясь, образуют ещё три дополнительных 60° жёлтый 180° голубой и 300° фиолетовый. . Ну а между этими шестью основными и дополнительными цветами расположены все остальные оттенки цветового спектра.

Насыщенность.

Второе значение (Saturation) цветовой модели HSL определяет насыщенность выбранного нами оттенка и указывается в процентах в диапазоне от 0% до 100%. Чем ближе данное значение к 100% тем цвет выглядят более чисто и «сочно» и наоборот если насыщенность стремится к 0% то цвет «линяет» и становится серым.

Светлота.

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

Такая вот теория.. теперь к практике..

Как обычно покажу на примере:

. blok1 {background-color:hsl(0,0%,0%)}

Альфа каналы.

RGBA

На ряду со свойством opacity определяющего степень прозрачности элемента в CSS 3 появился так называемый альфа канал, который позволяет сделать цвет прозрачным непосредственно при его указании.

Так у уже знакомого нам способа определения цвета RGB (Red, Green, Blue ) появляется четвёртое значение RGBA (Red, Green, Blue, Alpha) это и есть пресловутый альфа канал который определяет степень прозрачности. Степень прозрачности, точно так же как и для свойства opacity определяется значением от 0 до 1 где 0 полностью прозрачный а 1 непрозрачный вовсе.

Пример:

. blok3{background-color:rgba(255,0,0,1)}

HSLA

Цветовая модель HSLA это тоже самое, что и HSL только с добавлением альфа канала. Альфа канал в HSLA аналогичен с только что разобранным альфа каналом в RGBA, поэтому повторятся, не буду просто покажу пример:

. blok1{background-color:hsla(120,100%,50%,0.1)}

• Считается, что преимуществом цветовой схемы HSL перед RGB являются более природные естественные цвета так как формат RGB был создан специально для электроннолучевых трубок.. ну не знаю.. во первых лично у меня не столь придирчивый глаз, а во вторых какая разница ведь всё равно в итоге цвет на странице будет показан с помощью электроннолучевой трубки — ну или её аналога!? то есть в определённом сочетании красного, зелёного и синего цвета т. е. по сути цвет HSL будет в итоге переконвертирован в RGB.

• А вот что мне нравится в HSL так это то, что цвет заданный таким способом интуитивно понятен, то есть, взглянув на цифры, допустим hsl(60,100%,50%) можно сразу же представить каким приблизительно в итоге будет цвет достаточно просто держать в голове цветовой круг (радугу) и знать теорию, о которой мы говорили выше. А вот с RGB цветом ничего, как правило, непонятно до тех пор, пока в фотошопе или ещё где-нибудь не посмотришь на цифры сочетания красного, зелёного и синего.

• Форматы HSL, HSLA и RGBA воспринимают версии браузеров начиная с: IE 9.0, Opera 10.0 Firefox 3.0 … А как быть со старыми версиями браузеров решать уже Вам. Однако хочу отметить, что одному и тому же элементу цвет можно задать несколькими способами.

  Ну например:

  .blok {
  background-color:rgb(255,0,0)
  background-color:rgba(255,0,0,0.5)
  }

  При таком раскладе цвет в старых браузерах хоть и не будет полупрозрачным , но зато будет правильным.. конкретно в этом случае красным.

Перечисление цветов Color, а также функции ColorFade, ColorValue и RGBA в Power Apps — Power Apps

CSS Color Basics — как css раскрасить html-страницы

Как установить цвет с помощью CSS?

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

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

Именованные цвета — это самый простой метод применения цветов в CSS. Это предварительно определенные ключевые слова цвета, такие как красный, синий, зеленый и т. Д.

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

Шестнадцатеричные цвета

Шестнадцатеричные значения представляют собой шестизначное трехбайтовое шестнадцатеричное число.Это также приводит к комбинации красного, синего и зеленого цветов в виде #rrbbgg . Первый rr соответствует красному цвету, bb соответствует синему цвету, а gg соответствует зеленому цвету. Чтобы определить шестнадцатеричный цвет , вы можете установить диапазон от 00 до FF.

1. # 000000 представляет черный цвет
2. # FF00FF представляет темно-фиолетовый цвет

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

цветов RGB

Компьютеры отображают цвета, сочетая различные уровни красного, синего и зеленого . Такое сочетание цветов называется RGB. Мы можем установить значений RGB в десятичных или процентных значениях. Эти значения устанавливаются в функции RGB ().

1. rgb (redvalue, bluevalue, greenvalue)
2. rgb (0,0,0) rgb установлен в десятичных значениях
3. rgb (0%, 0%, 0%) rgb установлен в процентных значениях
4. h2 {color: rgb (0,255,0);} представляет собой цвет лайма

Основные цвета

Как использовать цвета шестнадцатеричного кода CSS с альфа-значениями

Введение

В CSS есть несколько форматов цветов, которые можно использовать.Общие включают шестнадцатеричные коды, RGB (красный, зеленый, синий), RGBA (красный, зеленый, синий, альфа) и HSL (оттенок, насыщенность, яркость).

В этой статье вы рассмотрите шестнадцатеричные цветовые коды и изучите использование альфа-значений для прозрачности.

Предварительные требования

Если вы хотите продолжить эту статью, вам понадобятся:

• Требуется некоторое знакомство с CSS. Вы можете воспользоваться серией руководств «Как создать веб-сайт с помощью CSS», если вам нужно освежить свои знания.
• Современный веб-браузер, поддерживающий #rrggbbaa шестнадцатеричное цветовое обозначение.

Использование ключевых слов цвета

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

В CSS около 140 названных цветов (например, красный , синий , лавандовый и т. Д.).

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

  div {
 красный цвет;
}
  

Различные форматы значений, такие как шестнадцатеричные коды, позволят вам настроить более 140 цветов.

Что такое шестнадцатеричные значения

Вы, вероятно, больше всего привыкли считать с десятичными значениями (или основанием 10):

  0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  

Другими словами, однозначное число имеет только 10 возможных значений (от 0 до 9 ), а после этого оно должно увеличиться до двух цифр ( 10 ).

Шестнадцатеричное значение — 16 вместо 10:

  0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
  

Он использует буквы A , B , C , D , E и F для представления дополнительных значений.

Например, это все допустимые шестнадцатеричные значения:

  00, 01, 99, 9D, 1D, CC, E4, F5
  

Затем узнайте, как использовать шестнадцатеричные значения в стилях CSS.

Использование шестнадцатеричных значений в CSS

При стилизации элемента с помощью CSS вы часто будете изменять значения цвета для таких свойств, как font color , background-color , border-color и т. Д.

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

должны начинаться с «знака числа» (#) (также известного как знак фунта или решетка). Затем шесть цифр шестнадцатеричного значения. Каждая пара из двух цифр представляет красный, зеленый и синий цвета. Шаблон выглядит как #RRGGBB (где красный — R , зеленый — G , а синий — B ).

Цвета представлены комбинацией красного, зеленого и синего цветов. Наименьшее значение ( 00 ) будет самой темной версией цвета (ближайшей к черному), а максимальное значение ( FF ) будет самой светлой версией цвета (ближайшей к белому).

Установка для всех трех пар наименьшее значение ( 00 ) приведет к сплошному черному цвету:

  div {
  цвет: # 000000;
}
  

Установка максимального значения для всех трех пар ( FF ) приведет к сплошному белому цвету:

  div {
  цвет: #FFFFFF;
}
  

Допустим, вы хотите, чтобы текст заголовка был ярко-красным цветом. Для этого вы можете установить для красного цвета ( RR ) максимально возможное значение ( FF ).Поскольку вам не нужны ни зеленый, ни синий, вы можете установить для зеленого ( GG ) и синего ( BB ) значений каждое минимально возможное значение ( 00 ).

  div {
  цвет: # FF0000;
}
  

Этот код будет отображаться как

Красный текст

Изменяя количество красного, синего и зеленого, вы можете создавать самые разные цвета. # DC143C имеет большое количество красного ( DC ) — это даст «малиновый» цвет. # EE82EE имеет большое количество красного ( EE ) и синего ( EE ) — это дает «фиолетовый» цвет. # 40E0D0 имеет большое количество зеленого ( E0 ) и синего ( D0 ) — в результате получается «бирюзовый» цвет.

Примечание. Шестнадцатеричные коды CSS не чувствительны к регистру. Это означает, что буквенные символы могут быть в верхнем или нижнем регистре — # ff0000 эквивалентно # FF0000 . CSS также поддерживает сокращенные значения. Это означает, что # F00 эквивалентно # FF0000 .

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

Затем узнайте, как использовать альфа-значения с шестнадцатеричными кодами CSS.

Добавление альфа-значения в шестнадцатеричные коды CSS

Использование значения альфа для обновления прозрачности цвета изменит формат шестнадцатеричного кода с #RRGGBB на #RRGGBBAA (где альфа — A ). Первые шесть значений (красный, зеленый и синий) остаются прежними.

Значение AA в #RRGGBBAA может варьироваться от наименьшего возможного значения ( 00 ) до максимально возможного ( FF ).Уменьшение значения приведет к тому, что видимость станет все слабее и слабее, пока она не станет прозрачной. Увеличение значения приведет к тому, что видимость станет все более непрозрачной.

Допустим, вам нужен достаточно прозрачный синий цвет.

Сначала начните с шестнадцатеричного кода синего цвета:

  div {
  цвет фона: # 0080FF;
}
  

Этот код будет отображаться как

Цвет фона # 0080FF

Затем вы можете изменить прозрачность, добавив еще два значения в шестнадцатеричный код.В этом примере альфа-значение установлено на 80 :

  div {
  цвет фона: # 0080FF80;
}
  

Этот код будет отображаться как

Цвет фона # 0080FF80

Значение альфа в шестнадцатеричном формате может немного сбивать с толку, потому что трудно представить себе, как на самом деле будет выглядеть значение прозрачности по основанию 16. Однако преимущество в том, что если вы уже используете шестнадцатеричные коды в своей кодовой базе, теперь вы можете обновить их, чтобы изменить прозрачность! Изменения цветового формата не требуется.

Один быстрый совет по просмотру цветов в разных форматах — с помощью Chrome DevTools.

Открыв панель DevTools, поищите цвет, который вы проверяете, в разделе стилей. Найдя его, вы можете щелкнуть поле слева от цвета, чтобы напрямую настроить значения. Вы также можете удерживать SHIFT и щелкать поле, чтобы переключаться между различными параметрами формата с правильно преобразованными значениями.

В этом примере настраиваются значение альфа-канала и значение цвета.Затем переключается между форматом шестнадцатеричного кода, форматом RGBA и форматом HSLA.

Подробнее о палитре цветов Chrome DevTools.

Заключение

В этой статье вы рассмотрели шестнадцатеричные цветовые коды и исследовали использование альфа-значений для прозрачности.

Для поддержки шестнадцатеричных кодов #RRGGBBAA браузером требуются современные браузеры. Он недоступен в старых версиях Internet Explorer. Ссылка Могу ли я использовать шестнадцатеричное обозначение цвета #rrggbbaa , чтобы узнать, подходит ли этот формат для целевой аудитории вашего проекта.

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

CSS Значение: Цвет | HTML Dog

Как изменить цвет текста и фона в CSS

Изменить цвет текста на веб-странице легко с помощью свойства цвета CSS.

Прежде чем мы рассмотрим, как это сделать, важно понять, какими способами можно задать значение свойства. Вы можете использовать:

• HTML-названия цветов: CSS поддерживает 140 названий цветов. Желтый, фуксия, бордовый и небесно-голубой — лишь несколько примеров.
• Шестнадцатеричные цветовые коды: эти коды состоят из трех пар символов, которые представляют интенсивность трех основных цветов. Возможные значения варьируются от 00 (самая низкая интенсивность основного цвета) до FF (самая высокая интенсивность основного цвета).Шестнадцатеричный код цвета для черного — # 000000, красного — # FF0000, синего — # 0000FF.
• значений RGB: RGB — это еще одна цветовая модель, основанная на комбинации основных цветов: красного, зеленого и синего. Состоит из трех чисел, разделенных запятыми, каждое из которых представляет интенсивность соответствующего основного цвета в виде целого числа от 0 до 255. Черный — это rgb (0, 0, 0), красный — это rgb (255, 0, 0), а синий — rgb (0, 0, 255).

Хотя вы можете использовать любое из этих значений, имена цветов не рекомендуются.Мало того, что их трудно запомнить за пределами стандартной радуги, они также вносят неточность. Фуксия одного человека может быть пурпурным, у другого ярко-розовым и так далее.

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

Теперь давайте рассмотрим, как изменить цвет и цвет фона встроенного текста в CSS.

Изменение цвета встроенного текста в CSS

Чтобы изменить цвет встроенного текста, перейдите в раздел своей веб-страницы. Просто добавьте соответствующий селектор CSS и определите свойство цвета с желаемым значением. Например, вы хотите изменить цвет всех абзацев на вашем сайте на темно-синий. Затем вы добавляете p {color: # 000080; } в заголовок вашего HTML-файла.

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

 
 
 
 
 кузов {
 
 цвет: синий; 
 
} 
 
 
  

Если в селекторе тела не задан селектор тела или цвет, то цвет по умолчанию, скорее всего, черный.

Допустим, я хочу изменить цвет абзацев на темно-синий, как указано в примере выше, и все ссылки на моем веб-сайте на голубой.Затем я использовал бы селектор типа p и селектор атрибутов a [href] и установил бы свойство цвета на # 000080 и # 00FFFF соответственно.

Вот код CSS:

 
 
 
 
 п {
 
 цвет: # 000080; 
 
} 
 
 a [href] {
 
 цвет: # 00FFFF; 
 
} 
 
 
  

Вот HTML:

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

 
 
 Другой абзац, содержащий   ссылку.   
 

 
 
  

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

См. «Ручка, изменяющая цвет встроенного текста в CSS» Кристины Перриконе (@hubspot) на CodePen.

Вы можете использовать этот же процесс для изменения цвета заголовков, тегов диапазона, копии кнопки и любого другого текста на странице.Теперь давайте посмотрим, как изменить цвет фона текста.

Изменение цвета фона текста в CSS

Чтобы изменить цвет фона встроенного текста, перейдите в раздел вашей веб-страницы. Просто добавьте соответствующий селектор CSS и определите свойство color и background-color с желаемыми значениями. Допустим, вы хотите изменить цвет фона ссылок на желтый. Затем вы должны добавить следующий код:

 
 
 
 
 a [href] {
 
 цвет: # 000000; 
 
 цвет фона: # FFFF00; 
 
} 
 
 
  

Цвет фона CSS

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

При определении свойства цвета вы также должны определить цвет фона. Необходимо соответствовать W3C CSS и другим фреймворкам, иначе это не повредит.

Проверка цветового контраста

Изменение цвета и цвета фона текста также важно для предотвращения проблем веб-доступности на вашем веб-сайте.

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

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

Вы можете ввести цвет и цвет фона, и он сообщит вам «пройден», если коэффициент контрастности пары составляет 4,5: 1. Все, что ниже, не удастся. Мы воспользуемся этим инструментом, чтобы определить цвета в примере ниже.

Допустим, я хочу, чтобы текст был красным, а фон — серым. Я мог бы начать с подключения # FF0000 и # 808080 к Contrast Checker и увидеть, что у него коэффициент контрастности только 1: 1. Это не хорошо.

Чтобы улучшить соотношение, я переместу ползунок цвета переднего плана влево, а ползунок цвета фона вправо, пока не достигну минимум 4.5: 1.

Поскольку я хочу, чтобы мой дизайн был как можно более четким, я выберу цвет # 0 и цвет фона # E0E0E0, что соответствует соотношению 7: 1.

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

Вот код CSS:

 
 
 
 
 a [href] {
 
 цвет: # 0; 

 
 цвет фона: # E0E0E0; 
 
 текстовое оформление: нет; 
 
} 

  

Вот HTML:

 
 
 
 
 
 Это абзац.Цвет текста по умолчанию - черный. Вы увидите, что абзац ниже тоже черный, за исключением ссылки. С помощью селектора атрибутов я установил цвет, цвет фона и свойство оформления текста так, чтобы он отображался с красноватым цветом шрифта, серым фоном и без подчеркивания. 
 

 
 
 Другой абзац, в котором есть   ссылка  . 
 


  

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

См. «Ручка, изменяющая цвет фона текста в CSS» Кристины Перриконе (@hubspot) на CodePen.

Добавление цвета на ваш веб-сайт

Изменить цвет и цвет фона текста на вашем веб-сайте очень просто. Независимо от того, создаете ли вы свой сайт с нуля или используете Bootstrap CSS, вам просто необходимы некоторые знания HTML и CSS. Однако потребуется время, чтобы изучить названия цветов и коды, а также способы их комбинирования, чтобы сделать ваш веб-сайт и другие маркетинговые материалы доступными. Еще одна причина начать добавлять цвета на свой сайт уже сегодня.

оттенков красного — CSS-портал

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

Темно-красный / # 8b0000 цвет шестигранник

В цветовом пространстве RGB шестнадцатеричный номер 8b0000 (также известный как темно-красный) состоит из 54.5% красный, 0% зеленый и 0% синий. Тогда как в цветовом пространстве CMYK он состоит из 0% голубого, 100% пурпурного, 100% желтого и 45,5% черного. Он имеет угол оттенка 0 градусов, насыщенность 100% и яркость 27,3%. Шестнадцатеричный цвет # 8b0000 можно получить смешиванием # ff0000 с # 170000. Ближайший цвет для веб-безопасности: # 9

.

• ♥

● # 8b0000 описание цвета: Темно-красный .

Шестнадцатеричный цвет # 8b0000 имеет значения RGB R: 139, G: 0, B: 0 и значения CMYK C: 0, M: 1, Y: 1, K: 0,45. Его десятичное значение —
04.

   Текст здесь   

  
 Содержимое 
  

  
 Содержимое 
  

 .текст {color: # 8b0000;}  

  .background {background-color: # 8b0000;}  

  .border {border: 1px solid # 8b0000;}