Содержание

Когда 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, а затем поговорим о некоторых ключевых моментах, где с математикой что-то не складывается.

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

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. Это тоже может быть интересно:

Rgba 255 255 255 0

С помощью универсального конвертер цветов вы можете легко перевести цвет из одной цветовой модели в ряд других.

В первую очередь, калькулятор служит для удобной работы с современными форматами CSS3-цветов. Поддерживается конвертация из HEX в RGB/RGBA и HSL/HSLA, RGB в CMYK, XYZ, LAB, и обратно.

А также специальный функционал для замещения альфа-канала при переводе цвета из RGBA в RGB (и HSLA в HSL).

Справка по цветовым моделям

Далее приводится краткое описание цветовых систем с которыми работает конвертер, разъяснение по форматам, а также примеры использования полученных цветов в CSS/HTML.

HEX / HTML

Цвет в формате HEX — это ни что иное, как шестнадцатеричное представление RGB.

Цвета представляются в виде трёх групп шестнадцатеричных цифр, где каждая группа отвечает за свой цвет: #112233, где 11 — красный, 22 — зелёный, 33 — синий. Все значения должны быть между 00 и FF.

Во многих приложениях допускается сокращённая форма записи шестнадцатеричных цветов. Если каждая из трёх групп содержит одинаковые символы, например #112233, то их можно записать как #123.

Цветовое пространство RGB (Red, Green, Blue) состоит из всех возможных цветов, которые могут быть получены путём смешивания красного, зелёного, и синего. Эта модель популярна в фотографии, телевидении, и компьютерной графике.

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

Некоторые приложения (в частности веб-браузеры) поддерживают процентную запись значений RGB (от 0% до 100%).

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

С недавних пор современные браузеры научились работать с цветовой моделью RGBA — расширением RGB с поддержкой альфа-канала, который определяет непрозрачность объекта.

Значение цвета RGBA задается в виде: rgba(red, green, blue, alpha). Параметр alpha — это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

RGBA поддерживается в IE9+, Firefox 3+, Chrome, Safari, и в Opera 10+.

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

HSL расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Lightness/Luminance (светлота/светлость/светимость, не путать с яркостью).

Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Lightness является процентным значением светлости (от 0% до 100%).

HSL поддерживается в IE9+, Firefox, Chrome, Safari, и в Opera 10+.

По аналогии с RGB/RGBA, для HSL имеется режим HSLA с поддержкой альфа-канала для указания непрозрачности объекта.

Значение цвета HSLA задается в виде: hsla(hue, saturation, lightness, alpha). Параметр alpha — это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

Цветовая модель CMYK часто ассоциируется с цветной печатью, с полиграфией. CMYK (в отличие от RGB) является субтрактивной моделью, это означает что более высокие значения связаны с более тёмными цветами.

Цвета определяются соотношением голубого (Cyan), пурпурного (Magenta), жёлтого (Yellow), с добавлением чёрного (Key/blacK).

Каждое из чисел, определяющее цвет в CMYK, представляет собой процент краски данного цвета, составляющей цветовую комбинацию, а точнее, размер точки растра, выводимой на фотонаборном аппарате на плёнке данного цвета (или прямо на печатной форме в случае с CTP).

Например, для получения цвета «PANTONE 7526» следует смешать 9 частей голубой краски, 83 частей пурпурной краски, 100 — жёлтой краски, и 46 — чёрной. Это можно обозначить следующим образом: (9,83,100,46). Иногда пользуются такими обозначениями: C9M83Y100K46, или (9%, 83%, 100%, 46%), или (0,09/0,83/1,0/0,46).

HSB / HSV

HSB (также известна как HSV) похожа на HSL, но это две разные цветовые модели. Они обе основаны на цилиндрической геометрии, но HSB/HSV основана на модели «hexcone», в то время как HSL основана на модели «bi-hexcone». Художники часто предпочитают использовать эту модель, принято считать что устройство HSB/HSV ближе к естественному восприятию цветов. В частности, цветовая модель HSB применяется в Adobe Photoshop.

HSB/HSV расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Brightness/Value (яркость/значение).

Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Brightness является процентным значением яркости (от 0% до 100%).

Цветовая модель XYZ (CIE 1931 XYZ) является чисто математическим пространством. В отличие от RGB, CMYK, и других моделей, в XYZ основные компоненты являются «мнимыми», то есть вы не можете соотнести X, Y, и Z с каким-либо набором цветов для смешивания. XYZ является мастер-моделью практически всех остальных цветовых моделей, используемых в технических областях.

Цветовая модель LAB (CIELAB, «CIE 1976 L*a*b*») вычисляется из пространства CIE XYZ. При разработке Lab преследовалась цель создания цветового пространства, изменение цвета в котором будет более линейным с точки зрения человеческого восприятия (по сравнению с XYZ), то есть с тем, чтобы одинаковое изменение значений координат цвета в разных областях цветового пространства производило одинаковое ощущение изменения цвета.

Работа с цветовой моделью RGBA

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

  1. На своем блоге опубликовать перевод (можно вольный, с комментариями и дополнениями) статьи из представляемого ресурса.
  2. Переводы как и их источники не должны повторяться, чтобы обеспечить охват и разнообразие информации.
  3. Ссылочно упомянуть блогера, от которого получена благая весть и, по возможности, передать эстафетную палочку дальше.
  4. Сроки эстафеты не устанавливаются; обязательно найдется тот, кто прекратит эту вакханалию.

Первоисточником данного поста послужила одна из заметок Дрю МакЛеллана на коллективно-календарном блоге 24ways. Поехали!

Что такое RGBA-цвет? #

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

CSS3 предлагает пару новых способов задания цвета, один из которых — использование цветовой модели RGBA. Буква «A» в аббревиатуре означает «Альфа»; ее значение отвечает за величину прозрачности цвета. С помощью данной модели мы можем установить не только необходимое сочетание красного, зеленого и синего, но также определить, насколько цвет «просвечивает». Что-то подобное можно наблюдать при работе со слоями в Photoshop.

Для чего тогда свойство оpacity? #

Дело в том, что определение прозрачности для цвета отличается от настройки прозрачности для элемента, заданное с помощью css-свойства opacity . Давайте посмотрим на примере.

У нас имеется заголовок h2 c определенными цветами для текста и фона, находящийся на странице с фоновым рисунком.

Путем установки свойства opacity , можно применить прозрачность ко всему элементу в целом:

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

Или оставить фон без изменений и присвоить прозрачность только тексту:

Вероятно, использование синтаксиса rgb () для определения цвета менее распространено чем шестнадцатеричная запись (вроде #fff ), однако, в данном случае это железная необходимость, поскольку невозможно записать RGBA-значение в шестнадцатеричной нотации. Поэтому, задаем rgba () именно так:

Так же как в rgb () , первые три значения отвечают за сочетание красного, зеленого и синего. Они могут принимать как целочисленные значения в диапазоне 0–255 так и процентные соотношения в промежутке от 0 до 100 %. Четвертое значение определяет степень прозрачности в диапазоне от 0 (абсолютно прозрачный) до 1 (совершенно непрозрачный).

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

Поддержка в браузерах #

Большинство современных браузеров (Firefox, Safari, Opera, Google Chrome) поддерживают RGBA-цвета, но не Internet Explorer.

Ничего не остается, как указывать RGBA-цвета для браузеров, которые их поддерживают, а для остальных придумать свои «костыли».

CSS-парсинг работает в браузерах так, что если при разборе правил встретиться какое-либо неизвестное значение, оно будет проигнорировано. Воспользуемся этим знанием, чтобы отдавать для «непонимающих» браузеров обычный непрозрачный цвет. Для этого достаточно первым объявлением указать цвет в формате RGB, а вторым задать цветовой оттенок в формате RGBA — для браузеров поддерживающих данную цветовую модель.

В случаях, когда вы хотите применить прозрачность для свойства background-color можно прибегнуть к использованию PNG-рисунка с альфа-каналом, чтобы добиться точно такого же эффекта. Конечно, это более затратный способ, в отличие от «чистого» CSS, поскольку придется создавать свой PNG для каждого уровня прозрачности, но на безрыбье и рак рыба.

Используем тот же принцип, что и в предыдущем примере: сначала задаем фон для всех браузеров, а затем переписываем строку с учетом RGBA.

Следует отметить, что такая конструкция работоспособна, поскольку мы используем сокращенную форму записи background , позволяющую одновременно установить и фоновый цвет и фоновое изображение. Браузеры, столкнувшиеся с неизвестным значением rgba () целиком проигнорируют второю строку и будут обрабатывать первое объявление.

Кое-что еще #

Главное преимущество RGBA — возможность создания различных дизайнерских решений без использования рисунков. Выгода здесь не только в более легких (как следствие — более быстрых) страницах, но и в выигрыше во времени: сайты с использование упомянутой технологии проще создавать и поддерживать. Под влиянием Javascript или в ответ на пользовательские действия значения в CSS могут с легкостью изменяться. Рисунки в нашем случае могут затруднить такие преобразования.

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

В заключение #

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

Передаю эстафету Ольге и Евгению, автору блога Проблемы и решения в Web-дизайне.

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

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

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

Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 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.

По названию

Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

Браузеры поддерживают некоторые цвета по их названию. В табл. 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

Internet Explorer Chrome Opera Safari Firefox Android iOS
5.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

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

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

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

RGBA добавлен в CSS3, поэтому валидацию CSS-кода надо проводить именно по этой версии. Следует отметить, что стандарт CSS3 еще находится в разработке и некоторые возможности в нем могут поменяться. К примеру, цвет в формате RGB добавленный к свойству background-color проходит валидацию, а добавленный к свойству background уже нет. При этом браузеры вполне корректно понимают цвет для того и другого свойства.

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 9.6+ 3.1+ 3.0+ 2.1+ 2.0+

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

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

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

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

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

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

Значения цвета в форматах RGBA, HSL и HSLA добавлены в CSS3, поэтому при использовании этих форматов проверяйте код на валидность с учётом версии.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

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

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

Color.AliceBlue ColorValue( «#f0f8ff» )
ColorValue( «aliceblue» )
RGBA( 240, 248, 255, 1 )
Color.AntiqueWhite ColorValue( «#faebd7» )
ColorValue( «AntiqueWhite» )
RGBA( 250, 235, 215, 1 )
Color.Aqua ColorValue( «#00ffff» )
ColorValue( «AQUA» )
RGBA( 0, 255, 255, 1 )
Color.Aquamarine ColorValue( «#7fffd4» )
ColorValue( «Aquamarine» )
RGBA( 127, 255, 212, 1 )
Color.Azure ColorValue( «#f0ffff» )
ColorValue( «azure» )
RGBA( 240, 255, 255, 1 )
Color.Beige ColorValue( «#f5f5dc» )
ColorValue( «Beige» )
RGBA( 245, 245, 220, 1 )
Color.Bisque ColorValue( «#ffe4c4» )
ColorValue( «BISQUE» )
RGBA( 255, 228, 196, 1 )
Color.Black ColorValue( «#000000» )
ColorValue( «Black» )
RGBA( 0, 0, 0, 1 )
Color.BlanchedAlmond ColorValue( «#ffebcd» )
ColorValue( «blanchedalmond» )
RGBA( 255, 235, 205, 1 )
Color.Blue ColorValue( «#0000ff» )
ColorValue( «Blue» )
RGBA( 0, 0, 255, 1 )
Color.BlueViolet ColorValue( «#8a2be2» )
ColorValue( «BLUEVIOLET» )
RGBA( 138, 43, 226, 1 )
Color.Brown ColorValue( «#a52a2a» )
ColorValue( «Brown» )
RGBA( 165, 42, 42, 1 )
Color.Burlywood ColorValue( «#deb887» )
ColorValue( «burlywood» )
RGBA( 222, 184, 135, 1 )
Color.CadetBlue ColorValue( «#5f9ea0» )
ColorValue( «CadetBlue» )
RGBA( 95, 158, 160, 1 )
Color.Chartreuse ColorValue( «#7fff00» )
ColorValue( «CHARTREUSE» )
RGBA( 127, 255, 0, 1 )
Color.Chocolate ColorValue( «#d2691e» )
ColorValue( «Chocolate» )
RGBA( 210, 105, 30, 1 )
Color.Coral ColorValue( «#ff7f50» )
ColorValue( «coral» )
RGBA( 255, 127, 80, 1 )
Color.CornflowerBlue ColorValue( «#6495ed» )
ColorValue( «CornflowerBlue» )
RGBA( 100, 149, 237, 1 )
Color.Cornsilk ColorValue( «#fff8dc» )
ColorValue( «CORNSILK» )
RGBA( 255, 248, 220, 1 )
Color.Crimson ColorValue( «#dc143c» )
ColorValue( «Crimson» )
RGBA( 220, 20, 60, 1 )
Color.Cyan ColorValue( «#00ffff» )
ColorValue( «cyan» )
RGBA( 0, 255, 255, 1 )
Color.DarkBlue ColorValue( «#00008b» )
ColorValue( «DarkBlue» )
RGBA( 0, 0, 139, 1 )
Color.DarkCyan ColorValue( «#008b8b» )
ColorValue( «DARKCYAN» )
RGBA( 0, 139, 139, 1 )
Color.DarkGoldenRod ColorValue( «#b8860b» )
ColorValue( «DarkGoldenRod» )
RGBA( 184, 134, 11, 1 )
Color.DarkGray ColorValue( «#a9a9a9» )
ColorValue( «darkgray» )
RGBA( 169, 169, 169, 1 )
Color.DarkGreen ColorValue( «#006400» )
ColorValue( «DarkGreen» )
RGBA( 0, 100, 0, 1 )
Color.DarkGrey ColorValue( «#a9a9a9» )
ColorValue( «DARKGREY» )
RGBA( 169, 169, 169, 1 )
Color.DarkKhaki ColorValue( «#bdb76b» )
ColorValue( «DarkKhaki» )
RGBA( 189, 183, 107, 1 )
Color.DarkMagenta ColorValue( «#8b008b» )
ColorValue( «darkmagenta» )
RGBA( 139, 0, 139, 1 )
Color.DarkOliveGreen ColorValue( «#556b2f» )
ColorValue( «DarkOliveGreen» )
RGBA( 85, 107, 47, 1 )
Color.DarkOrange ColorValue( «#ff8c00» )
ColorValue( «DARKORANGE» )
RGBA( 255, 140, 0, 1 )
Color.DarkOrchid ColorValue( «#9932cc» )
ColorValue( «DarkOrchid» )
RGBA( 153, 50, 204, 1 )
Color.DarkRed ColorValue( «#8b0000» )
ColorValue( «darkred» )
RGBA( 139, 0, 0, 1 )
Color.DarkSalmon ColorValue( «#e9967a» )
ColorValue( «DarkSalmon» )
RGBA( 233, 150, 122, 1 )
Color.DarkSeaGreen ColorValue( «#8fbc8f» )
ColorValue( «DARKSEAGREEN» )
RGBA( 143, 188, 143, 1 )
Color.DarkSlateBlue ColorValue( «#483d8b» )
ColorValue( «DarkSlateBlue» )
RGBA( 72, 61, 139, 1 )
Color.DarkSlateGray ColorValue( «#2f4f4f» )
ColorValue( «darkslategray» )
RGBA( 47, 79, 79, 1 )
Color.DarkSlateGrey ColorValue( «#2f4f4f» )
ColorValue( «DarkSlateGrey» )
RGBA( 47, 79, 79, 1 )
Color.DarkTurquoise ColorValue( «#00ced1» )
ColorValue( «DARKTURQUOISE» )
RGBA( 0, 206, 209, 1 )
Color.DarkViolet ColorValue( «#9400d3» )
ColorValue( «DarkViolet» )
RGBA( 148, 0, 211, 1 )
Color.DeepPink ColorValue( «#ff1493» )
ColorValue( «deeppink» )
RGBA( 255, 20, 147, 1 )
Color.DeepSkyBlue ColorValue( «#00bfff» )
ColorValue( «DeepSkyBlue» )
RGBA( 0, 191, 255, 1 )
Color.DimGray ColorValue( «#696969» )
ColorValue( «DIMGRAY» )
RGBA( 105, 105, 105, 1 )
Color.DimGrey ColorValue( «#696969» )
ColorValue( «DimGrey» )
RGBA( 105, 105, 105, 1 )
Color.DodgerBlue ColorValue( «#1e90ff» )
ColorValue( «dodgerblue» )
RGBA( 30, 144, 255, 1 )
Color.FireBrick ColorValue( «#b22222» )
ColorValue( «FireBrick» )
RGBA( 178, 34, 34, 1 )
Color.FloralWhite ColorValue( «#fffaf0» )
ColorValue( «FLORALWHITE» )
RGBA( 255, 250, 240, 1 )
Color.ForestGreen ColorValue( «#228b22» )
ColorValue( «ForestGreen» )
RGBA( 34, 139, 34, 1 )
Color.Fuchsia ColorValue( «#ff00ff» )
ColorValue( «fuchsia» )
RGBA( 255, 0, 255, 1 )
Color.Gainsboro ColorValue( «#dcdcdc» )
ColorValue( «Gainsboro» )
RGBA( 220, 220, 220, 1 )
Color.GhostWhite ColorValue( «#f8f8ff» )
ColorValue( «GHOSTWHITE» )
RGBA( 248, 248, 255, 1 )
Color.Gold ColorValue( «#ffd700» )
ColorValue( «Gold» )
RGBA( 255, 215, 0, 1 )
Color.GoldenRod ColorValue( «#daa520» )
ColorValue( «goldenrod» )
RGBA( 218, 165, 32, 1 )
Color.Gray ColorValue( «#808080» )
ColorValue( «Gray» )
RGBA( 128, 128, 128, 1 )
Color.Green ColorValue( «#008000» )
ColorValue( «GREEN» )
RGBA( 0, 128, 0, 1 )
Color.GreenYellow ColorValue( «#adff2f» )
ColorValue( «GreenYellow» )
RGBA( 173, 255, 47, 1 )
Color.Grey ColorValue( «#808080» )
ColorValue( «grey» )
RGBA( 128, 128, 128, 1 )
Color.Honeydew ColorValue( «#f0fff0» )
ColorValue( «Honeydew» )
RGBA( 240, 255, 240, 1 )
Color.HotPink ColorValue( «#ff69b4» )
ColorValue( «HOTPINK» )
RGBA( 255, 105, 180, 1 )
Color.IndianRed ColorValue( «#cd5c5c» )
ColorValue( «IndianRed» )
RGBA( 205, 92, 92, 1 )
Color.Indigo ColorValue( «#4b0082» )
ColorValue( «indigo» )
RGBA( 75, 0, 130, 1 )
Color.Ivory ColorValue( «#fffff0» )
ColorValue( «Ivory» )
RGBA( 255, 255, 240, 1 )
Color.Khaki ColorValue( «#f0e68c» )
ColorValue( «KHAKI» )
RGBA( 240, 230, 140, 1 )
Color.Lavender ColorValue( «#e6e6fa» )
ColorValue( «Lavender» )
RGBA( 230, 230, 250, 1 )
Color.LavenderBlush ColorValue( «#fff0f5» )
ColorValue( «lavenderblush» )
RGBA( 255, 240, 245, 1 )
Color.LawnGreen ColorValue( «#7cfc00» )
ColorValue( «LawnGreen» )
RGBA( 124, 252, 0, 1 )
Color.LemonChiffon ColorValue( «#fffacd» )
ColorValue( «LEMONCHIFFON» )
RGBA( 255, 250, 205, 1 )
Color.LightBlue ColorValue( «#add8e6» )
ColorValue( «LightBlue» )
RGBA( 173, 216, 230, 1 )
Color.LightCoral ColorValue( «#f08080» )
ColorValue( «lightcoral» )
RGBA( 240, 128, 128, 1 )
Color.LightCyan ColorValue( «#e0ffff» )
ColorValue( «LightCyan» )
RGBA( 224, 255, 255, 1 )
Color.LightGoldenRodYellow ColorValue( «#fafad2» )
ColorValue( «lightgoldenrodyellow» )
RGBA( 250, 250, 210, 1 )
Color.LightGray ColorValue( «#d3d3d3» )
ColorValue( «LightGray» )
RGBA( 211, 211, 211, 1 )
Color.LightGreen ColorValue( «#90ee90» )
ColorValue( «lightgreen» )
RGBA( 144, 238, 144, 1 )
Color.LightGrey ColorValue( «#d3d3d3» )
ColorValue( «LightGrey» )
RGBA( 211, 211, 211, 1 )
Color.LightPink ColorValue( «#ffb6c1» )
ColorValue( «LIGHTPINK» )
RGBA( 255, 182, 193, 1 )
Color.LightSalmon ColorValue( «#ffa07a» )
ColorValue( «LightSalmon» )
RGBA( 255, 160, 122, 1 )
Color.LightSeaGreen ColorValue( «#20b2aa» )
ColorValue( «lightseagreen» )
RGBA( 32, 178, 170, 1 )
Color.LightSkyBlue ColorValue( «#87cefa» )
ColorValue( «LightSkyBlue» )
RGBA( 135, 206, 250, 1 )
Color.LightSlateGray ColorValue( «#778899» )
ColorValue( «LIGHTSLATEGRAY» )
RGBA( 119, 136, 153, 1 )
Color.LightSlateGrey ColorValue( «#778899» )
ColorValue( «LightSlateGrey» )
RGBA( 119, 136, 153, 1 )
Color.LightSteelBlue ColorValue( «#b0c4de» )
ColorValue( «lightsteelblue» )
RGBA( 176, 196, 222, 1 )
Color.LightYellow ColorValue( «#ffffe0» )
ColorValue( «LightYellow» )
RGBA( 255, 255, 224, 1 )
Color.Lime ColorValue( «#00ff00» )
ColorValue( «LIME» )
RGBA( 0, 255, 0, 1 )
Color.LimeGreen ColorValue( «#32cd32» )
ColorValue( «LimeGreen» )
RGBA( 50, 205, 50, 1 )
Color.Linen ColorValue( «#faf0e6» )
ColorValue( «linen» )
RGBA( 250, 240, 230, 1 )
Color.Magenta ColorValue( «#ff00ff» )
ColorValue( «Magenta» )
RGBA( 255, 0, 255, 1 )
Color.Maroon ColorValue( «#800000» )
ColorValue( «MAROON» )
RGBA( 128, 0, 0, 1 )
Color.MediumAquamarine ColorValue( «#66cdaa» )
ColorValue( «MediumAquamarine» )
RGBA( 102, 205, 170, 1 )
Color.MediumBlue ColorValue( «#0000cd» )
ColorValue( «mediumblue» )
RGBA( 0, 0, 205, 1 )
Color.MediumOrchid ColorValue( «#ba55d3» )
ColorValue( «MediumOrchid» )
RGBA( 186, 85, 211, 1 )
Color.MediumPurple ColorValue( «#9370db» )
ColorValue( «MEDIUMPURPLE» )
RGBA( 147, 112, 219, 1 )
Color.MediumSeaGreen ColorValue( «#3cb371» )
ColorValue( «MediumSeaGreen» )
RGBA( 60, 179, 113, 1 )
Color.MediumSlateBlue ColorValue( «#7b68ee» )
ColorValue( «mediumslateblue» )
RGBA( 123, 104, 238, 1 )
Color.MediumSpringGreen ColorValue( «#00fa9a» )
ColorValue( «MediumSpringGreen» )
RGBA( 0, 250, 154, 1 )
Color.MediumTurquoise ColorValue( «#48d1cc» )
ColorValue( «MEDIUMTURQUOISE» )
RGBA( 72, 209, 204, 1 )
Color.MediumVioletRed ColorValue( «#c71585» )
ColorValue( «MediumVioletRed» )
RGBA( 199, 21, 133, 1 )
Color.MidnightBlue ColorValue( «#191970» )
ColorValue( «midnightblue» )
RGBA( 25, 25, 112, 1 )
Color.MintCream ColorValue( «#f5fffa» )
ColorValue( «MintCream» )
RGBA( 245, 255, 250, 1 )
Color.MistyRose ColorValue( «#ffe4e1» )
ColorValue( «MISTYROSE» )
RGBA( 255, 228, 225, 1 )
Color.Moccasin ColorValue( «#ffe4b5» )
ColorValue( «Moccasin» )
RGBA( 255, 228, 181, 1 )
Color.NavajoWhite ColorValue( «#ffdead» )
ColorValue( «navajowhite» )
RGBA( 255, 222, 173, 1 )
Color.Navy ColorValue( «#000080» )
ColorValue( «Navy» )
RGBA( 0, 0, 128, 1 )
Color.OldLace ColorValue( «#fdf5e6» )
ColorValue( «OLDLACE» )
RGBA( 253, 245, 230, 1 )
Color.Olive ColorValue( «#808000» )
ColorValue( «Olive» )
RGBA( 128, 128, 0, 1 )
Color.OliveDrab ColorValue( «#6b8e23» )
ColorValue( «olivedrab» )
RGBA( 107, 142, 35, 1 )
Color.Orange ColorValue( «#ffa500» )
ColorValue( «Orange» )
RGBA( 255, 165, 0, 1 )
Color.OrangeRed ColorValue( «#ff4500» )
ColorValue( «ORANGERED» )
RGBA( 255, 69, 0, 1 )
Color.Orchid ColorValue( «#da70d6» )
ColorValue( «Orchid» )
RGBA( 218, 112, 214, 1 )
Color.PaleGoldenRod ColorValue( «#eee8aa» )
ColorValue( «palegoldenrod» )
RGBA( 238, 232, 170, 1 )
Color.PaleGreen ColorValue( «#98fb98» )
ColorValue( «PaleGreen» )
RGBA( 152, 251, 152, 1 )
Color.PaleTurquoise ColorValue( «#afeeee» )
ColorValue( «PALETURQUOISE» )
RGBA( 175, 238, 238, 1 )
Color.PaleVioletRed ColorValue( «#db7093» )
ColorValue( «PaleVioletRed» )
RGBA( 219, 112, 147, 1 )
Color.PapayaWhip ColorValue( «#ffefd5» )
ColorValue( «papayawhip» )
RGBA( 255, 239, 213, 1 )
Color.PeachPuff ColorValue( «#ffdab9» )
ColorValue( «PeachPuff» )
RGBA( 255, 218, 185, 1 )
Color.Peru ColorValue( «#cd853f» )
ColorValue( «PERU» )
RGBA( 205, 133, 63, 1 )
Color.Pink ColorValue( «#ffc0cb» )
ColorValue( «Pink» )
RGBA( 255, 192, 203, 1 )
Color.Plum ColorValue( «#dda0dd» )
ColorValue( «plum» )
RGBA( 221, 160, 221, 1 )
Color.PowderBlue ColorValue( «#b0e0e6» )
ColorValue( «PowderBlue» )
RGBA( 176, 224, 230, 1 )
Color.Purple ColorValue( «#800080» )
ColorValue( «PURPLE» )
RGBA( 128, 0, 128, 1 )
Color.Red ColorValue( «#ff0000» )
ColorValue( «Red» )
RGBA( 255, 0, 0, 1 )
Color.RosyBrown ColorValue( «#bc8f8f» )
ColorValue( «rosybrown» )
RGBA( 188, 143, 143, 1 )
Color.RoyalBlue ColorValue( «#4169e1» )
ColorValue( «RoyalBlue» )
RGBA( 65, 105, 225, 1 )
Color.SaddleBrown ColorValue( «#8b4513» )
ColorValue( «SADDLEBROWN» )
RGBA( 139, 69, 19, 1 )
Color.Salmon ColorValue( «#fa8072» )
ColorValue( «Salmon» )
RGBA( 250, 128, 114, 1 )
Color.SandyBrown ColorValue( «#f4a460» )
ColorValue( «sandybrown» )
RGBA( 244, 164, 96, 1 )
Color.SeaGreen ColorValue( «#2e8b57» )
ColorValue( «SeaGreen» )
RGBA( 46, 139, 87, 1 )
Color.SeaShell ColorValue( «#fff5ee» )
ColorValue( «SEASHELL» )
RGBA( 255, 245, 238, 1 )
Color.Sienna ColorValue( «#a0522d» )
ColorValue( «Sienna» )
RGBA( 160, 82, 45, 1 )
Color.Silver ColorValue( «#c0c0c0» )
ColorValue( «silver» )
RGBA( 192, 192, 192, 1 )
Color.SkyBlue ColorValue( «#87ceeb» )
ColorValue( «SkyBlue» )
RGBA( 135, 206, 235, 1 )
Color.SlateBlue ColorValue( «#6a5acd» )
ColorValue( «SLATEBLUE» )
RGBA( 106, 90, 205, 1 )
Color.SlateGray ColorValue( «#708090» )
ColorValue( «SlateGray» )
RGBA( 112, 128, 144, 1 )
Color.SlateGrey ColorValue( «#708090» )
ColorValue( «slategrey» )
RGBA( 112, 128, 144, 1 )
Color.Snow ColorValue( «#fffafa» )
ColorValue( «Snow» )
RGBA( 255, 250, 250, 1 )
Color.SpringGreen ColorValue( «#00ff7f» )
ColorValue( «SPRINGGREEN» )
RGBA( 0, 255, 127, 1 )
Color.SteelBlue ColorValue( «#4682b4» )
ColorValue( «SteelBlue» )
RGBA( 70, 130, 180, 1 )
Color.Tan ColorValue( «#d2b48c» )
ColorValue( «tan» )
RGBA( 210, 180, 140, 1 )
Color.Teal ColorValue( «#008080» )
ColorValue( «Teal» )
RGBA( 0, 128, 128, 1 )
Color.Thistle ColorValue( «#d8bfd8» )
ColorValue( «THISTLE» )
RGBA( 216, 191, 216, 1 )
Color.Tomato ColorValue( «#ff6347» )
ColorValue( «Tomato» )
RGBA( 255, 99, 71, 1 )
Color.Transparent ColorValue( «#00000000» )
ColorValue( «Transparent» )
RGBA( 0, 0, 0, 0 )
Color.Turquoise ColorValue( «#40e0d0» )
ColorValue( «turquoise» )
RGBA( 64, 224, 208, 1 )
Color.Violet ColorValue( «#ee82ee» )
ColorValue( «Violet» )
RGBA( 238, 130, 238, 1 )
Color.Wheat ColorValue( «#f5deb3» )
ColorValue( «WHEAT» )
RGBA( 245, 222, 179, 1 )
Color.White ColorValue( «#ffffff» )
ColorValue( «White» )
RGBA( 255, 255, 255, 1 )
Color.WhiteSmoke ColorValue( «#f5f5f5» )
ColorValue( «whitesmoke» )
RGBA( 245, 245, 245, 1 )
Color.Yellow ColorValue( «#ffff00» )
ColorValue( «Yellow» )
RGBA( 255, 255, 0, 1 )
Color.YellowGreen ColorValue( «#9acd32» )
ColorValue( «YELLOWGREEN» )
RGBA( 154, 205, 50, 1 )

background-color — CSS | MDN

CSS-свойство background-color CSS устанавливает цвет фона элемента.


background-color: red;


background-color: #bbff00;


background-color: #11ffee00; 
background-color: #11ffeeff; 


background-color: rgb(255, 255, 128);


background-color: rgba(117, 190, 218, 0.0); 
background-color: rgba(117, 190, 218, 0.5); 
background-color: rgba(117, 190, 218, 1.0); 


background-color: hsla(50, 33%, 25%, 0.75);


background-color: currentColor;
background-color: transparent;


background-color: inherit;
background-color: initial;
background-color: unset;
Свойство background-color определяется единственным значением <color>.

Значения

<color>
Является CSS <color>, которое описывает цвет фона. Даже если заданы одно или несколько background-image, цвет может отрендерится, если изображения прозрачны.

Формальный синтаксис

<color>

где
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>

где
<rgb()> = rgb( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )

где
<alpha-value> = <number> | (en-US) <percentage>
<hue> = <number> | (en-US) <angle>

HTML

<div>
 Lorem ipsum dolor sit amet, consectetuer
</div>

<div>
  Lorem ipsum dolor sit amet, consectetuer
</div>

<div>
  Lorem ipsum dolor sit amet, consectetuer
</div>

CSS

.exampleone {
  background-color: teal;
  color: white;
}

.exampletwo {
  background-color: rgb(153, 102, 153);
  color: rgb(255, 255, 204);
}

.examplethree {
  background-color: #777799;
  color: #FFFFFF;
}

Результат

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

Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.

BCD tables only load in the browser

Цвета 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 коды цветов. 

Название HEX RGB Цвет
AliceBlue #F0F8FF

240, 248, 255

 
AntiqueWhite #FAEBD7

250, 235, 215

 
Aqua #00FFFF 0, 255, 255  
Aquamarine #7FFFD4

127, 255, 212

 
Azure #F0FFFF

240, 255, 255

 
Beige #F5F5DC

245, 245, 220

 
Bisque #FFE4C4 255, 228, 196  
Black #000000 0, 0, 0  
BlanchedAlmond #FFEBCD

255, 235, 205

 
Blue #0000FF 0, 0, 255  
BlueViolet #8A2BE2 138, 43, 226  
Brown #A52A2A 165, 42, 42  
BurlyWood #DEB887 222, 184, 135  
CadetBlue #5F9EA0 95, 158, 160  
Chartreuse #7FFF00 127, 255, 0  
Chocolate #D2691E 210, 105, 30  
Coral #FF7F50 255, 127, 80  
CornflowerBlue #6495ED 100, 149, 237  
Cornsilk #FFF8DC 255, 248, 220  
Crimson #DC143C 220, 20, 60  
Cyan #00FFFF 0, 255, 255  
DarkBlue #00008B 0, 0, 139  
DarkCyan #008B8B 0, 139, 139  
DarkGoldenRod #B8860B 184, 134, 11  
DarkGray #A9A9A9 169, 169, 169  
DarkGrey #A9A9A9 169, 169, 169  
DarkGreen #006400 0, 100, 0  
DarkKhaki #BDB76B 189, 183, 107  
DarkMagenta #8B008B 139, 0, 139  
DarkOliveGreen #556B2F 85, 107, 47  
DarkOrange #FF8C00 255, 140, 0  
DarkOrchid #9932CC 153, 50, 204  
DarkRed #8B0000 139, 0, 0  
DarkSalmon #E9967A 233, 150, 122  
DarkSeaGreen #8FBC8F 143, 188, 143  
DarkSlateBlue #483D8B 72, 61, 139  
DarkSlateGray #2F4F4F 47, 79, 79  
DarkSlateGrey #2F4F4F 47, 79, 79  
DarkTurquoise #00CED1 0, 206, 209  
DarkViolet #9400D3 148, 0, 211  
DeepPink #FF1493 255, 20, 147  
DeepSkyBlue #00BFFF 0, 191, 255  
DimGray #696969 105, 105, 105  
DimGrey #696969 105, 105, 105  
DodgerBlue #1E90FF

30, 144, 255

 
FireBrick #B22222

178, 34, 34

 
FloralWhite #FFFAF0

255, 250, 240

 
ForestGreen #228B22

34, 139, 34

 
Fuchsia #FF00FF

255, 0, 255

 
Gainsboro #DCDCDC

220, 220, 220

 
GhostWhite #F8F8FF

248, 248, 255

 
Gold #FFD700

255, 215, 0

 
GoldenRod #DAA520

218, 165, 32

 
Gray #808080

128, 128, 128

 
Grey #808080 128, 128, 128  
Green #008000

0, 128, 0

 
GreenYellow #ADFF2F

173, 255, 47

 
HoneyDew #F0FFF0

240, 255, 240

 
HotPink #FF69B4

255, 105, 180

 
IndianRed #CD5C5C

205, 92, 92

 
Indigo #4B0082

75, 0, 130

 
Ivory #FFFFF0

255, 255, 240

 
Khaki #F0E68C

240, 230, 140

 
Lavender #E6E6FA

230, 230, 250

 
LavenderBlush #FFF0F5

255, 240, 245

 
LawnGreen #7CFC00

124, 252, 0

 
LemonChiffon #FFFACD

255, 250, 205

 
LightBlue #ADD8E6

173, 216, 230

 
LightCoral #F08080

240, 128, 128

 
LightCyan #E0FFFF

224, 255, 255

 
LightGoldenRodYellow #FAFAD2

250, 250, 210

 
LightGray #D3D3D3

211, 211, 211

 
LightGrey #D3D3D3 211, 211, 211  
LightGreen #90EE90

144, 238, 144

 
LightPink #FFB6C1

255, 182, 193

 
LightSalmon #FFA07A

255, 160, 122

 
LightSeaGreen #20B2AA

32, 178, 170

 
LightSkyBlue #87CEFA

135, 206, 250

 
LightSlateGray #778899

119, 136, 153

 
LightSlateGrey #778899 119, 136, 153  
LightSteelBlue #B0C4DE

176, 196, 222

 
LightYellow #FFFFE0

255, 255, 224

 
Lime #00FF00

0, 255, 0

 
LimeGreen #32CD32

50, 205, 50

 
Linen #FAF0E6

250, 240, 230

 
Magenta #FF00FF

255, 0, 255

 
Maroon #800000

128, 0, 0

 
MediumAquaMarine #66CDAA

102, 205, 170

 
MediumBlue #0000CD

0, 0, 205

 
MediumOrchid #BA55D3

186, 85, 211

 
MediumPurple #9370DB

147, 112, 219

 
MediumSeaGreen #3CB371

60, 179, 113

 
MediumSlateBlue #7B68EE

123, 104, 238

 
MediumSpringGreen #00FA9A

0, 250, 154

 
MediumTurquoise #48D1CC

72, 209, 204

 
MediumVioletRed #C71585

199, 21, 133

 
MidnightBlue #191970

25, 25, 112

 
MintCream #F5FFFA

245, 255, 250

 
MistyRose #FFE4E1

255, 228, 225

 
Moccasin #FFE4B5

255, 228, 181

 
NavajoWhite #FFDEAD

255, 222, 173

 
Navy #000080

0, 0, 128

 
OldLace #FDF5E6

253, 245, 230

 
Olive #808000

128, 128, 0

 
OliveDrab #6B8E23

107, 142, 35

 
Orange #FFA500

255, 165, 0

 
OrangeRed #FF4500

255, 69, 0

 
Orchid #DA70D6

218, 112, 214

 
PaleGoldenRod #EEE8AA

238, 232, 170

 
PaleGreen #98FB98

152, 251, 152

 
PaleTurquoise #AFEEEE

175, 238, 238

 
PaleVioletRed #DB7093

219, 112, 147

 
PapayaWhip #FFEFD5

255, 239, 213

 
PeachPuff #FFDAB9

255, 218, 185

 
Peru #CD853F

205, 133, 63

 
Pink #FFC0CB

255, 192, 203

 
Plum #DDA0DD

221, 160, 221

 
PowderBlue #B0E0E6

176, 224, 230

 
Purple #800080

128, 0, 128

 
RebeccaPurple #663399 102, 51, 153  
Red #FF0000

255, 0, 0

 
RosyBrown #BC8F8F

188, 143, 143

 
RoyalBlue #4169E1

65, 105, 225

 
SaddleBrown #8B4513

139, 69, 19

 
Salmon #FA8072

250, 128, 114

 
SandyBrown #F4A460

244, 164, 96

 
SeaGreen #2E8B57

46, 139, 87

 
SeaShell #FFF5EE

255, 245, 238

 
Sienna #A0522D

160, 82, 45

 
Silver #C0C0C0

192, 192, 192

 
SkyBlue #87CEEB

135, 206, 235

 
SlateBlue #6A5ACD

106, 90, 205

 
SlateGray #708090

112, 128, 144

 
SlateGrey #708090 112, 128, 144  
Snow #FFFAFA

255, 250, 250

 
SpringGreen #00FF7F

0, 255, 127

 
SteelBlue #4682B4

70, 130, 180

 
Tan #D2B48C

210, 180, 140

 
Teal #008080

0, 128, 128

 
Thistle #D8BFD8

216, 191, 216

 
Tomato #FF6347

255, 99, 71

 
Turquoise #40E0D0

64, 224, 208

 
Violet #EE82EE

238, 130, 238

 
Wheat #F5DEB3

245, 222, 179

 
White #FFFFFF

255, 255, 255

 
WhiteSmoke #F5F5F5

245, 245, 245

 
Yellow #FFFF00

255, 255, 0

 
YellowGreen #9ACD32

154, 205, 50

 

Теперь вы знаете, где можно посмотреть цвета CSS, а каким способом их задавать уже ваше решение. 

Таблица названий цветов HTML и CSS, воспринимаемых браузерами

Таблица названий цветов, воспринимаемых браузерами

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

Пример использования в HTML:

<font color="yellowgreen">Желто-зеленый текст</font>

Пример использования в CSS:

p.se {color: violet} /* определение класса se для элемента p, где цвет текста будет фиолетовым */

Функция Преобразование цветовой модели (Color Model Conversion)—Справка

Конвертирует цветовую модель изображения из HSV в красный, зелёный и синий (RGB) или наоборот.

Входные данные для этой функции:

  • Входной растр
  • Тип – RGB в HSV или HSV в RGB

Цветовая модель RGB

RGB – это цветовая модель на основе дополнительных первичных цветов. На экране электронно-лучевой трубки (ЭЛТ) каждый пиксел (элемент картинки) состоит из триады цветов люминофора: красный, зелёный и синий. Свет излучается и отображается с интенсивностью, при которой эти цвета проецируются электронной трубкой. Цвета можно просматривать пространственно, используя куб RGB ниже.

  • Red – Задаёт интенсивность красного, как целое число от 0 до 255. Цвет, где красный установлен на 0, задаёт отсутствие цвета и не излучает красного. Цвет, где красный установлен на 255, окажется ярко красным или полностью насыщенным.
  • Green – Задаёт интенсивность зелёного, как целое число от 0 до 255. Цвет, где зелёный установлен на 0, задаёт отсутствие цвета и не излучает зелёного. Цвет, где зеленый установлен на 255, окажется ярко зеленым или полностью насыщенным.
  • Blue – Задаёт интенсивность синего, как целое число от 0 до 255. Цвет, где синий установлен на 0, задаёт отсутствие цвета и не излучает синего. Цвет, где синий установлен на 255, окажется ярко синим или полностью насыщенным.

В цветовой модели RGB, чисто серые оттенки получены путём комбинирования равных количеств всех трёх значений цветов: красного, зелёного и синего. Если все эти три значения установлены на 255 (255,255,255), цвет будет белым, и наоборот, если все три значения цвета установлены на 0, цвет будет черным. Таким образом, для оттенков серого остается от 1 до 254 доступных значений. Человеческий глаз различает приблизительно 20 оттенков серого.

Цветовая модель HSV

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

  • Тон (Hue) – Задаёт тон (цвет), на который будет установлен цвет. Тон дается как целое число от 0 до 240. Этот диапазон выбран из диапазона значений от 0° до 360°, в котором тон задается как угол поворота против часовой стрелки вокруг конуса цвета. Первичный и вторичный цвета имеют следующие значения тона: красный = 0 (0°), желтый = 40 (60°), зеленый = 80 (120°), голубой = 120 (180°), синий = 160 (240°) и пурпурный = 201 (300°).
  • Насыщенность (Saturation) – Задаёт интенсивность насыщенности, на которую будет установлен цвет. Насыщенность задается как целое от 0 до 255 (от 0 до 100 процентов). Насыщенность цвета соотносится с экстентом, на который она распространяется от такого нейтрального цвета, как серый, или, проще говоря, обозначает красочность. Если насыщенность равна 255, цвет полностью насыщен. Если насыщенность равна 0, цвет ненасыщенный, он будет серым (если не задано значение 0 или 255, тогда он будет черным или белым соответственно).
  • Значение (Value) – Задаёт интенсивность белого в цвете. Значение задается как целое от 0 до 255 (от 0 до 100 процентов). Цвет со значением 0 проявляется как черный. Цвет, значение которого установлено на 255, а насыщенность – на 0, будет белым.

Связанные темы

Отзыв по этому разделу?

# 00FF00 Hex Color — RGB: 0, 255, 0

# 00FF00 Hex Color, включает преобразования, схемы, цветовые коды HTML и многое другое.

# 00FF00 Информация о цвете

На этой странице представлена ​​подробная информация о цвете шестнадцатеричного кода # 00FF00. Его шестнадцатеричный код — 00FF00. В цветовом пространстве RGB, которое состоит из 0% красного, 100% зеленого и 0% синего, и соответствующие значения RGB равны 0, 255, 0. В цветовом пространстве CMYK оно состоит из 100% голубого, 0% пурпурный, 100% желтый и 0% черный, тогда как соответствующие значения CMYK — 1, 0, 1, 0.Другая дополнительная информация, такая как степень, яркость, насыщенность, просмотрите следующий контент.

Преобразование цвета с помощью # 00FF00

Цвет:
Шестнадцатеричный: 00FF00
RGB Десятичный: 0, 255, 0
HSL : 120 °, 100%, 50%
HSV : 120 °, 100%, 100%
CMYK : 100%, 0%, 100%, 0%
XYZ: 35.76, 71,52, 11,92
xyY: 0,3, 0,6, 71,52
CIE-LAB: 87,737, -86,185, 83,181
CIE- LCH : 87,737, 119,779, 136.016
Hunter-Lab: 84.569, -72.518, 50.842
Название цвета: Лайм

Цветовая модель CMYK с # 00FF00

Голубой: 100%
Пурпурный: 0%
Желтый: 100%
Черный: 0%

Цветовая модель RGB с # 00FF00

Цветовые схемы с # 00FF00

Дополнительные цвета для # 00FF00
Цвет Тетрадик
Разделение дополнительных цветов
Цвет Triadic
Аналогичный цвет
Монохромный цвет

Ширина цветовых кодов HTML # 00FF00

# 00FF00 цвет фона

здесь фон

# 00FF00 Текст в шестнадцатеричном формате

Напишите здесь

# 00FF00 коды цветов css

текст {color: # 00FF00;}

.фон {background-color: # 00FF00;}

.border {border: 1px solid # 00FF00;}

# 00FF00 Цвет звена

Ссылка здесь

цветовых оттенков с # 00FF00

Темные / светлые оттенки:
# RGB (153,255,153)
# 001800 RGB (0,24,0)
# 003200 RGB (0,50,0)
# 004C00 RGB (0,76,0)
# 006600 RGB ( 0,102,0)
# 007E00 RGB (0,126,0)
# 009800 RGB (0,152,0)
# 00B200 RGB (0,178,0)
# 00CC00 RGB (0,204, 0)
# 00E400 RGB (0,228,0)
# 00FE00 RGB (0,254,0)
# 00FF00 RGB (0,255,0)
# 19FF19 RGB (25,255,25)
# 33FF33 RGB (51,255,51)
# 4BFF4B RGB (75,255,75)
# 65FF65 RGB (101,255,101)
# 7FFF7F RGB (127,255900,127)
# B1FFB1 RGB (177,255,177)
#CBFFCB RGB (203,255,203)
# E5FFE5 rgb (229,255,229)

цветовых оттенков с преобразованием # 00FF00

RGB в HSV | преобразование цвета

Введите шестизначный шестнадцатеричный код или укажите уровни красного, зеленого и синего цветов (0..255) и нажмите кнопку Преобразовать :

Преобразование HSV в RGB ►

Формула преобразования RGB в HSV

Значения R , G , B делятся на 255, чтобы изменить диапазон от 0..255 до 0..1:

R ‘= R /255

G ‘= G /255

B ‘= B /255

Cmax = max ( R ‘, G ‘, B ‘)

Cmin = min ( R ‘, G ‘, B ‘)

Δ = Cмакс Cmin

Расчет оттенка:

Расчет насыщенности:

Расчет стоимости:

В = Cмакс

Таблица цветов RGB в HSV

Цвет Цвет

название

шестигранник (R, G, B) (В, С, В)
Черный # 000000 (0,0,0) (0 °, 0%, 0%)
Белый #FFFFFF (255 255 255) (0 °, 0%, 100%)
Красный # FF0000 (255,0,0) (0 °, 100%, 100%)
Лайм # 00FF00 (0,255,0) (120 °, 100%, 100%)
Синий # 0000FF (0,0,255) (240 °, 100%, 100%)
желтый # FFFF00 (255,255,0) (60 °, 100%, 100%)
Голубой # 00FFFF (0,255,255) (180 °, 100%, 100%)
пурпурный # FF00FF (255,0 255) (300 °, 100%, 100%)
Серебро #BFBFBF (191,191,191) (0 °, 0%, 75%)
Серый # 808080 (128 128 128) (0 °, 0%, 50%)
Бордовый # 800000 (128,0,0) (0 °, 100%, 50%)
оливковое # 808000 (128,128,0) (60 °, 100%, 50%)
зеленый # 008000 (0,128,0) (120 °, 100%, 50%)
фиолетовый # 800080 (128,0,128) (300 °, 100%, 50%)
бирюзовый # 008080 (0,128,128) (180 °, 100%, 50%)
Военно-морской флот # 000080 (0,0,128) (240 °, 100%, 50%)

Преобразование HSV в RGB ►


См. Также

Красный / # ff0000 шестнадцатеричный цвет (# f00)

В цветовом пространстве RGB шестнадцатеричный код # ff0000 (также известный как красный) состоит из 100% красного, 0% зеленого и 0% синего.Тогда как в цветовом пространстве CMYK он состоит из 0% голубого, 100% пурпурного, 100% желтого и 0% черного. Он имеет угол оттенка 0 градусов, насыщенность 100% и яркость 50%. Шестнадцатеричный цвет # ff0000 можно получить смешиванием # ff0000 с # ff0000. # ff0000 (или # f00) — цвет, безопасный для Интернета.

● # ff0000 Описание цвета: Чистый (или почти чистый) красный .

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

Hex тройной ff0000 # ff0000
RGB Десятичный 255, 0, 0 RGB (255,0,0)
RGB Процент 100, 0, 0 RGB (100%, 0%, 0%)
CMYK 0, 100, 100, 0
HSL 0 °, 100, 50 hsl (0,100%, 50%)
HSV (или HSB ) 0 °, 100, 100
Веб-сейф ff0000 # ff0000
CIE-LAB 53.239, 80.09, 67.201
XYZ 41,242, 21,266, 1,933
xyY 0,64, 0,33, 21,266
CIE- LCH 53,239, 104,549, 39,999
CIE-LUV 53.239, 175.009, 37.755
Hunter-Lab 46,115, 78,94, 29,795
Двоичный 11111111, 00000000, 00000000
Разделение дополнительных цветов
  • # b30000
      # b30000   RGB (179,0,0)  
  • # cc0000
      # cc0000   RGB (204,0,0)  
  • # e60000
      # e60000   RGB (230,0,0)  
  • # ff0000
      # ff0000   RGB (255,0,0)  
  • # ff1a1a
      # ff1a1a   RGB (255,26,26)  
  • # ff3333
      # ff3333   RGB (255,51,51)  
  • # ff4d4d
      # ff4d4d   RGB (255,77,77)  
Монохромный цвет

Ниже вы можете увидеть некоторые цвета, близкие к # ff0000.Набор связанных цветов может быть полезен, если вам нужна вдохновляющая альтернатива исходному выбору цвета.

  • # ff0040
      # ff0040   RGB (255,0,64)  
  • # ff002b
      # ff002b   RGB (255,0,43)  
  • # ff0015
      # ff0015   RGB (255,0,21)  
  • # ff0000
      # ff0000   RGB (255,0,0)  
  • # ff1500
      # ff1500   RGB (255,21,0)  
  • # ff2b00
      # ff2b00   RGB (255,43,0)  
  • # ff4000
      # ff4000   RGB (255,64,0)  
Похожие цвета Текст с шестнадцатеричным цветом # ff0000

Этот текст имеет цвет шрифта # ff0000.

   Текст здесь   
# ff0000 цвет фона

Цвет фона этого абзаца # ff0000.

  

Содержимое

# ff0000 цвет границы

Этот элемент имеет цвет границы # ff0000.

  
Содержимое
CSS коды
 .текст {color: # ff0000;}  
  .background {background-color: # ff0000;}  
  .border {border: 1px solid # ff0000;}  

Оттенок достигается путем добавления черного к любому чистому оттенку, а оттенок создается путем смешивания белого с любым чистым цветом. В этом примере # 140000 — самый темный цвет, а #ffffff — самый светлый.

  • # 140000
      # 140000   RGB (20,0,0)  
  • # 270000
      # 270000   RGB (39,0,0)  
  • # 3b0000
      # 3b0000   RGB (59,0,0)  
  • # 4e0000
      # 4e0000   RGB (78,0,0)  
  • # 620000
      # 620000   RGB (98,0,0)  
  • # 760000
      # 760000   RGB (118,0,0)  
  • # 8

      # 8

    RGB (137,0,0)
  • # 9d0000
      # 9d0000   RGB (157,0,0)  
  • # b10000
      # b10000   RGB (177,0,0)  
  • # c40000
      # c40000   RGB (196,0,0)  
  • # d80000
      # d80000   RGB (216,0,0)  
  • # eb0000
      # eb0000   RGB (235,0,0)  
  • # ff0000
      # ff0000   RGB (255,0,0)  
Оттенок Изменение цвета
  • # ff1414
      # ff1414   RGB (255,20,20)  
  • # ff2727
      # ff2727   RGB (255,39,39)  
  • # ff3b3b
      # ff3b3b   RGB (255,59,59)  
  • # ff4e4e
      # ff4e4e   RGB (255,78,78)  
  • # ff6262
      # ff6262   RGB (255,98,98)  
  • # ff7676
      # ff7676   RGB (255,118,118)  
  • # ff8989
      # ff8989   RGB (255,137,137)  
  • # ff9d9d
      # ff9d9d   RGB (255,157,157)  
  • # ffb1b1
      # ffb1b1   RGB (255,177,177)  
  • # ffc4c4
      # ffc4c4   RGB (255,196,196)  
  • # ffd8d8
      # ffd8d8   RGB (255 216 216)  
  • #ffebeb
      #ffebeb   rgb (255,235,235)  
  • #ffffff
      #ffffff   RGB (255,255,255)  
Оттенок Изменение цвета

Тон получается путем добавления серого к любому чистому оттенку.В этом случае # 897676 — менее насыщенный цвет, а # ff0000 — самый насыщенный.

  • # 897676
      # 897676   RGB (137,118,118)  
  • # 936c6c
      # 936c6c   RGB (147,108,108)  
  • # 9d6262
      # 9d6262   RGB (157,98,98)  
  • # a75858
      # a75858   RGB (167,88,88)  
  • # b14e4e
      # b14e4e   RGB (177,78,78)  
  • # ba4545
      # ba4545   RGB (186,69,69)  
  • # c43b3b
      # c43b3b   RGB (196,59,59)  
  • # ce3131
      # ce3131   RGB (206,49,49)  
  • # d82727
      # d82727   RGB (216,39,39)  
  • # e21d1d
      # e21d1d   RGB (226,29,29)  
  • # eb1414
      # eb1414   RGB (235,20,20)  
  • # f50a0a
      # f50a0a   RGB (245,10,10)  
  • # ff0000
      # ff0000   RGB (255,0,0)  
Цветовая вариация тона

Ниже вы можете увидеть, как # ff0000 воспринимается людьми с дефицитом цветового зрения.Это может быть полезно, если вам нужно убедиться, что ваши цветовые комбинации доступны для дальтоников.

Монохромность
  • # 4c4c4c Ахроматопсия 0,005% населения
  • # 703d3d Атипичная ахроматопсия 0,001% населения
Трихроматия
  • # bb5516 Протаномалия 1% мужчин, 0.01% женщин
  • # c65100 Дейтераномалия 6% мужчин, 0,4% женщин
  • # fd1100 Тританомалия 0,01% населения

Функция RGB (Visual Basic для приложений)

  • 2 минуты на чтение

В этой статье

Возвращает длинное целое число, представляющее значение цвета RGB.

Синтаксис

RGB ( красный , зеленый , синий )

Синтаксис функции RGB имеет следующие именованные аргументы:

Часть Описание
красный Обязательно; Вариант ( Целое число ). Число в диапазоне 0–255 включительно, представляющее красный компонент цвета.
зеленый Обязательно; Вариант ( Целое число ).Число в диапазоне 0–255 включительно, представляющее зеленый компонент цвета.
синий Обязательно; Вариант ( Целое число ). Число в диапазоне 0–255 включительно, представляющее синий компонент цвета.

Примечания

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

Предполагается, что значение любого аргумента для RGB , превышающего 255, равно 255.

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

Цвет Красное значение Значение зеленого Значение синего
Черный 0 0 0
Синий 0 0 255
зеленый 0 255 0
голубой 0 255 255
Красный 255 0 0
пурпурный 255 0 255
Желтый 255 255 0
Белый 255 255 255

Примечание

Значения цвета RGB, возвращаемые этой функцией, несовместимы с используемыми в операционной системе Macintosh.Их можно использовать в контексте приложений Microsoft для Macintosh, но не следует использовать при передаче изменений цвета непосредственно в операционную систему Macintosh.

Пример

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

  Тусклый красный, I, RGBValue, MyObject
Red = RGB (255, 0, 0) 'Возвращает значение для красного.
I = 75 'Инициализировать смещение.
RGBValue = RGB (I, 64 + I, 128 + I) 'То же, что и RGB (75, 139, 203).
MyObject.Color = RGB (255, 0, 0) 'Установите для свойства Color MyObject значение Red.

  

См. Также

Поддержка и отзывы

У вас есть вопросы или отзывы об Office VBA или этой документации? См. Раздел Поддержка и отзывы Office VBA, чтобы узнать, как получить поддержку и оставить отзыв.

Image-1 Введение в цифровые изображения

Image-1 Введение в цифровые изображения

В этом разделе мы рассмотрим, как работают цифровые изображения. (Подсказка Марку Гуздиалу и Барбаре Эриксон за продвижение идеи медиа-вычислений с использованием изображений, звуков и т. Д. Для внедрения вычислений.)

Цифровые изображения

  • Цифровые изображения повсюду
  • Выглядит естественно, гладко
  • За кадром: много маленьких цифр
  • Кроме того: более интересное использование Интернета: текст или изображения?

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

Вот цифровое изображение желтых цветов:

Увеличение — пиксели

  • Увеличьте в 10 раз левый верхний цветок
  • Изображение состоит из «пикселей»
  • Каждый пиксель: маленький, квадратный, одноцветный
  • Воспринимайте всю сцену, а не крошечные пиксели
  • «мегапиксель» — это 1 миллион пикселей
  • Сколько пикселей в изображении шириной 800 пикселей и высотой 600 пикселей?
    — просто умножь
    — 800 x 600 = 480 000 пикселей = 0.48 мегапикселей
  • Типичное цифровое изображение = 5-20 мегапикселей

Увеличив левый верхний цветок, мы увидим, что он на самом деле состоит из множества квадратных «пикселей», каждый из которых имеет один цвет.

X / Y Сетка пикселей

Мы не будем слишком много работать с отдельными координатами x / y. Вам просто нужно понять, что существует система координат x / y, так что каждый пиксель в изображении имеет некоторую координату x / y, которая определяет его положение в сетке изображения.

  • Пиксели организованы в виде сетки x / y
  • x = 0, y = 0 «origin» верхний левый угол — aka (0, 0)
  • X растет вправо
  • Y растет вниз
  • Так же, как набор текста на странице
  • x = 0, y = 0 «начало координат» слева вверху — (0, 0)
  • x = 1, y = 0 сосед справа от начала координат — (1, 0)
  • x = 0, y = 1 сосед ниже начала координат — (0, 1)

Теперь поговорим о цветах.

В сторону истории — цветная призма Ньютона

  • Один из знаменитых экспериментов Ньютона
  • Белый свет — разбит на чистые цвета, непрерывный
  • Красный, оранжевый, желтый, зеленый, синий, индиго, фиолетовый (ROY G BIV)
  • Смешайте выбранные цвета, чтобы получить другие цвета
  • Это похоже на запуск эксперимента в обратном направлении, чтобы сделать белый цвет

Сэр Исаак Ньютон провел знаменитый эксперимент с призмой в 1665 году, показав, что белый свет состоит из спектра чистого цветного света.Вот фотография эксперимента у меня на полу. Белый солнечный свет проникает слева в стеклянную треугольную призму, которая разделяет свет. Выходя из призмы, мы получаем непрерывный диапазон чистых цветов, и некоторые из них выделены по названию: красный, оранжевый, желтый, зеленый, синий, индиго, фиолетовый (ROY G BIV).

Цветовая схема RGB — Красный Зеленый Синий

  • Как представить цвет пикселя?
  • RGB — схема красный / зеленый / синий
  • Сделайте любой цвет, комбинируя красный / зеленый / синий свет
  • Есть и другие схемы, но очень распространен RGB
  • Примечание: смешивание света работает иначе, чем смешивание красок.
  • В сторону: технически цвет — это трехмерное пространство, не вдаваясь в детали
    — Призма Ньютона показывает измерение «оттенка»
    — Остальные параметры — яркость и насыщенность (пастель).

Как представить цвет пикселя? Схема красный / зеленый / синий (RGB) — один из популярных способов представления цвета на компьютере.В RGB каждый цвет определяется как определенная комбинация чистого красного, зеленого и синего света.

RGB проводник

Лучший способ увидеть, как работает RGB — просто поиграться. Эта страница RGB Explorer показывает, как можно получить любой цвет, комбинируя красный, зеленый и синий свет. Каждый источник света кодируется числом от 0 (выключено) до 255 (самый яркий).

RGB — три числа

  • Сделайте любой цвет, комбинируя красный / зеленый / синий свет
  • Каждый красный / зеленый / синий свет представлен числом 0.255
    255 = максимальная яркость
    0 = выключено
  • Следовательно, любой цвет может быть представлен тремя числами 0..255.
  • Не только 0 и 255, промежуточные значения 12, 238, 39
  • например r: 250 g: 10 b: 240 — фиолетовый, или просто скажите «250 10 240»
  • например r: 100 g: 100 b: 0 — темно-желтый, или просто скажите «100 100 10»

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

Цвет Красный номер Зеленый номер Синий номер
красный 255 0 0
фиолетовый 255 0 255
желтый 255 255 0
темно-желтый 100 100 0
белый 255 255 255
черный 0 0 0

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

Так, например (красный = 255, зеленый = 100, синий = 0) — это цвет, в котором красный — максимум, зеленый — средний, а синий вообще отсутствует, что дает оттенок оранжевого. Таким образом, задав яркость 0..255 для красного, синего и зеленого компонентов цвета пикселя, можно сформировать любой цвет.

Пигментная записка — у вас могут быть смешанные цветные краски, например, добавление красной и зеленой краски вместе.Такое «пигментное» смешение цветов работает совершенно иначе, чем «легкое» смешение, которое мы имеем здесь. Я думаю, что за смешиванием света легче следить, и в любом случае это самый распространенный способ, которым компьютеры хранят изображения и манипулируют ими.

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

Вы попробуете Задача

1. В RGB Explorer поиграйте с ползунками, чтобы придать кофе латте светло-коричневый цвет.

2. Придумайте, как приготовить апельсин.

3. Придумайте, как сделать коричневый цвет. Коричневый — это в основном темно-оранжевый.

In Class Demo — сверхяркие светодиоды

Демо! Модуль MaxM RGB

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

  • Показать чистый красный зеленый синий — светодиодный свет
  • Показать двухцветные комбинации
  • Показать белый

Диаграмма изображения с RGB

  • Теперь у вас есть полная схема изображения.
  • Пиксели в сетке, каждый из которых определяется координатами x, y
  • Каждый пиксель имеет 3 числа, определяющих его цвет
  • Записывается как «красный: 6 зеленый: 250 синий: 7»
  • Или просто «6250 7»

2 темы CS: много маленьких цифр + редактирование

  • Начать с всего изображения
  • Тема 1: изображение «разбивается» на множество маленьких цифр в компьютере
  • Тема 2: Как изменить изображение на компьютере?
  • Изменить некоторые числа → изменить изображение
  • e.грамм. пройти и уменьшить вдвое все красные значения
  • Вот куда мы идем

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

Итак, мы можем начать с целого текстурированного цифрового изображения чего-либо. Затем разбейте его на маленькие квадратные пиксели. Затем каждый пиксель разбивается на 3 числа в диапазоне 0-255.Это типичный компьютерный паттерн — что-то большое и сложное разбивается на части и представляется в виде множества маленьких чисел, если вы посмотрите за кулисы.

Как сменить изображение? Изменения изображения производятся путем просмотра и изменения чисел, составляющих изображение.

Цвета в шестнадцатеричной / десятичной системе счисления

Красный, зеленый и синий

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

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

от 0 до 255 (в десятичной системе) или
00 до FF (в шестнадцатеричном формате)

Цвет может быть получен путем смешивания R ed, G reen и B lue, поэтому он называется «Цветовая система RGB ».

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

Смеситель цветов

Попробуйте смешать свои собственные цвета, чтобы увидеть, как это работает (или введите значения в шестнадцатеричные или десятичные поля):

числа / изображения / шестнадцатеричный цвет.js

См. Также Интерактивное цветовое колесо.

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

Шестнадцатеричные числа являются «естественными» для компьютеров, поскольку компьютеры хранят и обрабатывают двоичные цифры, а четыре двоичных числа составляют одну шестнадцатеричную цифру (см. Двоичные цифры):

Десятичное число: двоичный: Шестнадцатеричный:
0 0 0
1 1 1
2 10 2
3 11 3
4 100 4
5 101 5
6 110 6
7 111 7
8 1000 8
9 1001 9
10 1010 А
11 1011 B
12 1100 C
13 1101 D
14 1110 E
15 1111 F

Таким образом, одна шестнадцатеричная цифра может иметь 16 различных значений (от 0 до 15 в десятичной системе), а две шестнадцатеричные цифры вместе (называемые «байтом») могут составлять 16 × 16 = 256 различных уровней цвета.

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

Поскольку каждый из трех цветов может иметь значения от 0 до 255 (256 возможных значений), существует:

256 × 256 × 256 = 256 3
= 16 777 216 возможных цветовых комбинаций

(и поэтому вы видите заявления о «16 миллионов цветов» на компьютерном оборудовании)

Веб-формат

Формат («обозначение»), используемый на веб-страницах: #RRGGBB , где RR — это количество красного (с использованием двух шестнадцатеричных цифр), GG — количество зеленого, а BB — синего.

Пример : приятный оттенок синего состоит из:

  • 64/255 Красный,
  • 48/255 Зеленый
  • 255/255 (т.е. полный) Синий

Таким образом, это (64, 48,255) в десятичной системе, которая равна (40, 30, FF) в шестнадцатеричной системе счисления и кодируется как # 4030FF .

Это может помочь вам запомнить:

Розы # FF0000
Фиалки # 0000FF
Только не забывайте,
Трава # 00FF00 тоже

Некоторые общие цвета


Цвет
Десятичный
(красный, зеленый, синий)
Шестнадцатеричный
(#RRGGBB)
Черный (0, 0, 0) # 000000
Белый (255 255 255) #FFFFFF
Красный (255, 0, 0) # FF0000
зеленый (0,255, 0) # 00FF00
Синий (0, 0,255) # 0000FF
Желтый (255 255, 0) # FFFF00
голубой (0,255,255) # 00FFFF
пурпурный (255, 0,255) # FF00FF

Попробуйте ввести шестнадцатеричный код в цветовом микшере, указанном выше, и посмотрите, что вы получите (вы можете скопировать, затем щелкните правой кнопкой мыши шестнадцатеричное поле и выберите «вставить») .

Я также составил гораздо более длинный список шестнадцатеричных цветов и их названий.

Считывание шестнадцатеричных цветовых кодов — шестнадцатеричный цвет

Обновлено 02.09.2020

Шестнадцатеричный цветовой код — это один из типов цветового кода HTML, который часто называют шестнадцатеричным или шестнадцатеричным цветом. Причина использования шестнадцатеричных чисел — это удобное для человека представление значений в двоичном коде. Шестнадцатеричные цветовые коды начинаются со знака решетки или хэштега (#), за которым следуют шесть букв и / или цифр.Первые две буквы / цифры относятся к красному, следующие две — к зеленому, а последние две — к синему. Значения цвета определены в значениях от 00 до FF (вместо от 0 до 255 в RGB).

Числа используются при значениях от 1 до 9. Буквы используются, когда значение больше 9. Например:

  • А = 10

  • B = 11

  • С = 12

  • D = 13

  • E = 14

  • F = 15

Чтобы получить шестнадцатеричный цвет, выполните следующие три шага:

  1. Умножьте первое число на 16.

  2. Умножьте второе число на 1.

  3. Сложите два итога.

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

Вот где приходит это удобное руководство по чтению шестнадцатеричных цветовых кодов.

Понятие цвета RGB, чтобы помочь вам понять шестнадцатеричный код цвета

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

Если вы понимаете цветовую систему RGB, вы знаете, что цвета представлены следующим образом:

RGB (255, 0, 0)

RGB определяет значения красного (первое число), зеленого (второе число) или синего (третье число).Число 0 означает отсутствие представления цвета, а 255 означает максимально возможную концентрацию цвета.

Итак, в приведенном выше примере вы получаете максимально яркий красный цвет без присутствия зеленого или синего. Если вам нужен только зеленый цвет, используйте RGB (0, 255, 0) , а для синего — RGB (0, 0, 255) . Для других цветов вы будете использовать комбинацию значений цвета, чтобы добиться желаемого результата.

Как читать шестнадцатеричные цветовые коды

Как только вы действительно поймете RGB, вы можете двигаться дальше и научиться читать шестнадцатеричные коды.Это действительно очень просто, если вы знаете формулу. Как упоминалось выше, значения 1-9 указаны численно. Однако для значений 10 и выше цифры заменяют буквы. Итак, A = 10, B = 11, C = 12 и так далее.

Теперь, чтобы вычислить шестнадцатеричное число, есть три быстрых шага (как также указано выше):

  1. Умножьте первое число (или преобразованное число из буквы) на 16.

  2. Умножьте второе число (или число, преобразованное из буквы) на 1.

  3. Сложите эти две суммы вместе, чтобы получить одно значение.

Например, шестнадцатеричное число 83 на самом деле 131. Мы приходим к такому выводу следующим образом:

  1. Умножение 8 из 83 на 16 (8×16 = 128) .

  2. Умножение 3 из 83 на 1 (3×1 = 3) .

  3. Сложение двух итогов (128 + 3 = 131) .

Другой способ думать об этом:

(8×16) + (3×1) = 131

Работа с буквами — та же концепция.Например, FF = 255, потому что вы умножаете число, представляющее F (15), на 16, а затем умножаете число, представляющее вторую F (15), на 1. Затем складываете две суммы вместе, чтобы получить 255. Учтите, что число 255 то же самое, что номер 255 RGB, который ярко-красный.

Если вы предпочитаете не выполнять мысленные вычисления, воспользуйтесь инструментом преобразования RGB в HEX.

Прогнозирование цветов

Как только вы разберетесь с числами, вы сможете предсказать, как будет выглядеть цвет, на основе интенсивности красного, зеленого и / или синего цветов.Итак, если вы знаете, что максимальное значение красного без зеленого или синего — # FF0000, вы можете мысленно немного скорректировать значения, чтобы получить оценку для другого цвета.


Другой пример шестнадцатеричного цветового кода — # 7DD0D7, который дает зеленовато-синий цвет.

Общие шестнадцатеричные цветовые коды и их эквиваленты RGB

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

  • Красный = # FF0000 = RGB (255, 0, 0)

  • Зеленый = # 008000 = RGB (1, 128, 0)

  • Синий = # 0000FF = RGB (0, 0, 255)

  • Белый = #FFFFFF = RGB (255,255,255)

  • Цвет слоновой кости = # FFFFF0 = RGB (255, 255, 240)

  • Черный = # 000000 = RGB (0, 0, 0)

  • Серый = # 808080 = RGB (128, 128, 128)

  • Серебро = # C0C0C0 = RGB (192, 192, 192)

  • Желтый = # FFFF00 = RGB (255, 255, 0)

  • Фиолетовый = # 800080 = RGB (128, 0, 128)

  • Оранжевый = FFA500 = RGB (255, 165, 0)

  • Бордовый = # 800000 = RGB (128, 0, 0)

  • Пурпурный = # FF00FF = RGB (255, 0, 255)

  • Лайм = # 00FF00 = RGB (0, 255, 0)

  • Цвет морской волны = # 00FFFF = RGB (0, 255, 255)

  • Бирюзовый = # 008080 = RGB (0, 128, 128)

  • Olive = # 808000 = RGB (128, 128, 0)

  • ВМС = # 000080 = RGB (0, 0, 128)

Найдите другие шестнадцатеричные коды цветов или выберите цвет HTML и получите его совпадающее имя и коды.

Выбор цветовой схемы

Самый быстрый способ выбрать цветовую схему для вашего проекта — использовать инструмент цветовой палитры, который позволяет искать группы по:

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

После того, как вы выбрали цветовую схему, вы можете:

  • Создать коллаж

  • Изучите и создайте градиент

  • Проверь контрасты

  • Регулировка оттенка, насыщенности, яркости и температуры

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

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

  • Учитывайте контекст.

  • Обратитесь к цветовому кругу.

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

  • Не ограничивайтесь предустановками.

Часто задаваемые вопросы о шестнадцатеричных цветах

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

шестнадцатеричный означает 6?

Да. Hex — это сокращение от Hexa, что в переводе с греческого означает число шесть.

Когда мне следует использовать шестнадцатеричный, а когда — RGB?

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

Как получить шестнадцатеричный код цвета для определенного цвета изображения?

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

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

Как осветлить или затемнить шестигранный цвет?

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

  1. Введите шестизначный шестнадцатеричный цвет.

  2. Установите переключатель Светлее или Темнее.

  3. Назначьте процент.

  4. Нажмите «Отправить».

Как изменить шестнадцатеричный цвет в Adobe Illustrator?

Чтобы изменить шестнадцатеричный цвет в Adobe Illustrator, выполните следующие действия:

  1. В новом документе Illustrator нажмите F6.

  2. Дважды щелкните рамку обводки или заливки в окне «Цвет».

  3. Дважды щелкните внутри поля рядом с #.

  4. Введите новый шестнадцатеричный код цвета в поле.

  5. Нажмите ОК.

Завершение

В заключение несколько напоминаний:

  • Цветовые типы Hex и RGB предназначены для использования на экране при разработке веб-сайтов.

  • В CSS можно добавить альфа-значение для управления непрозрачностью цвета.

  • Для бренда постоянство цвета является ключевым фактором.

  • Несколько инструментов действительно могут помочь с вашими цветовыми кодами:

  • Всегда стремитесь узнать больше о своей работе, просматривая ресурсы и посещая курсы, предлагаемые Pluralsight!

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