Цвета hsl: Сравнение RGB и HSL цветов и почему последние лучше

Содержание

Цветовая модель 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%.

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Цвет HSL</title>
<style type=»text/css»>
body{
background-color:hsl(120,10%,50%);
color:hsl(60,100%,50%)
}
.blok1 {background-color:hsl(0,0%,0%)}
.blok2 {background-color:hsl(0,0%,100%)
}

.blok3 {background-color:hsl(187,61%,54%)}
.blok4 {background-color:hsl(300,100%,70%)}
.blok5 {background-color:hsl(0,100%,50%)}
.blok6 {background-color:hsl(240,100%,50%)}
</style>
</head>
<body>
<div>Блок 1</div>
<div>Блок 2</div>
<div>Блок 3</div>
<div>Блок 4</div>
<div>Блок 5</div>
<div>Блок 6</div>
</body>
</html>

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

RGBA

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

Так у уже знакомого нам способа определения цвета

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

Пример:

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Цвет RGBA</title>
<style type=»text/css»>
body{
background-image: url(graphics/fon.gif)
}
.blok1{background-color:rgba(255,0,0,0.1)}
.blok2{background-color:rgba(255,0,0,0.5)}
.blok3{background-color:
rgba(255,0,0,1)
}

</style>
</head>
<body>
<div>Блок 1</div>
<div>Блок 2</div>
<div>Блок 3</div>
</body>
</html>

HSLA

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

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Цвет HSLA</title>
<style type=»text/css»>
body{
background-image: url(graphics/fon.gif)
}
.blok1{background-color:hsla(120,100%,50%,0.1)}

.blok2{background-color:hsla(120,100%,50%,0.5)}
.blok3{background-color:hsla(120,100%,50%,1)}
</style>
</head>
<body>
<div>Блок 1</div>
<div>Блок 2</div>
<div>Блок 3</div>
</body>
</html>
  • Считается, что преимуществом цветовой схемы 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)
    }

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



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

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

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

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

Значения 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 ‘)

Δ = CmaxCmin

 

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

 

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

 

Расчет легкости:

L = ( Cmax + Cmin ) / 2

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

цвет цвет

название

Hex (R, G, B) (H, S, L)
  Черный # 000000 (0,0,0) (0 °, 0%, 0%)
  Белый #FFFFFF (255 255 255) (0 °, 0%, 100%)
  Красный # FF0000 (255,0,0) (0 °, 100%, 50%)
  Лайм # 00FF00 (0,255,0) (120 °, 100%, 50%)
  Синий # 0000FF (0,0,255) (240 °, 100%, 50%)
  Желтый # FFFF00 (255,255,0) (60 °, 100%, 50%)
  Голубой # 00FFFF (0,255,255) (180 °, 100%, 50%)
  Пурпурный # FF00FF (255 0 255) (300 °, 100%, 50%)
  Серебряный #BFBFBF (191 191 191) (0 °, 0%, 75%)
  Серый # 808080 (128 128 128) (0 °, 0%, 50%)
  Бордовый # 800000 (128,0,0) (0 °, 100%, 25%)
  Оливковое # 808000 (128,128,0) (60 °, 100%, 25%)
  Зеленый # 008000 (0,128,0) (120 °, 100%, 25%)
  Фиолетовый # 800080 (128,0,128) (300 °, 100%, 25%)
  Бирюзовый # 008080 (0,128,128) (180 °, 100%, 25%)
  Флот # 000080 (0,0,128) (240 °, 100%, 25%)

 

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

 


Смотрите также

Конвертер HSL в HEX — онлайн и бесплатно

Сравните HSL с HEX

CSS 3 представляет другой способ определения цвета с помощью HSL (от англ. Hue, Saturation, Lightness). это модель, в которой цвет определяется тремя параметрами: оттенком, насыщенностью и яркостью. Давайте рассмотрим каждый параметр отдельно. Ключевым преимуществом HSL является возможность указывать цветовые характеристики независимо друг от друга. Это открывает перед вами огромные возможности. Вы можете легко сделать цвет ярче, темнее, более насыщенным или ненасыщенным. И при этом сохраняя свой оттенок. Или наоборот — меняйте оттенки, не меняя их насыщенности или яркости. Часто для использования таких функций используются препроцессоры, но это возможно и без них. Функция hsl () используется для указания цветов HSL. Функция принимает три значения, разделенных запятой: оттенок, насыщенность и яркость. Изменяя значения насыщенности и яркости, вы можете получить смежные оттенки для определенного цвета.

В большинстве случаев можно распознать цвет по шестнадцатеричному коду, учитывая только первые цифры пар. В приведенном ниже примере видно, что цвет смешан с большим количеством красного, немного синим и совсем без зеленого. Понимание цвета с помощью шестнадцатеричного кода позволяет веб-дизайнеру быстрее перемещаться по коду страницы, и, кроме того, вы всегда можете произвести впечатление на коллег или клиентов, сказав «Ах, какой замечательный оттенок бордового». Вы также можете легко изменить яркость, оттенок или насыщенность цвета, отредактировав только его шестнадцатеричный код. В первом примере ниже одна из пар изменяется с шагом 10%, а яркость цвета увеличивается. Во втором примере яркость увеличивается, а насыщенность падает. Значения RGB также могут быть указаны с использованием шестнадцатеричных (HEX) значений цвета в форме: #RRGGBB, где RR (красный), GG (зеленый) и BB (синий) — шестнадцатеричные значения от 00 до FF (то же, что и десятичные 0- 255). Шестнадцатеричная система, в отличие от десятичной, основана, как следует из названия, на числе 16.

Three.js

g — (дополнительный, необязательный параметр), если указан, то определяет зеленый компонент цвета.

b — (дополнительный, необязательный параметр), если указан, то определяет синий компонент цвета.

.isColor
Свойство используется для проверки, является ли данный и производные от него классы цветом. Значением по умолчанию является true.
Его нельзя изменять, так как оно используется внутри three.js для оптимизации.
.r
Значение красного канала цвета, от 0 до 1. По умолчанию равно 1.
.g
Значение зеленого канала цвета, от 0 до 1. По умолчанию равно 1.
.b
Значение синего канала цвета, от 0 до 1. По умолчанию равно 1.
.add( color )
Метод выполняет сложение RGB значений цвета, переданного в параметре color, со RGB значениями данного цвета.
.addColors( color1, color2 )
Метод устанавливает RGB значения данного цвета как сумму RGB значений, переданный в color1 и color2.
.addScalar( s )
Метод прибавляет значение аргумента s к RGB значениям данного цвета.
.clone( )
Метод возвращает новый экземпляр класса Color с теми же самыми значениями r, g и b как у данного.
.copy( color )
Метод копирует параметры r, g и b цвета, переданного в аргументе color, в данный цвет.
.convertGammaToLinear( gammaFactor )

gammaFactor — коэффициент гамма-коррекции (дополнительный, необязательный аргумент). Значение по умолчанию равно 2.0.

Метод конвертирует данный цвет из гамма-пространства в линейное, возводя значения компонентов цвета r, g и b в степень, равную значению аргумента gammaFactor. Примечание переводчика: чтобы иметь представление о линейном освещении и освещении с гамма-коррекцией посмотрите статью на английском и русском языках.
.convertLinearToGamma( gammaFactor )

gammaFactor — коэффициент гамма-коррекции (дополнительный, необязательный аргумент). Значение по умолчанию равно 2.0.

Метод конвертирует данный цвет из линейного в гамма-пространство, возводя значения компонентов цвета r, g и b в степень, равную 1/gammaFactor.
.convertLinearToSRGB( )
Конвертирует данный цвет из линейного пространства в пространство цвета sRGB.
.convertSRGBToLinear( )
Конвертирует данный цвет из пространства цвета sRGB в линейное пространство цвета.
.copyGammaToLinear( color, gammaFactor )

color — копируемый класс Color.

gammaFactor — коэффициент гамма-коррекции (дополнительный, необязательный аргумент). Значение по умолчанию равно 2.0.

Метод копирует цвет, переданный в аргументе color, в данный цвет, преобразовывая его из гамма-пространства в линейное, возводя значения компонентов цвета r, g и b в степень, равную значению аргумента gammaFactor. Примечание переводчика: коэффициент гамма-коррекции нужен для корректировки цветового сигнала, так как глаз человека и объектив видеокамеры воспринимают изображение по-разному…. читать далее Параметр телекамеры, характеризующий способность компенсировать степенную (квадратичную) зависимость яркости кинескопа в мониторе от величины сигнала, приводящую к уменьшению контрастности на темных участках изображения и к увеличению на ярких. Для компенсации обшей нелинейности всего тракта, в современной камере производится специальная корректировка сигнала с показателем степени 1/2.2, т.е. 0.45. Некоторые камеры предоставляют выбор коэффициента гамма-коррекции, например, вариант 0.61 приводит к повышению контрастности темных областей, что нередко производит впечатление более «четкой» картинки на пользователя оборудования.

из статьи Википедии «Гамма-коррекция», а также статья «Что такое коррекция гаммы»

.copyLinearToGamma( color, gammaFactor )

color — копируемый цвет.

gammaFactor — коэффициент гамма-коррекции (дополнительный, необязательный аргумент). Значение по умолчанию равно 2.0.

Метод копирует цвет, переданный в аргументе color, в данный цвет, преобразовывая его из линейного в гамма-пространство, возводя значения компонентов цвета r, g и b в степень, равную 1/gammaFactor.
.copyLinearToSRGB( color )

color — копируемый цвет.

Метод копирует цвет, заданный в аргументе color, в данный цвет и затем конвертирует данный цвет из линейного пространства цвета в sRGB.
.copySRGBToLinear( color )

color — копируемый цвет.

Метод копирует цвет, заданный в аргументе color, в данный цвет и затем конвертирует данный цвет из пространства цвета sRGB в линейное пространство цвета.
.equals( color )
Метод сравнивает значения RGB, переданные в аргументе color с такими же значениями данного объекта. Если они одинаковы, возвращается значение true, в противном случае возвращается значение false.
.fromArray( array, offset )
array — массив чисел с плавающей запятой в форме [ r, g, b ].

offset — дополнительное смещение в массиве.

Метод устанавливает компоненты данного цвета основываясь на массиве в формате [ r, g, b ].
.getHex( )
Возвращает шестнадцатиричное значение данного цвета.
.getHexString( )
Метод возвращает шестнадцатиричное значение данного цвета в виде строки (например, ‘FFFFFF’).
.getHSL( target )

target — в этот объект копируется результат метода. К объекту добавляются ключи h, s и l (если они не предоставлены).

Конвертирует значения r, g и b данного цвета в формат HSL и возвращает объект в виде { h:0, s:0, l:0 }.
Вот статья Википедии о HSL на русском языке
.getStyle( )
Возвращает значение данного цвета в виде строки CSS стиля. Пример: ‘rgb(255,0,0)’.
.lerp( color, alpha )

color — цвет, с которым производится сближение.

alpha — коэффициент интерполяции в закрытом интервале [0, 1].

Метод выполняет операцию линейного интерполирования между значениями RGB данного цвета и RGB значениям цвета, переданного в аргументе color. Аргумент alpha можно рассматривать как соотношение между двумя цветами, где 0.0 означает данный цвет, а 1.0 — цвет, переданный в первом аргументе.
.multiply( color )
Умножает значения RGB данного цвета на значения RGB цвета, переданного в аргументе color.
.multiplyScalar( s )
Метод умножает значения RGB данного цвета на число, переданное в аргументе s.
.offsetHSL( h, s, l )
Метод добавляет значения h, s, и l к значениям данного цвета. Внутри же метода, вначале конвертируются значения r, g и b в HSL, добавляются значения h, s, и l, а затем цвет конвертируется обратно в RGB.
.set( value )

value — значение для установки в данный цвет.

Более подробную информацию о том, какое значение может быть указано в аргументе value, см. в разделе Конструктор. В зависимости от введенного типа, выполнение передается методам copy, setStyle, или setHex.
.setHex( hex )
Метод устанавливает значение данного цвета из шестнадцатиричного значения, переданного в параметре hex.
.setHSL( h, s, l )

h — значение оттенка цвета в диапазоне от 0.0 до 1.0.

s — значение насыщенности цвета в диапазоне от 0.0 до 1.0.

l — значение яркости цвета в диапазоне от 0.0 до 1.0.

Метод устанавливает данный цвет из значений HSL.
.setRGB( r, g, b )

r — значение красного канала в диапазоне от 0.0 до 1.0.

g — значение зеленого канала в диапазоне от 0.0 до 1.0.

b — значение синего канала в диапазоне от 0.0 до 1.0.

Метод устанавливает данный цвет из значений RGB.
.setScalar( scalar )

scalar — значение в диапазоне между 0.0 и 1.0.

Метод устанавливает все три компонента цвета равными значению, переданному в параметре scalar.
.setStyle( style )

style — строковое значение в стиле CSS в качестве значения цвета.

Метод устанавливает данный цвет из строкового значения в стиле CSS. Например, «rgb(250, 0,0)», «rgb(100%, 0%, 0%)», «hsl(0, 100%, 50%)», «#ff0000», «#f00» или «red» (или любое название цвета из цветовой схемы X11 — поддерживаются все 140 названий цвета). Вот эта страничка Википедии о цвете из схемы X11 на русском языке.
Также принимаются полупрозрачные цвета, такие как «rgba(255, 0, 0, 0.5)» и «hsla(0, 100%, 50%, 0.5)», но значение альфа-канала (канал прозрачности) отбрасывается.
Обратите внимание, что названия цвета в схеме X11, состоящие из нескольких слов, вроде Dark Orange (темно-оранжевый), становятся строковым значением ‘darkorange’ (все буквы строчные).
.sub( color )
Метод вычитает из RGB компонентов данного цвета компоненты RGB цвета, переданного в параметре color. Если в результате получается отрицательное значение компонента, этот компонент устанавливается равным нулю.
.toArray( array, offset )

array — дополнительный массив для хранения значений цвета.

offset — дополнительное смещение в массиве.

Метод возвращает массив в виде [ r, g, b ].

Бесплатный онлайн конвертер RGB и HSL цветов палитры | SEO

Конвертер RGB и HSL цвета

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

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

Связанные инструменты:

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

Что такое шестнадцатеричный код, эквивалентный RGB?

В области проектирования, а также в графическом поле нам необходимо сочетание цветов. Существует три цветовых сочетания, которые составили цвет rgb (красный, зеленый, синий), шестнадцатеричный (шестнадцатеричный) и hsl (яркость насыщенности оттенка). используется в HTML и других языках проектирования. Цветовой код высокой и низкой яркости запоминается, но их промежуточный цвет не изучается. Каждая комбинация используется в соответствии с требованиями. Наш небольшой SEO-инструмент предоставляет вам возможности, где вы выбираете цветовое требование, и он показывает вам код в соответствии с высокой низкой прокруткой красного, зеленого и синего цветов.

Как использовать конвертер цветов RGB в HEX:

Это просто. В разделе RGB есть 03 основных цвета: красный цвет (R), зеленый цвет (G) и синий цвет (B). При использовании необходимо изменить значения, перетащив выделенную секцию всех трех цветов. Предварительный просмотр своего окончательного цвета. В конце нажмите кнопку преобразования, и появятся три новых цветовых значения, включая шестнадцатеричный цветовой код, цветовой код RGB и цветовой код HSL, где вы можете скопировать желаемый код и вставить его в свое программное обеспечение для редактирования HTML или изображений. Так что держите в памяти этот инструмент для преобразования цвета RGB в цвет HEX на любое время, когда вы разрабатываете свои веб-страницы.

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

Цвет Название (R, G, B) Код
Черный (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
Серебро (192 192 192) # C0C0C0
Серый (128 128 128) # 808080
Бордовый (128,0,0) # 800000
Оливковый (128,128,0) # 808000
Зеленый (0,128,0) # 008000
Фиолетовый (128,0,128) # 800080
Бирюзовый (0,128,128) # 008080
Военно-морской (0,0,128) # 000080

Цвет модели и RGB против HSL

опубликованный: 2013-04-26

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

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

Цвет модели и RGB против HSL

Когда речь заходит о говорить о цветовых моделях и RGB против HSL, а они являются цветовые модели, которые диктуются внешними факторами , как необходимость указать цвета в соответствии с CSS3 или CSS2 стандартом и графического инструмента. Взгляните на некоторые из цветовых моделей, которые находятся здесь, как в соответствии с:

RGB

Герман Гельмгольц и Томас Юнг предложил теорию цветового зрения трехцветной, который известен как RGB (красный-зеленый-синий) цветовой модели. Основная цель позади этой теории состоит в том, чтобы произвести несколько цветов, добавив три цвета света.

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

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

HSL

Лучше всего о HSL модели является то, что его яркости и насыщенности элементов моста весь массив значений. Эта модель объясняет цвет с точки зрения легкости, насыщенности и оттенка. Исходя из этого, ColoRotate состоит из всех оттенков на различных уровнях насыщенности интенсивности формы вдоль его вертикальной и горизонтальной плоскости.

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

Связанный: как изменить цвет шрифта и цвет фона в PowerPoint 2010

Изменение значения цвета и цветовой модели в PowerPoint 2010

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

В этом случае мы меняем цвет заметкой, используемых в гибкой шаблон PowerPoint или Lean Startup шаблон Холст PowerPoint до желтого цвета, используя модель RGB, но вы можете изменить комбо Color Model и выберите HSL вместо этого.

Почитайте статьи на Что такое 5S методология.

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

Онлайн калькулятор цветов RGB, HEX, HSL, CMYK

Онлайн калькулятор для подбора цвета с помощью палитры с конвертацией между цветовыми моделями RGBa, HEX, HSLa, HSV, CMYK. Кроме того представлена таблица с большим количеством цветов HTML с названиями.

Калькулятор — коды цветов HEX, RBGa, HSL, HSV, CMYK

Таблица HTML цветов с названиями

HTML название HEX RGB
IndianRed #CD5C5C 205, 92, 92
LightCoral #F08080 240, 128, 128
Salmon #FA8072 250, 128, 114
DarkSalmon #E9967A 233, 150, 122
LightSalmon #FFA07A 255, 160, 122
Crimson #DC143C 220, 20, 60
Red #FF0000 255, 0, 0
FireBrick #B22222 178, 34, 34
DarkRed #8B0000 139, 0, 0
Pink #FFC0CB 255, 192, 203
LightPink #FFB6C1 255, 182, 193
HotPink #FF69B4 255, 105, 180
DeepPink #FF1493 255, 20, 147
MediumVioletRed #C71585 199, 21, 133
PaleVioletRed #DB7093 219, 112, 147
LightSalmon #FFA07A 255, 160, 122
Coral #FF7F50 255, 127, 80
Tomato #FF6347 255, 99, 71
OrangeRed #FF4500 255, 69, 0
DarkOrange #FF8C00 255, 140, 0
Orange #FFA500 255, 165, 0
Gold #FFD700 255, 215, 0
Yellow #FFFF00 255, 255, 0
LightYellow #FFFFE0 255, 255, 224
LemonChiffon #FFFACD 255, 250, 205
LightGoldenrodYellow #FAFAD2 250, 250, 210
PapayaWhip #FFEFD5 255, 239, 213
Moccasin #FFE4B5 255, 228, 181
PeachPuff #FFDAB9 255, 218, 185
PaleGoldenrod #EEE8AA 238, 232, 170
Khaki #F0E68C 240, 230, 140
DarkKhaki #BDB76B 189, 183, 107
Lavender #E6E6FA 230, 230, 250
Thistle #D8BFD8 216, 191, 216
Plum #DDA0DD 221, 160, 221
Violet #EE82EE 238, 130, 238
Orchid #DA70D6 218, 112, 214
Fuchsia #FF00FF 255, 0, 255
Magenta #FF00FF 255, 0, 255
MediumOrchid #BA55D3 186, 85, 211
MediumPurple #9370DB 147, 112, 219
BlueViolet #8A2BE2 138, 43, 226
DarkViolet #9400D3 148, 0, 211
DarkOrchid #9932CC 153, 50, 204
DarkMagenta #8B008B 139, 0, 139
Purple #800080 128, 0, 128
Indigo #4B0082 75, 0, 130
SlateBlue #6A5ACD 106, 90, 205
DarkSlateBlue #483D8B 72, 61, 139
HTML название HEX RGB
Cornsilk #FFF8DC 255, 248, 220
BlanchedAlmond #FFEBCD 255, 235, 205
Bisque #FFE4C4 255, 228, 196
NavajoWhite #FFDEAD 255, 222, 173
Wheat #F5DEB3 245, 222, 179
BurlyWood #DEB887 222, 184, 135
Tan #D2B48C 210, 180, 140
RosyBrown #BC8F8F 188, 143, 143
SandyBrown #F4A460 244, 164, 96
Goldenrod #DAA520 218, 165, 32
DarkGoldenRod #B8860B 184, 134, 11
Peru #CD853F 205, 133, 63
Chocolate #D2691E 210, 105, 30
SaddleBrown #8B4513 139, 69, 19
Sienna #A0522D 160, 82, 45
Brown #A52A2A 165, 42, 42
Maroon #800000 128, 0, 0
Black #000000 0, 0, 0
Gray #808080 128, 128, 128
Silver #C0C0C0 192, 192, 192
White #FFFFFF 255, 255, 255
Fuchsia #FF00FF 255, 0, 255
Purple #800080 128, 0, 128
Red #FF0000 255, 0, 0
Maroon #800000 128, 0, 0
Yellow #FFFF00 255, 255, 0
Olive #808000 128, 128, 0
Lime #00FF00 0, 255, 0
Green #008000 0, 128, 0
Aqua #00FFFF 0, 255, 255
Teal #008080 0, 128, 128
Blue #0000FF 0, 0, 255
Navy #000080 0, 0, 128
GreenYellow #ADFF2F 173, 255, 47
Chartreuse #7FFF00 127, 255, 0
LawnGreen #7CFC00 124, 252, 0
Lime #00FF00 0, 255, 0
LimeGreen #32CD32 50, 205, 50
PaleGreen #98FB98 152, 251, 152
LightGreen #90EE90 144, 238, 144
MediumSpringGreen #00FA9A 0, 250, 154
SpringGreen #00FF7F 0, 255, 127
MediumSeaGreen #3CB371 60, 179, 113
SeaGreen #2E8B57 46, 139, 87
ForestGreen #228B22 34, 139, 34
Green #008000 0, 128, 0
DarkGreen #006400 0, 100, 0
YellowGreen #9ACD32 154, 205, 50
OliveDrab #6B8E23 107, 142, 35
Olive #808000 128, 128, 0
DarkOliveGreen #556B2F 85, 107, 47
MediumAquamarine #66CDAA 102, 205, 170
DarkSeaGreen #8FBC8F 143, 188, 143
LightSeaGreen #20B2AA 32, 178, 170
DarkCyan #008B8B 0, 139, 139
Teal #008080 0, 128, 128
HTML название HEX RGB
Aqua #00FFFF 0, 255, 255
Cyan #00FFFF 0, 255, 255
LightCyan #E0FFFF 224, 255, 255
PaleTurquoise #AFEEEE 175, 238, 238
Aquamarine #7FFFD4 127, 255, 212
Turquoise #40E0D0 64, 224, 208
MediumTurquoise #48D1CC 72, 209, 204
DarkTurquoise #00CED1 0, 206, 209
CadetBlue #5F9EA0 95, 158, 160
SteelBlue #4682B4 70, 130, 180
LightSteelBlue #B0C4DE 176, 196, 222
PowderBlue #B0E0E6 176, 224, 230
LightBlue #ADD8E6 173, 216, 230
SkyBlue #87CEEB 135, 206, 235
LightSkyBlue #87CEFA 135, 206, 250
DeepSkyBlue #00BFFF 0, 191, 255
DodgerBlue #1E90FF 30, 144, 255
CornflowerBlue #6495ED 100, 149, 237
MediumSlateBlue #7B68EE 123, 104, 238
RoyalBlue #4169E1 65, 105, 225
Blue #0000FF 0, 0, 255
MediumBlue #0000CD 0, 0, 205
DarkBlue #00008B 0, 0, 139
Navy #000080 0, 0, 128
MidnightBlue #191970 25, 25, 112
White #FFFFFF 255, 255, 255
Snow #FFFAFA 255, 250, 250
Honeydew #F0FFF0 240, 255, 240
MintCream #F5FFFA 245, 255, 250
Azure #F0FFFF 240, 255, 255
AliceBlue #F0F8FF 240, 248, 255
GhostWhite #F8F8FF 248, 248, 255
WhiteSmoke #F5F5F5 245, 245, 245
Seashell #FFF5EE 255, 245, 238
Beige #F5F5DC 245, 245, 220
OldLace #FDF5E6 253, 245, 230
FloralWhite #FFFAF0 255, 250, 240
Ivory #FFFFF0 255, 255, 240
AntiqueWhite #FAEBD7 250, 235, 215
Linen #FAF0E6 250, 240, 230
LavenderBlush #FFF0F5 255, 240, 245
MistyRose #FFE4E1 255, 228, 225
Gainsboro #DCDCDC 220, 220, 220
LightGrey #D3D3D3 211, 211, 211
LightGray #D3D3D3 211, 211, 211
Silver #C0C0C0 192, 192, 192
DarkGray #A9A9A9 169, 169, 169
DarkGrey #A9A9A9 169, 169, 169
Gray #808080 128, 128, 128
Grey #808080 128, 128, 128
DimGray #696969 105, 105, 105
DimGrey #696969 105, 105, 105
LightSlateGray #778899 119, 136, 153
LightSlateGrey #778899 119, 136, 153
SlateGray #708090 112, 128, 144
SlateGrey #708090 112, 128, 144
DarkSlateGray #2F4F4F 47, 79, 79
DarkSlateGrey #2F4F4F 47, 79, 79
Black #000000 0, 0, 0

HSL: учебник по цвету

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

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

Оттенок — реальный цвет.Измеряется в угловых градусах против часовой стрелки вокруг цилиндр, начинающийся и заканчивающийся красным = 0 или 360 (таким образом, желтый = 60, зеленый = 120 и т. д.). Несмотря на то, что здесь показаны 30-градусные приращения, каждая отдельная степень оттенка представляет слегка отличающийся оттенок цвета.

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

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

Яркость, как она описана здесь, относится только к относительным значениям внутри источника, на который мы смотрим (например, экран дисплея или распечатанный документ).Иногда его называют яркостью или яркостью (HSB). Различие между уровнями яркости на самом деле не является линейным, поскольку шкала HSL подразумевала бы; мы гораздо более чувствительны к изменениям светлых значений чем к более темным.

Для таблиц веб-стилей, использующих целые числа, существует 360×99×98 = 3,49 миллиона возможных HSL. выбор цвета (без учета бессмысленных настроек) — более чем достаточно для любого практического использования. Посмотрите, как это работает, на странице Использование HSL.

Цветовой контраст

Для зрителя важен видимый контраст между два цвета независимо от оттенка; это называется коэффициентом яркости . Это также важно для веб-дизайнеров, так как недостаточный контраст между текстом и фон может быть очень трудным для чтения для многих людей. Точные значения можно найти в W3C Интернет Руководство по доступности контента (WCAG).

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

Гамма

Помните, что система HSL может описывать цвет независимо от физическая система, о которой мы говорим. Никакие два компьютерных монитора не могут воспроизводить в точности одинаковые цвета; и два принтера — и цвета, которые вы видите на мониторе, могут быть очень отличается от тех, что вы видите в печати, и тех, что вы видите в «реальной жизни».”

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

← Предыдущий: Свет • Подробнее: Использование HSL • ↑ Наверх ↑ • Далее: Оттенки серого →

Copyright 1997–2020 by Tom Jewett
Кафедра компьютерной инженерии и компьютерных наук, почетный
Калифорнийский государственный университет, Лонг-Бич,
Gmail: tjewett150


Доступная палитра: прекратить использование HSL для цветовых систем

Недавно я отправился на задание по реконструкции цветовой системы в Postmark.Этот проект решил несколько проблем с нашей системой дизайна, потребовал много исследований и даже потребовал создания нескольких пользовательских инструментов. Теперь, когда этот проект завершен, я хочу поделиться самыми важными уроками, которые я усвоил о цвете, и представить новый инструмент дизайна и специальных возможностей Accessible Palette, рожденный в результате этой работы.

Основными проблемами с нашей старой палитрой были непостоянная воспринимаемая яркость цветов (синий и красный намного темнее желтого и зеленого) и непредсказуемые соотношения контрастности между цветовыми вариантами.При выборе пары цветов мы не могли легко определить, соответствует ли она рекомендациям Руководства по доступности веб-контента (WCAG), и нам пришлось вручную проверять коэффициент контрастности. (Или, скорее всего… не проверить.)

Postmark Color System v1 с непостоянной яркостью

Коэффициенты контрастности на белом фоне

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

Прекратите использовать HSL для цветовых систем!

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

Рассмотрим цвета в этой шкале с одинаковой насыщенностью (100) и яркостью (50) в HSL:

Хотя эта шкала может иметь постоянную яркость в соответствии с цветовой моделью, она определенно кажется неправильной для человека — визуально синий ( #00F ) намного темнее желтого ( #FF0 ) или голубого ( #0FF ). .Это происходит потому, что в HSL полностью насыщенные цвета сопоставляются с пиковыми значениями RGB и размещаются вокруг круга оттенка со значением яркости 50, а значения 0 и 100 соответствуют полностью черному и белому соответственно. Когда нужен более светлый или более темный вариант цвета, он «смешивается» с белым или черным. Центральная вертикальная ось включает диапазон нейтрального или серого цветов с нулевой насыщенностью. (Разница между HSL и HSV незначительна для этого обсуждения, но вместо «смешивания» цветов HSV представляет, как цвета выглядят при ярком свете, поэтому наиболее насыщенные цвета имеют значение 100.)

На основе иллюстраций Джейкоба Руса и Майкла Хорвата (SharkD), CC BY-SA 3.0, Wikimedia Commons.

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

Встречайте CIELAB и LCh

К тому времени, когда модели HSL и HSV были формализованы, уже существовала лучшая альтернатива.Международная комиссия по освещению (сокращенно CIE) определила цветовое пространство CIELAB или L*a*b* еще в 1976 году. Оно было разработано как однородное для восприятия цветовое пространство, в котором данное числовое изменение соответствует аналогичному воспринимаемому. изменить в цвете. В отличие от цветовой модели RGB, CIELAB предназначена для охвата всего диапазона видимых цветов, а ее компонент Lightness (L*) точно соответствует человеческому восприятию.

Вот как определяется это цветовое пространство согласно Википедии:

Значение яркости L* определяет черный как 0 и белый как 100.Ось a* относится к зелено-красным цветам противника, с отрицательными значениями в сторону зеленого и положительными значениями в сторону красного. Ось b* представляет сине-желтых противников с отрицательными числами в сторону синего и положительными в сторону желтого.

Ранее я говорил, что RGB неудобен и не интуитивно понятен. Что ж, CIELAB действительно расставил все по своим местам.

Видимая гамма в цветовом пространстве CIELAB (см. также в виде видео). a и b — горизонтальные оси; L — вертикальная ось. Майкл Хорват (SharkD), Кристоф Липка, CC BY-SA 4.0, через Викисклад.

Подобно тому, как HSL и HSV являются более простыми в использовании цилиндрическими представлениями RGB, цветовое пространство CIELCh или LCh или Lch(ab) является цилиндрическим представлением CIELAB. Компоненты цветности a* и b* заменены на Цветность (относительная насыщенность) и Оттенок угол, а Яркость остается без изменений.Угол оттенка подобен углу HSL, но они не идентичны — HSL/HSV использует три дополнительных основных цвета: красный, зеленый и синий (H = 0, 120, 240°). Вместо этого в системе LCh используются четыре цвета: красный, желтый, зеленый и синий (h = 0, 90, 180, 270°). (Стоит упомянуть, что существует аналогичное цветовое пространство HCL или LCh(uv) с цветностью по единой шкале от 0 до 100, в отличие от LCh(ab), где оно варьируется в зависимости от оттенка и яркости.)

Видимая гамма в цветовом пространстве CIELCh (см. также в виде видео). L — вертикальная ось; C — радиус цилиндра; h угол по окружности. Майкл Хорват (SharkD), Кристоф Липка, CC BY-SA 4.0, через Викисклад.

Вы можете заметить, что, в отличие от HSL и HSV, LCh помещается внутри цилиндра, но не заполняет его. Это ожидаемо, так как некоторые комбинации Lightness, Chroma и Hue дают невозможные цвета — например, темного насыщенного желтого просто не существует. Чем ближе видимая гамма к черному и белому по шкале яркости, тем меньше цветов может различить человеческий глаз.На самом деле даже не все эти видимые цвета могут быть отображены на экране — гамма sRGB представляет собой типичный экран и включает только около ⅓ цветового пространства LCh. Это то, чем мы также ограничены в CSS, по крайней мере, на данный момент.

Гамма sRGB, построенная в цилиндрическом цветовом пространстве LCh (см. также в виде видео).Майкл Хорват (SharkD), Кристоф Липка, CC BY-SA 4.0, через Викисклад.

Вернемся к нашей цветовой шкале HSL с насыщенностью 100 и яркостью 50 и посмотрим, какова ее яркость в LCh:

Теперь эти цифры имеют больше смысла – желтый – самый светлый цвет, синий — самый темный, зеленый почти в три раза светлее синего и вдвое светлее красного.Давайте перестроим эту шкалу в LCh с постоянным уровнем Lightness:

.

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

.

Гладкий как масло, даже если мы имеем дело с ограниченным цветовым пространством sRGB. Это отличная основа для построения цветовой системы.

В этот момент вы можете задаться вопросом, почему дизайнерское сообщество не использует широко это мощное цветовое пространство.На сегодняшний день ни Figma, ни Sketch, ни Adobe XD не поддерживают CIELAB или LCh. Для Figma есть палитра цветов LCH и плагины Chromatic, но я не нашел их достаточными для создания гибкой цветовой системы. Идеальный инструмент для этой работы должен генерировать цветовые варианты с постоянной яркостью, позволять мне контролировать коэффициент контрастности между ними и быть достаточно гибким, чтобы использовать существующие цвета бренда. Именно тогда я обнаружил библиотеку Chroma.js с отличной поддержкой LCh и решил написать простой инструмент для создания новой палитры из кода.После внутреннего использования этого инструмента и обмена им с несколькими друзьями мы решили превратить его в приложение и опубликовать его публично как проект нашей лаборатории.

Представляем доступную палитру

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

Интерфейс приложения Accessible Palette

  • Вы начинаете с настройки одного из начальных цветов или вставки существующего цвета из вашего дизайна.Инструмент будет использовать цветность и оттенок цвета для расчета шкалы с несколькими уровнями яркости.
  • Яркость полностью настраивается и может работать как со светлыми, так и с темными палитрами. Он также обеспечивает детальный контроль над палитрой, чтобы включить существующие фирменные цвета. В нашем случае я хотел сохранить три наиболее часто используемых цвета из исходной палитры Postmark — желтый #FFDE00 , синий #007DCC и зеленый #4FC47F . Взяв их в качестве исходных цветов, я использовал их значения Lightness (88.6, 75,2 и 50,6 соответственно) в качестве яркости для уровней 200, 400 и 600.
  • Коэффициент контрастности зависит от яркости и рассчитывается для каждого уровня с использованием как текущих рекомендаций WCAG 2.1, так и нового алгоритма в предстоящей рабочей версии 3.0. Проект. (Существующий способ измерения контрастности несовершенен, но мы поговорим об этом позже.) По умолчанию контраст каждого цвета измеряется на белом фоне, но вы можете выбрать любой образец цвета, чтобы измерить коэффициент контрастности относительно него.
  • Уровни могут быть созданы с использованием цветового пространства RGB или CIELAB . В некоторых случаях результаты могут отличаться, поэтому стоит поэкспериментировать. В цветовой схеме Postmark использование CIELAB уменьшило пурпурный оттенок в более светлых красных тонах (хорошо), но усилило синие оттенки (плохо).
  • Для некоторых цветов может потребоваться сдвиг оттенка в диапазоне . Хорошим примером является наш ярко-желтый — по мере того, как он становится темнее, цвета приобретают зеленоватый оттенок. Чтобы приблизить их к оранжевому, я использую отрицательную компенсацию оттенка.
  • Когда вы используете приложение, оно обновляет URL-адрес для сохранения изменений . Поделитесь им со своей командой или добавьте в свою библиотеку Figma и файл CSS с цветовыми переменными для дальнейшего использования.

Приложение можно использовать для создания всевозможных цветовых палитр. Используйте их в качестве окончательной цветовой системы или в качестве основы для дальнейшего развития. Чтобы увидеть несколько реальных примеров, ознакомьтесь с новой цветовой палитрой Postmark или палитрами, основанными на Google Material Design или TailwindCSS.Это не точные копии, а альтернативные варианты, вдохновленные оригинальными цветами и уровнями яркости.

Бонус: как рассчитываются коэффициенты контрастности?

Так почему же в палитре Accessible Palette показаны два разных коэффициента контрастности? WCAG 2.1 вычисляет коэффициент контрастности путем деления яркости цвета переднего плана на яркость фона. Проблема в том, что эта формула обеспечивает линейный отклик, в то время как люди воспринимают контраст между более светлыми цветами как более высокий, чем между более темными цветами.Рассмотрим эти примеры:

На практике образцы, соответствующие рекомендациям WCAG 2.1, труднее читать, чем образцы с «недостаточным» коэффициентом контрастности. К счастью, W3C знает об этой проблеме, поскольку Эндрю Сомерс начал открытое обсуждение еще в 2019 году. (Это увлекательное и глубокое чтение, если у вас есть свободный вечер или два.) Он предложил лучший рабочий алгоритм, который теперь является частью рабочего проекта WCAG 3, и построил калькулятор контраста APCA, который является точным для восприятия, а также учитывает размер и вес шрифта. Доступная палитра использует его алгоритм Advanced Perceptual Contrast Algorithm (APCA) и считает 60 баллов минимальным уровнем, рекомендуемым для читаемого текста, аналогично старой рекомендации коэффициента контрастности 4,5: 1 в WCAG 2.1.

Давайте посмотрим, как наши примеры будут работать с новым алгоритмом:

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

Когда я начал работать над новой цветовой системой Postmark, я не ожидал отказаться от наиболее часто используемой цветовой модели или подвергнуть сомнению текущие рекомендации WCAG.Этот проект привел меня в кроличью нору теории цвета и привел к созданию инструмента, который может помочь создавать согласованные и доступные цветовые палитры с минимальными усилиями. Это редкая ситуация, когда в итоге выигрывают и дизайнеры, и пользователи. Если вы в конечном итоге используете Accessible Palette для своего проекта или у вас есть вопросы по этому поводу, отправьте мне электронное письмо или свяжитесь с нами в Твиттере!

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

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

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

Ниже приведены четыре таблицы цветов HSL. На каждой диаграмме каждая строка увеличивает оттенок на 5. Каждая диаграмма затем использует разные уровни яркости или насыщенности.

Уменьшение насыщенности

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

Щелкните значение HSL, чтобы открыть этот цвет и его код в онлайн-редакторе.

0,100%,50%

5,100%,50%

10,100%,50%

15,100%,50%

20,100%,50%

25,100%,50%

30,100%,50%

35,100%,50%

40,100%,50%

45,100%,50%

50,100%,50%

55,100%,50%

60,100%,50%

65,100%,50%

70,100%,50%

75,100%,50%

80,100%,50%

85,100%,50%

90,100%,50%

95,100%,50%

100,100%,50%

105,100%,50%

110,100%,50%

115,100%,50%

120,100%,50%

125,100%,50%

130,100%,50%

135,100%,50%

140,100%,50%

145,100%,50%

150,100%,50%

155,100%,50%

160,100%,50%

165,100%,50%

170,100%,50%

175,100%,50%

180,100%,50%

185,100%,50%

190,100%,50%

195,100%,50%

200,100%,50%

205,100%,50%

210,100%,50%

215,100%,50%

220,100%,50%

225,100%,50%

230,100%,50%

235,100%,50%

240,100%,50%

245,100%,50%

250,100%,50%

255,100%,50%

260,100%,50%

265,100%,50%

270,100%,50%

275,100%,50%

280,100%,50%

285,100%,50%

290,100%,50%

295,100%,50%

300,100%,50%

305,100%,50%

310,100%,50%

315,100%,50%

320,100%,50%

325,100%,50%

330,100%,50%

335,100%,50%

340,100%,50%

345,100%,50%

350,100%,50%

355,100%,50%

0,75%,50%

5,75%,50%

10,75%,50%

15,75%,50%

20,75%,50%

25,75%,50%

30,75%,50%

35,75%,50%

40,75%,50%

45,75%,50%

50,75%,50%

55,75%,50%

60,75%,50%

65,75%,50%

70,75%,50%

75,75%,50%

80,75%,50%

85,75%,50%

90,75%,50%

95,75%,50%

100,75%,50%

105,75%,50%

110,75%,50%

115,75%,50%

120,75%,50%

125,75%,50%

130,75%,50%

135,75%,50%

140,75%,50%

145,75%,50%

150,75%,50%

155,75%,50%

160,75%,50%

165,75%,50%

170,75%,50%

175,75%,50%

180,75%,50%

185,75%,50%

190,75%,50%

195,75%,50%

200,75%,50%

205,75%,50%

210,75%,50%

215,75%,50%

220,75%,50%

225,75%,50%

230,75%,50%

235,75%,50%

240,75%,50%

245,75%,50%

250,75%,50%

255,75%,50%

260,75%,50%

265,75%,50%

270,75%,50%

275,75%,50%

280,75%,50%

285,75%,50%

290,75%,50%

295,75%,50%

300,75%,50%

305,75%,50%

310,75%,50%

315,75%,50%

320,75%,50%

325,75%,50%

330,75%,50%

335,75%,50%

340,75%,50%

345,75%,50%

350,75%,50%

355,75%,50%

0,50%,50%

5,50%,50%

10,50%,50%

15,50%,50%

20,50%,50%

25,50%,50%

30,50%,50%

35,50%,50%

40,50%,50%

45,50%,50%

50,50%,50%

55,50%,50%

60,50%,50%

65,50%,50%

70,50%,50%

75,50%,50%

80,50%,50%

85,50%,50%

90,50%,50%

95,50%,50%

100,50%,50%

105,50%,50%

110,50%,50%

115,50%,50%

120,50%,50%

125,50%,50%

130,50%,50%

135,50%,50%

140,50%,50%

145,50%,50%

150,50%,50%

155,50%,50%

160,50%,50%

165,50%,50%

170,50%,50%

175,50%,50%

180,50%,50%

185,50%,50%

190,50%,50%

195,50%,50%

200,50%,50%

205,50%,50%

210,50%,50%

215,50%,50%

220,50%,50%

225,50%,50%

230,50%,50%

235,50%,50%

240,50%,50%

245,50%,50%

250,50%,50%

255,50%,50%

260,50%,50%

265,50%,50%

270,50%,50%

275,50%,50%

280,50%,50%

285,50%,50%

290,50%,50%

295,50%,50%

300,50%,50%

305,50%,50%

310,50%,50%

315,50%,50%

320,50%,50%

325,50%,50%

330,50%,50%

335,50%,50%

340,50%,50%

345,50%,50%

350,50%,50%

355,50%,50%

0,25%,50%

5,25%,50%

10,25%,50%

15,25%,50%

20,25%,50%

25,25%,50%

30,25%,50%

35,25%,50%

40,25%,50%

45,25%,50%

50,25%,50%

55,25%,50%

60,25%,50%

65,25%,50%

70,25%,50%

75,25%,50%

80,25%,50%

85,25%,50%

90,25%,50%

95,25%,50%

100,25%,50%

105,25%,50%

110,25%,50%

115,25%,50%

120,25%,50%

125,25%,50%

130,25%,50%

135,25%,50%

140,25%,50%

145,25%,50%

150,25%,50%

155,25%,50%

160,25%,50%

165,25%,50%

170,25%,50%

175,25%,50%

180,25%,50%

185,25%,50%

190,25%,50%

195,25%,50%

200,25%,50%

205,25%,50%

210,25%,50%

215,25%,50%

220,25%,50%

225,25%,50%

230,25%,50%

235,25%,50%

240,25%,50%

245,25%,50%

250,25%,50%

255,25%,50%

260,25%,50%

265,25%,50%

270,25%,50%

275,25%,50%

280,25%,50%

285,25%,50%

290,25%,50%

295,25%,50%

300,25%,50%

305,25%,50%

310,25%,50%

315,25%,50%

320,25%,50%

325,25%,50%

330,25%,50%

335,25%,50%

340,25%,50%

345,25%,50%

350,25%,50%

355,25%,50%

Уменьшение яркости

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

Щелкните значение HSL, чтобы открыть этот цвет и его код в онлайн-редакторе.

0,100%,80%

5,100%,80%

10,100%,80%

15,100%,80%

20,100%,80%

25,100%,80%

30,100%,80%

35,100%,80%

40,100%,80%

45,100%,80%

50,100%,80%

55,100%,80%

60,100%,80%

65,100%,80%

70,100%,80%

75,100%,80%

80,100%,80%

85,100%,80%

90,100%,80%

95,100%,80%

100,100%,80%

105,100%,80%

110,100%,80%

115,100%,80%

120,100%,80%

125,100%,80%

130,100%,80%

135,100%,80%

140,100%,80%

145,100%,80%

150,100%,80%

155,100%,80%

160,100%,80%

165,100%,80%

170,100%,80%

175,100%,80%

180,100%,80%

185,100%,80%

190,100%,80%

195,100%,80%

200,100%,80%

205,100%,80%

210,100%,80%

215,100%,80%

220,100%,80%

225,100%,80%

230,100%,80%

235,100%,80%

240,100%,80%

245,100%,80%

250,100%,80%

255,100%,80%

260,100%,80%

265,100%,80%

270,100%,80%

275,100%,80%

280,100%,80%

285,100%,80%

290,100%,80%

295,100%,80%

300,100%,80%

305,100%,80%

310,100%,80%

315,100%,80%

320,100%,80%

325,100%,80%

330,100%,80%

335,100%,80%

340,100%,80%

345,100%,80%

350,100%,80%

355,100%,80%

0,100%,60%

5,100%,60%

10,100%,60%

15,100%,60%

20,100%,60%

25,100%,60%

30,100%,60%

35,100%,60%

40,100%,60%

45,100%,60%

50,100%,60%

55,100%,60%

60,100%,60%

65,100%,60%

70,100%,60%

75,100%,60%

80,100%,60%

85,100%,60%

90,100%,60%

95,100%,60%

100,100%,60%

105,100%,60%

110,100%,60%

115,100%,60%

120,100%,60%

125,100%,60%

130,100%,60%

135,100%,60%

140,100%,60%

145,100%,60%

150,100%,60%

155,100%,60%

160,100%,60%

165,100%,60%

170,100%,60%

175,100%,60%

180,100%,60%

185,100%,60%

190,100%,60%

195,100%,60%

200,100%,60%

205,100%,60%

210,100%,60%

215,100%,60%

220,100%,60%

225,100%,60%

230,100%,60%

235,100%,60%

240,100%,60%

245,100%,60%

250,100%,60%

255,100%,60%

260,100%,60%

265,100%,60%

270,100%,60%

275,100%,60%

280,100%,60%

285,100%,60%

290,100%,60%

295,100%,60%

300,100%,60%

305,100%,60%

310,100%,60%

315,100%,60%

320,100%,60%

325,100%,60%

330,100%,60%

335,100%,60%

340,100%,60%

345,100%,60%

350,100%,60%

355,100%,60%

0,100%,40%

5,100%,40%

10,100%,40%

15,100%,40%

20,100%,40%

25,100%,40%

30,100%,40%

35,100%,40%

40,100%,40%

45,100%,40%

50,100%,40%

55,100%,40%

60,100%,40%

65,100%,40%

70,100%,40%

75,100%,40%

80,100%,40%

85,100%,40%

90,100%,40%

95,100%,40%

100,100%,40%

105,100%,40%

110,100%,40%

115,100%,40%

120,100%,40%

125,100%,40%

130,100%,40%

135,100%,40%

140,100%,40%

145,100%,40%

150,100%,40%

155,100%,40%

160,100%,40%

165,100%,40%

170,100%,40%

175,100%,40%

180,100%,40%

185,100%,40%

190,100%,40%

195,100%,40%

200,100%,40%

205,100%,40%

210,100%,40%

215,100%,40%

220,100%,40%

225,100%,40%

230,100%,40%

235,100%,40%

240,100%,40%

245,100%,40%

250,100%,40%

255,100%,40%

260,100%,40%

265,100%,40%

270,100%,40%

275,100%,40%

280,100%,40%

285,100%,40%

290,100%,40%

295,100%,40%

300,100%,40%

305,100%,40%

310,100%,40%

315,100%,40%

320,100%,40%

325,100%,40%

330,100%,40%

335,100%,40%

340,100%,40%

345,100%,40%

350,100%,40%

355,100%,40%

0,100%,20%

5,100%,20%

10,100%,20%

15,100%,20%

20,100%,20%

25,100%,20%

30,100%,20%

35,100%,20%

40,100%,20%

45,100%,20%

50,100%,20%

55,100%,20%

60,100%,20%

65,100%,20%

70,100%,20%

75,100%,20%

80,100%,20%

85,100%,20%

90,100%,20%

95,100%,20%

100,100%,20%

105,100%,20%

110,100%,20%

115,100%,20%

120,100%,20%

125,100%,20%

130,100%,20%

135,100%,20%

140,100%,20%

145,100%,20%

150,100%,20%

155,100%,20%

160,100%,20%

165,100%,20%

170,100%,20%

175,100%,20%

180,100%,20%

185,100%,20%

190,100%,20%

195,100%,20%

200,100%,20%

205,100%,20%

210,100%,20%

215,100%,20%

220,100%,20%

225,100%,20%

230,100%,20%

235,100%,20%

240,100%,20%

245,100%,20%

250,100%,20%

255,100%,20%

260,100%,20%

265,100%,20%

270,100%,20%

275,100%,20%

280,100%,20%

285,100%,20%

290,100%,20%

295,100%,20%

300,100%,20%

305,100%,20%

310,100%,20%

315,100%,20%

320,100%,20%

325,100%,20%

330,100%,20%

335,100%,20%

340,100%,20%

345,100%,20%

350,100%,20%

355,100%,20%

Уменьшение насыщенности с увеличением яркости

Эта диаграмма такая же, как и первая диаграмма (где мы регулируем насыщенность, сохраняя яркость на уровне 50% ), но здесь мы увеличиваем яркость до 75% .

Щелкните значение HSL, чтобы открыть этот цвет и его код в онлайн-редакторе.

0,100%,75%

5,100%,75%

10,100%,75%

15,100%,75%

20,100%,75%

25,100%,75%

30,100%,75%

35,100%,75%

40,100%,75%

45,100%,75%

50,100%,75%

55,100%,75%

60,100%,75%

65,100%,75%

70,100%,75%

75,100%,75%

80,100%,75%

85,100%,75%

90,100%,75%

95,100%,75%

100,100%,75%

105,100%,75%

110,100%,75%

115,100%,75%

120,100%,75%

125,100%,75%

130,100%,75%

135,100%,75%

140,100%,75%

145,100%,75%

150,100%,75%

155,100%,75%

160,100%,75%

165,100%,75%

170,100%,75%

175,100%,75%

180,100%,75%

185,100%,75%

190,100%,75%

195,100%,75%

200,100%,75%

205,100%,75%

210,100%,75%

215,100%,75%

220,100%,75%

225,100%,75%

230,100%,75%

235,100%,75%

240,100%,75%

245,100%,75%

250,100%,75%

255,100%,75%

260,100%,75%

265,100%,75%

270,100%,75%

275,100%,75%

280,100%,75%

285,100%,75%

290,100%,75%

295,100%,75%

300,100%,75%

305,100%,75%

310,100%,75%

315,100%,75%

320,100%,75%

325,100%,75%

330,100%,75%

335,100%,75%

340,100%,75%

345,100%,75%

350,100%,75%

355,100%,75%

0,75%,75%

5,75%,75%

10,75%,75%

15,75%,75%

20,75%,75%

25,75%,75%

30,75%,75%

35,75%,75%

40,75%,75%

45,75%,75%

50,75%,75%

55,75%,75%

60,75%,75%

65,75%,75%

70,75%,75%

75,75%,75%

80,75%,75%

85,75%,75%

90,75%,75%

95,75%,75%

100,75%,75%

105,75%,75%

110,75%,75%

115,75%,75%

120,75%,75%

125,75%,75%

130,75%,75%

135,75%,75%

140,75%,75%

145,75%,75%

150,75%,75%

155,75%,75%

160,75%,75%

165,75%,75%

170,75%,75%

175,75%,75%

180,75%,75%

185,75%,75%

190,75%,75%

195,75%,75%

200,75%,75%

205,75%,75%

210,75%,75%

215,75%,75%

220,75%,75%

225,75%,75%

230,75%,75%

235,75%,75%

240,75%,75%

245,75%,75%

250,75%,75%

255,75%,75%

260,75%,75%

265,75%,75%

270,75%,75%

275,75%,75%

280,75%,75%

285,75%,75%

290,75%,75%

295,75%,75%

300,75%,75%

305,75%,75%

310,75%,75%

315,75%,75%

320,75%,75%

325,75%,75%

330,75%,75%

335,75%,75%

340,75%,75%

345,75%,75%

350,75%,75%

355,75%,75%

0,50%,75%

5,50%,75%

10,50%,75%

15,50%,75%

20,50%,75%

25,50%,75%

30,50%,75%

35,50%,75%

40,50%,75%

45,50%,75%

50,50%,75%

55,50%,75%

60,50%,75%

65,50%,75%

70,50%,75%

75,50%,75%

80,50%,75%

85,50%,75%

90,50%,75%

95,50%,75%

100,50%,75%

105,50%,75%

110,50%,75%

115,50%,75%

120,50%,75%

125,50%,75%

130,50%,75%

135,50%,75%

140,50%,75%

145,50%,75%

150,50%,75%

155,50%,75%

160,50%,75%

165,50%,75%

170,50%,75%

175,50%,75%

180,50%,75%

185,50%,75%

190,50%,75%

195,50%,75%

200,50%,75%

205,50%,75%

210,50%,75%

215,50%,75%

220,50%,75%

225,50%,75%

230,50%,75%

235,50%,75%

240,50%,75%

245,50%,75%

250,50%,75%

255,50%,75%

260,50%,75%

265,50%,75%

270,50%,75%

275,50%,75%

280,50%,75%

285,50%,75%

290,50%,75%

295,50%,75%

300,50%,75%

305,50%,75%

310,50%,75%

315,50%,75%

320,50%,75%

325,50%,75%

330,50%,75%

335,50%,75%

340,50%,75%

345,50%,75%

350,50%,75%

355,50%,75%

0,25%,75%

5,25%,75%

10,25%,75%

15,25%,75%

20,25%,75%

25,25%,75%

30,25%,75%

35,25%,75%

40,25%,75%

45,25%,75%

50,25%,75%

55,25%,75%

60,25%,75%

65,25%,75%

70,25%,75%

75,25%,75%

80,25%,75%

85,25%,75%

90,25%,75%

95,25%,75%

100,25%,75%

105,25%,75%

110,25%,75%

115,25%,75%

120,25%,75%

125,25%,75%

130,25%,75%

135,25%,75%

140,25%,75%

145,25%,75%

150,25%,75%

155,25%,75%

160,25%,75%

165,25%,75%

170,25%,75%

175,25%,75%

180,25%,75%

185,25%,75%

190,25%,75%

195,25%,75%

200,25%,75%

205,25%,75%

210,25%,75%

215,25%,75%

220,25%,75%

225,25%,75%

230,25%,75%

235,25%,75%

240,25%,75%

245,25%,75%

250,25%,75%

255,25%,75%

260,25%,75%

265,25%,75%

270,25%,75%

275,25%,75%

280,25%,75%

285,25%,75%

290,25%,75%

295,25%,75%

300,25%,75%

305,25%,75%

310,25%,75%

315,25%,75%

320,25%,75%

325,25%,75%

330,25%,75%

335,25%,75%

340,25%,75%

345,25%,75%

350,25%,75%

355,25%,75%

Уменьшение яркости с уменьшенной насыщенностью

Этот график такой же, как и второй график (где мы регулируем яркость, сохраняя полную насыщенность), но на этом мы уменьшаем насыщенность до 50% .

Щелкните значение HSL, чтобы открыть этот цвет и его код в онлайн-редакторе.

0,50%,80%

5,50%,80%

10,50%,80%

15,50%,80%

20,50%,80%

25,50%,80%

30,50%,80%

35,50%,80%

40,50%,80%

45,50%,80%

50,50%,80%

55,50%,80%

60,50%,80%

65,50%,80%

70,50%,80%

75,50%,80%

80,50%,80%

85,50%,80%

90,50%,80%

95,50%,80%

100,50%,80%

105,50%,80%

110,50%,80%

115,50%,80%

120,50%,80%

125,50%,80%

130,50%,80%

135,50%,80%

140,50%,80%

145,50%,80%

150,50%,80%

155,50%,80%

160,50%,80%

165,50%,80%

170,50%,80%

175,50%,80%

180,50%,80%

185,50%,80%

190,50%,80%

195,50%,80%

200,50%,80%

205,50%,80%

210,50%,80%

215,50%,80%

220,50%,80%

225,50%,80%

230,50%,80%

235,50%,80%

240,50%,80%

245,50%,80%

250,50%,80%

255,50%,80%

260,50%,80%

265,50%,80%

270,50%,80%

275,50%,80%

280,50%,80%

285,50%,80%

290,50%,80%

295,50%,80%

300,50%,80%

305,50%,80%

310,50%,80%

315,50%,80%

320,50%,80%

325,50%,80%

330,50%,80%

335,50%,80%

340,50%,80%

345,50%,80%

350,50%,80%

355,50%,80%

0,50%,60%

5,50%,60%

10,50%,60%

15,50%,60%

20,50%,60%

25,50%,60%

30,50%,60%

35,50%,60%

40,50%,60%

45,50%,60%

50,50%,60%

55,50%,60%

60,50%,60%

65,50%,60%

70,50%,60%

75,50%,60%

80,50%,60%

85,50%,60%

90,50%,60%

95,50%,60%

100,50%,60%

105,50%,60%

110,50%,60%

115,50%,60%

120,50%,60%

125,50%,60%

130,50%,60%

135,50%,60%

140,50%,60%

145,50%,60%

150,50%,60%

155,50%,60%

160,50%,60%

165,50%,60%

170,50%,60%

175,50%,60%

180,50%,60%

185,50%,60%

190,50%,60%

195,50%,60%

200,50%,60%

205,50%,60%

210,50%,60%

215,50%,60%

220,50%,60%

225,50%,60%

230,50%,60%

235,50%,60%

240,50%,60%

245,50%,60%

250,50%,60%

255,50%,60%

260,50%,60%

265,50%,60%

270,50%,60%

275,50%,60%

280,50%,60%

285,50%,60%

290,50%,60%

295,50%,60%

300,50%,60%

305,50%,60%

310,50%,60%

315,50%,60%

320,50%,60%

325,50%,60%

330,50%,60%

335,50%,60%

340,50%,60%

345,50%,60%

350,50%,60%

355,50%,60%

0,50%,40%

5,50%,40%

10,50%,40%

15,50%,40%

20,50%,40%

25,50%,40%

30,50%,40%

35,50%,40%

40,50%,40%

45,50%,40%

50,50%,40%

55,50%,40%

60,50%,40%

65,50%,40%

70,50%,40%

75,50%,40%

80,50%,40%

85,50%,40%

90,50%,40%

95,50%,40%

100,50%,40%

105,50%,40%

110,50%,40%

115,50%,40%

120,50%,40%

125,50%,40%

130,50%,40%

135,50%,40%

140,50%,40%

145,50%,40%

150,50%,40%

155,50%,40%

160,50%,40%

165,50%,40%

170,50%,40%

175,50%,40%

180,50%,40%

185,50%,40%

190,50%,40%

195,50%,40%

200,50%,40%

205,50%,40%

210,50%,40%

215,50%,40%

220,50%,40%

225,50%,40%

230,50%,40%

235,50%,40%

240,50%,40%

245,50%,40%

250,50%,40%

255,50%,40%

260,50%,40%

265,50%,40%

270,50%,40%

275,50%,40%

280,50%,40%

285,50%,40%

290,50%,40%

295,50%,40%

300,50%,40%

305,50%,40%

310,50%,40%

315,50%,40%

320,50%,40%

325,50%,40%

330,50%,40%

335,50%,40%

340,50%,40%

345,50%,40%

350,50%,40%

355,50%,40%

0,50%,20%

5,50%,20%

10,50%,20%

15,50%,20%

20,50%,20%

25,50%,20%

30,50%,20%

35,50%,20%

40,50%,20%

45,50%,20%

50,50%,20%

55,50%,20%

60,50%,20%

65,50%,20%

70,50%,20%

75,50%,20%

80,50%,20%

85,50%,20%

90,50%,20%

95,50%,20%

100,50%,20%

105,50%,20%

110,50%,20%

115,50%,20%

120,50%,20%

125,50%,20%

130,50%,20%

135,50%,20%

140,50%,20%

145,50%,20%

150,50%,20%

155,50%,20%

160,50%,20%

165,50%,20%

170,50%,20%

175,50%,20%

180,50%,20%

185,50%,20%

190,50%,20%

195,50%,20%

200,50%,20%

205,50%,20%

210,50%,20%

215,50%,20%

220,50%,20%

225,50%,20%

230,50%,20%

235,50%,20%

240,50%,20%

245,50%,20%

250,50%,20%

255,50%,20%

260,50%,20%

265,50%,20%

270,50%,20%

275,50%,20%

280,50%,20%

285,50%,20%

290,50%,20%

295,50%,20%

300,50%,20%

305,50%,20%

310,50%,20%

315,50%,20%

320,50%,20%

325,50%,20%

330,50%,20%

335,50%,20%

340,50%,20%

345,50%,20%

350,50%,20%

355,50%,20%

Математические цвета радуги с использованием HSL

Математические цвета радуги с использованием HSL

Математические цвета радуги с использованием HSL

На этой странице цвета отображаются с использованием модуля оттенка, насыщенности и яркости CSS.Для отображения этой страницы необходимы браузеры, полностью поддерживающие этот модуль. С 2005 года FireFox поддерживает этот модуль, а Microsoft Internet Explorer — нет.

Поддержка модуля Hue-Saturation-Luminosity (HSL) в каскадных таблицах стилей (CSS) позволяет исследовать цвета радуги с математической точки зрения. В модели HSL оттенки задаются угловой мерой. Основные цвета света — красный, зеленый и синий. В модели HSL красный цвет соответствует 0, зеленый — 120, а синий — 240.Вторичные цвета света расположены на половине основных углов. Желтый — 60, голубой — 180, пурпурный — 270.

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

Red HSL (0,100%, 50%)
желтый HSL (60 100%, 50%)
зеленый HSL (120,100%, 50%)
Blue HSL (240 100%, 50 %)

«Равноугольная» четырехцветная радуга будет:

Red HSL (0,100%, 50%)
Yellow-Green HSL (90 00%, 50%)
Cyan HSL (180 100%, 50%)
фиолетовый HSL (270,100%, 50%)

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

Red HSL (0,100%, 50%)
Оранжевый HSL (30 100%, 50%)
Желтый HSL (60 100%, 50%)
Зеленый HSL (120 100%, 50% )
синий hsl(240,100%,50%)
фиолетовый hsl(270,100%,50%)

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

.
красный HSL (0,100%, 50%)
желтый HSL (60 100%, 50%)
зеленый HSL (120 100%, 50%)
Cyan HSL (180 100%, 50% )
синий hsl(240,100%,50%)
пурпурный hsl(300,100%,50%)

Сэр Исаак Ньютон дал радуге семь цветов. Некоторые утверждали, что на него повлияло его религиозное происхождение, согласно которому шесть считалось неблагоприятным числом, а семь считалось «полным» и святым числом.Маленькие дети обычно знают шесть цветов, описанных выше, но седьмой цвет, «индиго», обычно остается загадкой. Модель HSL предлагает способ решить эту загадку математически. Синий четко соответствует 240, а красный возвращается к 360. Это ставит индиго и фиолетовый между синим и красным. Используя равноугольную математику, индиго может быть 240 + 40, а фиолетовый может быть 240 + 40 + 40:

.
Blue HSL (240 100 100%, 50%)
Red HSL (0,100%, 50%)
Оранжевый HSL (30 100%, 50%)
Желтый HSL (60 100%, 50%)
Green HSL (120 100%, 50% )
Indigo HSL (280 100 100%, 50%)
фиолетовый HSL (320 100%, 50%)

Хотя вышеизложенное не выглядит Совершенно верно, изображение пурпурной полосы внутри пурпурной или фиолетовой полосы не совсем неточно. для радуги.

Как будет выглядеть семицветная равноугольная радуга? Если начать с 0, и это не обязательно, результат будет (цвета заимствованы из ближайшего цвета x11):

Red HSL (0,100%, 50%)
Gold HSL (51 100%, 50%)
Chartreuse HSL (103 100%, 50%)
Весенний зеленый HSL (154 100%, 50 %)
dodger blue hsl(206,100%,50%)
насыщенный сланцево-синий hsl(257,100%,50%)
тёмно-розовый — фиолетовый, 1sl003 f 009, 1sl003 f

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

Срез исходного изображения взят и повернут.Срез на 400%:

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

После визуального просмотра рядов пикселей была выбрана пройденная строка пикселей 19. Это решение было довольно произвольным. Вот строка 19 с масштабом 500% по горизонтали и 1500% по вертикали:

Использование GIMP 2.2 для анализа пикселей на угол оттенка дало следующее для центральных цветных полос изображения:

Есть ряд интересных особенностей.Скорость изменения угла оттенка не постоянна при движении слева направо. Изменение сначала медленное, ускоряется примерно на 90 пикселей при угле оттенка около 100, а затем снова замедляется примерно на 120 пикселе при угле оттенка около 225.

Если двигаться слева направо, угол оттенка почти равен нулю (чисто красный) вокруг пикселя 32, но насыщенность и яркость заметно низки, особенно в строке 19. Таким образом, красный цвет существует, но он очень тусклый. В то время как радуга традиционно начинается с красного, пиксели слева от 32-го пикселя имеют цветовые углы от 346 до 358.Это цвета между пурпурным и красным, красно-фиолетовые с низкой яркостью, которые можно увидеть в виде темных розовато-фиолетовых пятен на первом изображении. Таким образом, радуга начинается не с красного, а с красно-фиолетового за пределами 270.

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

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

Предположим, кто-то хочет выбрать семь цветов для представления радуги. Какие цвета предлагает выбрать изображение? Распределение оттенков было определено для семи равных интервалов от пикселя 32 с углом оттенка 2 и пикселя 131 со значением оттенка 252. Обратите внимание, что значение 252 взято из строки пикселей шесть, значение строки 19 было 246. Выбор значение в шестой строке пикселей (первое изображение) было связано исключительно с тем, что это был самый большой угол, обнаруженный на правой стороне изображения. Обратите внимание, что внутри основной дуги может быть «перевернутая» радуга, которая представляет большее количество внутренних отражений.Углы оттенков за пикселем 131 быстро схлопнулись обратно в сине-зеленые с низкой яркостью, с углами всего 190 на пиксель 145. Не знаю, что делать с «высокими» углами оттенков справа от пикселя 32, гистограмма включает только более очевидно красно-фиолетовое ядро ​​радуги. Относительные частоты также указывают на нелинейное распределение неравномерных относительных частот.

Разделив диапазон пикселей от 32 до 131 пикселей на семь оттенков с конечными точками в 32 пикселя и 131 пиксель, можно получить следующую «радугу» (названия цветов заимствованы из соседних цветов x11):

4 желтый оттенок зеленого hsl(70,100%,50%)

4 2 средне-фиолетовый, hsl(230,70%,50%) 70%)
красный hsl(2,80%,50%)
оранжево-красный hsl(24,100%,50%)
оранжево-желтый hsl(39,100%,50%)
аквамарин hsl(158,100%,50%)
королевский синий hsl(230,70%,50%)

Обратите внимание, что hsl(252,100%,50%) явно имеет синий оттенок, в то время как на изображении тот же оттенок лавандово-фиолетовый [hsl (252,100%, 70%)].Это результат воздействия светимости. После внесения этой корректировки два других цвета также были изменены, чтобы приблизиться к исходному цифровому изображению. Угол оттенка 252 дает интересный взгляд на влияние насыщенности и яркости:

Угол оттенка 252 для различных комбинаций насыщенности и яркости
hsl(252,20%,10%) hsl(252,40%,10%) hsl(252,60%,10%) hsl(252,80%,10%) hsl(252,100%,10%) hsl(252,60%,10%) hsl(252,80%,10%) hsl(252,100%,10%)
hsl(252, 20%,20%) hsl(252,40%,20%) hsl(252,60%,20%) hsl(252,80%,20%) hsl(252,100%,20) %) hsl(252,60%,20%) hsl(252,80%,20%) hsl(252,100%,20%)
hsl(252,20%,30%) hsl(252,40%,30%) hsl(252,60%,30%) hsl(252,80%,30%) hsl(252,100%,30%) hsl( 252,60%,30%) вч(252,80%,30%) вч(252,100%,30%)
вч(252,20%,40%) вч(252, 40%,40%) hsl(252,60%,40%) hsl(252,80%,40%) hsl(252,100%,40%) hsl(252,60%,40%) %) hsl(252, 80%,40%) hsl(252,100%,40%)
hsl(252,20%,50%) hsl(252,40%,50%) hsl(252,60% ,50%) hsl(252,80%,50%) hsl(252,100%,50%) hsl(252,60%,50%) hsl(252,80%,50%) hsl(252,100%,50%)
hsl(252,20%,60%) hsl(252,40%,60%) hsl(252,60%,60%)

5

5 hsl(252,80%,60%)

hsl(252,100%,60%) hsl(252,60%,60%) hsl(252,80%,60%) hsl(252,100% ,60%)
hsl(252,20%,70%) hsl(252,40%,70%) hsl(252,60%,70%) hsl(252,80% ,70%) hsl(252,100%,70%) hsl(252,60%,70%) hsl(252,80%,70%) hsl(252,100%,70%)
hsl(252,20%,80%) hsl(252,40%,80%) hsl(252,60%,80%) hsl(252,80%,80%) хсл(252,100%,80 %) hsl(252,60%,80%) hsl(252,80%,80%) hsl(252,100%,80%)
hsl(252,20%,90%) hsl(252,40%,90%) hsl(252,60%,90%) hsl(252,80%,90%) hsl(252,100%,90%) hsl( 252,60%,90%) вч(252,80%,90%) вч(252,100%,90%)
вч(252,20%,95%) вч(252, 40%,95%) hsl(252,60%,95%) hsl(252,80%,95%) hsl(252,100%,95%) hsl(252,60%,95%) %) hsl(252,80%,95%) hsl(252,100%,95%)

Сложность, которую насыщенность и яркость приводят к единому цветовому углу, подтверждает ощущение, что не существует «правильного» количество цветов в радуге.Для любой конкретной системы цветов существует определенная последовательность, но нет единственно правильной последовательности. В мире, где доминируют системы цветопередачи RGB, такие как цветные телевизоры и мониторы, может быть логичным использовать первичные и вторичные цвета света, которые визуально выглядят лучше всего при последовательном чередовании красного, желтого, зеленого, голубого, синего, пурпурного, пурпурного. . Хотя пурпурный цвет присутствует за пределами красного, яркость и насыщенность настолько низки, что редко видны невооруженным глазом. Пурпурный цвет выглядит лучше, чем фиолетовый.Получается восьмицветная радуга. Восьмицветная радуга не только неравноугольная, но и, как на приведенных выше графиках, имеет тенденцию двигаться более «медленно» через красный, оранжевый и желтый, а затем более «быстро» через «более высокие» углы.

9450,5% зеленый 10290(%)
Предлагаемая восьмицветная радуга
красный hsl(0,100%,50%)
оранжевый hsl(30,100%,50%)
желтый hsl(60,100%,50%)
Cyan HSL (180,100%, 50%)
Blue HSL (240 100 100%, 50%)
фиолетовый HSL (270,100%, 50%)
Magenta HSL (300 100 100%, 50 %)

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

ИС 201 • СК 202 • Курсы • КОМФСМ

цветов

8.4

цветов

1 цветов

библиотека цветов предоставляет альтернативы представлениям цветов RGB. в настоящее время поддерживает hsl (оттенок, насыщенность, яркость), hsi (оттенок, насыщенность, интенсивность) и hsv (оттенок, насыщенность, значение).

Полное введение в цветовые системы hsl и hsv см. в Википедии.

2 структуры и контракты

это тип цвета hsl?

это цветотип hsi?

это тип цвета hsv?

Контракт, который принимает любой тип цвета: цвет%, строки или значения h**/c.Контракт на проценты стоимости. Эквивалентно (real-in 0 1).Контракт на стоимость оттенков. Эквивалентно (or/c (real-in 0 1) +nan.0). Этот контракт похож на %/c, за исключением того, что +nan.0 используется для цвета, не имеющие определенного оттенка.

3 Цветная конструкция

Преобразование в цвет HSL.

Преобразование обратно в цвет RGB.

Преобразование в цвет HSV.

Преобразование обратно в цвет RGB.

Преобразование в цвет HSI.

Преобразование обратно в цвет RGB.

(hsl оттенок насыщенность яркость [альфа]) → hsl?

оттенок: HUE / C
Насыщенность:% / C
Легкость:% / C
Alpha:% / C = 1.0

Непосредственное создание цвета HSL.

(значение насыщенности оттенка hsv [альфа]) → hsv?

оттенок: Hue / C
Насыщенность:% / C
Alpha:% / C = 1.0

Прямо построить цвет HSV .

(hsi оттенок насыщенность интенсивность [альфа]) → hsi?

оттенок: Hue / C
Насыщенность:% / C
Интенсивность:% / C
Alpha:% / C = 1.0

Непосредственное создание цвета HSI.

4 Манипулирование цветом

Получение дополнения цвета. Результирующий цвет имеет тот же тип, что и цвет.

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

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

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

ВШЛ

Учитывая цвет RGB \((r,g,b)_\text{RGB}\), яркость \(l\) и насыщенность \(s_\text{HSL}\) цвета HSL \((h,s_\text{HSL},l)_\text{HSL}\) определяются следующим образом [BB09b, p. 212ф.]:

\begin{уравнение} l = \frac{\max\lbrace r,g,b \rbrace + \min\lbrace r,g,b \rbrace}{2} \label{eq:hsllightness} \end{уравнение}

\begin{уравнение} s_\text{HSL} = \begin{case} 0 & \текст{если} л = 0 \\ 0.5 \cdot \frac{\max\lbrace r,g,b \rbrace — \min\lbrace r,g,b \rbrace}{l} & \текст{если} 0 Обоснование этих формул преобразования может быть лучше понято, когда визуализация куба RGB, наклоненного так, что черный цвет все еще находится в начале координат, а диагональная линия, где \(r=g=b\) теперь совпадает с вертикальной осью. Сравнение RGB и HSL показано на рисунок ниже. Для компонента легкости уравнение \ref{eq:hsllightness} относится исходный цвет RGB к указанной диагонали внутри куба RGB, в то время как уравнение \ref{eq:hslsauration} устанавливает меру расстояния от этого диагональная линия для насыщенности.

Сравнение цветовых пространств RGB и HSL.

Оттенок \(h \in [0,1]\) соответствует углу \(h \cdot 2\pi\) в радианах. Он рассчитывается по заданному цвету RGB с промежуточными шагами [BB09b, с. 208]:

\begin{уравнение} \слева( \begin{матрица} г’\г’\б’ \end{матрица} \Правильно) знак равно \слева( \begin{матрица} \frac{\max\lbrace r,g,b \rbrace — r}{\max\lbrace r,g,b \rbrace — \min\lbrace r,g,b \rbrace} \\ \frac{\max\lbrace r,g,b \rbrace — g}{\max\lbrace r,g,b \rbrace — \min\lbrace r,g,b \rbrace} \\ \frac{\max\lbrace r,g,b \rbrace — b}{\max\lbrace r,g,b \rbrace — \min\lbrace r,g,b \rbrace} \end{матрица} \Правильно) \label{eq:rgbtohuenormalizedrgb} \end{уравнение}

\begin{уравнение} ч’ = \begin{случаи} b’-g’ & \text{if} \max\lbrace r,g,b \rbrace = r \\ r’-b’+2 & \text{if} \max\lbrace r,g,b \rbrace = g \\ g’-r’+4 & \text{if} \max\lbrace r,g,b \rbrace = b \\ \end{случаи} \label{eq:rgbtohueintermediate} \end{уравнение}

\begin{уравнение} h = \frac{h’}{6} \mod 1 \label{eq:rgbtohue} \end{уравнение}

Поскольку \(r,g,b \in [0,1]\), \(r’, g’, \text{ и } b’\) все содержатся в интервале \([0,1]\) .Без ограничения общности это можно увидеть, если \(\max\lbrace r,g,b \rbrace\) принять за \(r\). В этом случае \(r’\) равно 0 и \(g’=\frac{r-g}{r-\min\lbrace r,g,b \rbrace},\ b’=\frac{r-b}{r-\min\lbrace r,g,b \rbrace} \в [0, 1]\), так как числитель может быть только меньше или равен знаменателю. Следовательно, каждая из сумм при вычислении \(h’\) должна находиться в интервале \([-1,1]\). Следовательно, \(h’ \in [-1,5]\) и \(h \in [0,1]\).В особых случаях насыщенного красного, зеленого и синего это приводит к значениям оттенка \(0\), \(\frac{2}{6}\) и \(\frac{4}{6}\) соответственно. Другим несерым вершинам куба RGB — желтому, голубому и пурпурному — присваиваются оттенки \(\frac{1}{6}\), \(\frac{3}{6}\) и \(\frac{5}{6}\). Обратите внимание, что в примере желтого цвета, где \(\max\lbrace r,g,b \rbrace = r = g\), не имеет значения, какой из двух подгоночных случаев вычисляется.\mathsf{T} & \text{если} л = 1 \end{случаи} \end{уравнение}

Уравнение \ref{eq:rgbtohueintermediate} разбивает круг оттенков на три раза по два сектора, в зависимости от того, какой компонент в исходном цвете RGB был больше, чем другие.Чтобы изменить это и получить цвет RGB, полезно сначала вычислить некоторые промежуточные значения [BB09b, p. 214]:

\begin{массив}{ccl} h’ &=& (6 \cdot h) \mod 6 \nonumber\\ % mod 6 для h=1! c_1 &=& \lfloor h’ \rfloor \nonnumber\\ c_2 &=& h’-c_1 \номер\\ д &=& \begin{case} s_\text{HSL} \cdot l & \text{if } l \leq 0.5\\ s_\text{HSL} \cdot (1-l) & \text{if } l > 0,5 % обратите внимание, что в книге есть ошибка, которая гласит (l-1) \end{случаи} \nonumber\\ u_1 &=& l + d \номер\\ u_2 &=& l — d \номер\\ u_3 &=& u_1 — (u_1 — u_2) \cdot c_2 \не число\\ u_4 &=& u_2 + (u_1 — u_2) \cdot c_2 %\label{eq:hsltorgbhelper} \конец{массив}

Здесь \(c_1\) — индекс сектора оттенка, а \(c_2\) — позиция в этом секторе.\mathsf{T} & \text{if} c_1 = 5 \end{случаи} \end{уравнение}

Рекомендуемые упражнения для этого раздела:
  • Выбор преобразования:
  • Преобразование:

Ограничения

Хотя цветовая модель HSL была разработана для облегчения выбора цвета людьми, это не идеально.Одной из причин этого является присвоение одинаковой яркости всем трем основным цветам. В пространстве sRGB основным цветам назначаются разные позиции на оси \(y\). При преобразовании этих определений первичного красного, зеленого и синего обратно в пространство XYZ, различия в компоненте Y остаются. Следовательно, основные цвета, определенные для пространства sRGB, не имеют одинаковой воспринимаемой яркости. что означает, что легкость в модели HSL не совпадает с воспринимаемой яркостью.Это становится очевидным при сравнении цветов HSL максимальной насыщенности и светлоты. \(\frac{1}{2}\) с изображением в градациях серого истинных воспринимаемых значений яркости, как показано на рисунок ниже.

Различия в яркости для одинаковой легкости HSL. Вверху: цвета HSL \((h, 1, \frac{1}{2})_\text{HSL}\ \forall\ h \in [0, 1]\). Внизу: цвета в оттенках серого, полученные за счет сохранения постоянного компонента Y в пространстве XYZ. при удалении всей цветности.

Литература

[BB09b]
Бургер, Вильгельм; Бердж, Марк Дж.: Принципы цифровой обработки изображений: основные методы. Темы бакалавриата по информатике. Springer-Verlag London, 1-е издание, 2009 г.
[ДЖГ78]
Джоблав, Джордж Х; Гринберг, Дональд: Цветовые пространства для компьютера графика.В: Компьютерная графика ACM siggraph. том 12. АКМ, стр. 20–25, 1978 г.
© 2022 Лукас Стратманн | |

что, зачем и как? – Леа Веру

Меня всегда интересовала наука о цвете. В 2014 году я выступал с докладом о CSS Color 4 на различных конференциях по всему миру под названием «Зона цветности» .Еще до этого, в 2009 году, я написал палитру цветов, которая использовала скрытый апплет Java для поддержки цветовых профилей ICC для правильной работы CMYK, впервые в Интернете в то время (насколько мне известно). Я так и не выпустил его, но это вызвало эту гневную тираду.

Color — это также то, как я познакомилась со своим нынешним мужем, Крисом Лилли: на моем первом собрании Рабочей группы CSS в 2012 году он подошел ко мне, чтобы задать вопрос о CSS и греческом языке, и как только он представился, я сказал : «Вы Крис Лилли. , знаток цвета?!? У меня к вам вопросов .Позже я обнаружил, что он сделал еще больше крутых вещей (он был соавтором PNG и запустил SVG 🤯), но в то время я знал о нем только как о «эксперте по цвету W3C», вот насколько сильно я увлекался цветом. был (я получил ответы на свои вопросы о цвете намного позже, в 2015 году, когда мы действительно собрались вместе) .

Мой интерес к науке о цвете возобновился в 2019 году, когда я стал соредактором CSS Color 5, с целью конкретизировать мое предложение по изменению цвета, которое направлено на то, чтобы разрешить произвольную настройку цветовых каналов для создания цветовых вариаций и их комбинирования. с предложением Уны по изменению цвета.Цвета LCH в CSS — это то, чем я очень взволнован, и я твердо верю, что дизайнеры были бы возмущены у нас их еще нет, если бы они знали о них больше.

Что такое ЛЧ?

CSS Color 4 определяет цвета lch(), среди прочего, и с недавнего времени все основные браузеры начали их реализовывать или серьезно рассматривают это:

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

1.

Фактически мы получаем доступ к примерно на 50% большему количеству цветов.

Это огромно. В настоящее время каждый цвет CSS, который мы можем указать, определяется как находящийся в цветовом пространстве sRGB. Несколько лет назад этого было более чем достаточно, поскольку все мониторы, кроме профессиональных, имели охват меньше sRGB. Однако это уже не так. Сегодня гамма (диапазон возможных отображаемых цветов) большинства мониторов ближе к P3, объем которого на 50% больше, чем у sRGB.CSS прямо сейчас вообще не может получить доступ к этим цветам . Позвольте мне повторить: У нас нет доступа к одной трети цветов в большинстве современных мониторов. И это не просто любые цвета, а самых ярких цветов, которые может отображать экран . Наши веб-сайты размыты, потому что аппаратное обеспечение мониторов развивалось быстрее, чем спецификации CSS и реализации браузеров.

Объем гаммы sRGB по сравнению с P3

2. LCH (и Lab) одинаково воспринимается

В LCH одно и то же численное изменение координат приводит к одинаковому воспринимаемому цветовому различию.Это свойство цветового пространства называется «однородностью восприятия». RGB или HSL не являются однородными по восприятию. Очень показательным примером является следующий [источник примера]:

Как цвета в первом ряду, так и цвета во втором ряду отличаются по оттенку всего на 20 градусов. Равна ли разница в восприятии между ними?

3. Легкость LCH на самом деле что-то значит

В HSL легкость не имеет значения. Цвета могут иметь одинаковое значение яркости, но с совершенно разной воспринимаемой яркостью.Мои любимые примеры — желтый и синий. Хотите верьте, хотите нет, но оба имеют одинаковую легкость HSL!

Оба этих цвета имеют яркость 50%, но они, безусловно, не одинаково светлые. Что на самом деле означает легкость HSL?

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

. Оба они имеют одинаковый оттенок и насыщенность, но действительно ли они выглядят как более темные и более светлые варианты одного и того же цвета?

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

Как работает LCH?

LCH расшифровывается как Lightness Chroma Hue. Параметры примерно соответствуют HSL, однако есть несколько важных отличий:

Углы оттенков не полностью соответствуют оттенкам HSL. напр. 0 не красный, а скорее пурпурный, а 180 не бирюзовый, а скорее голубовато-зеленый и точно дополняет друг друга.

Обратите внимание, что эти цвета, хотя и сильно отличающиеся по оттенку, воспринимаются одинаково светло.

В HSL насыщенность составляет 0-100 процентов, так как это простое преобразование RGB в полярные координаты.Однако в LCH Chroma теоретически неограничен . LCH (как и Lab) предназначен для представления всего спектра человеческого зрения, и не все эти цвета могут отображаться на экране, даже на экране P3. Мало того, что максимальная цветность отличается в зависимости от гаммы экрана, она фактически отличается для каждого цвета.

Это может быть лучше понято на примере. Для простоты предположим, что у вас есть экран, цветовая гамма которого точно соответствует цветовому пространству sRGB (для сравнения, экран MacBook Air 2013 года имеет около 60 % sRGB, хотя большинство современных экранов составляют около 150 % sRGB, как обсуждалось выше).Для L=50 H=180 (голубой выше) максимальная цветность составляет всего 35! Для L=50 H=0 (пурпурный выше) цветность может достигать 77, не выходя за границы sRGB. Для L=50 H=320 (фиолетовый выше) он может доходить до 108!

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

Средство выбора цвета LCH

Надеюсь, теперь вы немного взволнованы LCH, но как это визуализировать?

На самом деле я сделал это некоторое время назад, в первую очередь, чтобы помочь мне, Крису, Адаму и Уне в достаточной степени окунуться в LCH, чтобы отредактировать CSS Color 5. Знать теорию — это другое, и уметь играть с ползунками — это другое. и увидеть результат. Я даже купил домен css.land, чтобы в конечном итоге размещать подобные демонстрации. Мы использовали его изрядно, и Крис заставил меня добавить несколько функций, но я никогда не писал об этом, поэтому он был доступен только нам и всем, кто заметил его репозиторий на Github.

Почему бы просто не использовать существующую палитру цветов LCH?

  • Код преобразования для этого написан Крисом, и он был уверен, что математика, по крайней мере, должна быть правильной (т. е. если она неверна, это ошибка в коде, а не пробел в понимании)
  • Цветность не равна 0 -100, как в некоторых палитрах цветов, которые мы нашли
  • Мы хотели разрешить ввод произвольных цветов CSS (кнопка «Импорт…» выше)
  • Мы хотели разрешить ввод десятичных дробей (ползунки работают только с целыми числами, но черные числа позволяют вводить любые число)
  • Я хотел иметь возможность сохранять цвета и видеть, как они интерполируются.
  • Мы хотели видеть, находится ли цвет LCH в пределах sRGB, P3 (или Rec.2020, еще большего цветового пространства).
  • Мы хотели альфу
  • И, наконец, потому что это весело! Тем более, что это реализовано с помощью Mavo (и немного JS, это не чистая демонстрация Mavo HTML).

Недавно Крис разместил это в ветке вопросов whatwg/html, и многие люди обнаружили это, так что это подтолкнуло меня написать об этом, так что вот оно: css.land/lch

Часто задаваемые вопросы

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

«Вы сказали, что эти цвета еще не реализованы, но я вижу их в вашей статье»

Все цвета, показанные в этой статье, находятся в пределах гаммы sRGB именно потому, что мы пока не можем отображать цвета за ее пределами. sRGB — это цветовое пространство, а не синтаксис. Например. rgb(255 0 0) и lch(54,292% 106,839 40,853) задают один и тот же цвет.

«Как средство выбора LCH отображает цвета за пределами sRGB?»

Нет.Как и любой другой в Интернете (насколько мне известно). Палитра цветов реализована с помощью веб-технологий и поэтому страдает от тех же проблем. Он должен уменьшить их масштаб, чтобы отобразить что-то похожее, то есть в пределах sRGB (раньше он просто обрезал компоненты RGB до 0-100%, но благодаря этому PR от Tab теперь использует гораздо более совершенный алгоритм: он просто уменьшает цветность). пока цвет не окажется в пределах sRGB). Вот почему увеличение Chroma не приводит к более яркому цвету после определенной точки: потому что этот цвет не может быть отображен с помощью CSS прямо сейчас.

«Я заметил, что Firefox отображает более яркие цвета, чем Chrome и Safari, это связано?»

Firefox не реализует спецификацию, которая ограничивает цвета CSS до sRGB. Вместо этого он просто выводит на экран необработанные координаты RGB, поэтому, например. rgb(100% 0% 0%) — это самый яркий красный цвет, который может отображать ваш экран. Хотя это может показаться превосходным решением, оно невероятно непоследовательно: указание цвета в лучшем случае является приблизительным, поскольку каждый экран отображает его по-разному.Ограничив цвета CSS известным цветовым пространством (sRGB), мы добились независимости от устройства. LCH и Lab также не зависят от устройства, поскольку они основаны на фактически измеренном цвете.

Как насчет цвета (display-p3 r g b)? Safari поддерживает это с 2017 года!

Меня уведомили об этом после публикации этой статьи. Некоторое время назад я знал, что Safari реализует этот синтаксис, но как-то упустил, что они его выпустили. Фактически, WebKit опубликовал статью об этом синтаксисе в прошлом месяце! Как здорово!

color(colorspaceid params) — это еще один синтаксис, добавленный CSS Color 4, и это швейцарский армейский нож управления цветом в CSS: во всей своей красе он позволяет указать цветовой профиль ICC и цвета из него (например,грамм. Вы хотите настоящие цвета CMYK на веб-странице? Хочешь Пантон? С цветовыми профилями вы тоже можете это сделать!). Он также поддерживает некоторые предопределенные цветовые пространства, одним из которых является display-p3 . Так, например, color(display-p3 0 1 0) дает нам самый яркий зеленый цвет в цветовом пространстве P3. Вы можете использовать этот тестовый пример для проверки поддержки: вы увидите красный цвет, если color() не поддерживается, и ярко-зеленый, если да.

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

Кроме того, это краткосрочное решение. Теперь это работает, потому что экраны, которые могут отображать более широкую гамму, чем P3, встречаются редко. Как только аппаратное обеспечение снова усовершенствуется, цвет (display-p3 ...) будет иметь ту же проблему, что и цвета sRGB сегодня. LCH и Lab не зависят от устройства и могут представлять весь спектр человеческого зрения, поэтому они будут работать независимо от развития аппаратного обеспечения.

Как LCH соотносится с цветовым пространством Lab, известным мне из Photoshop и других приложений?

LCH — это то же самое цветовое пространство, что и Lab, только по-другому! Взгляните на следующую диаграмму, которую я сделал для своих учеников:

.
Цвета hsl: Сравнение RGB и HSL цветов и почему последние лучше

Добавить комментарий

Ваш адрес email не будет опубликован.

Пролистать наверх