Цветосбор: HEX, RGB, HSL — и проверка контрастности

Наш бренд оранжевый #E99537, йо- мне нравится. Он теплый, он не такой оранжевый, как все остальные, и он сидит рядом с нашим синим без боя.

Я использовала его как цвет ссылки на белом в течение нескольких месяцев.

Потом я действительно пробежал цифры. #E99537 во время #FFFFFF дает контрастность 2.38:1, йо- WCAG 2.1 SC 1.4.3 Требуется 4,5:1 для обычного текста. Он даже не очищает планку 3:1 для обширный текст. каждая оранжевая ссылка на этом сайте была, по стандарту, который я утверждал, что заботился, нечитабельной - и она выглядела совершенно нормально для меня, на моем мониторе, в моем офисе, с моими глазами.

Вот в этом дело цвета: ваше восприятие его не является измерением. #E99537 На нашем ВМФ #0F172A десятки 7.50:1, комфортно ААА. Тот же цвет, совершенно другой вердикт, и никакое прищуривание не подскажет. Вы должны вычислить его.

выше палитра На Toolz.dev преобразовывается между HEX, RGB и HSL и показывает вам коэффициент контрастности в браузере без загрузки. Это руководство — то, что я хотел бы прочитать, прежде чем отправить эти ссылки.

TL;DR: обычай гекс Для статических значений, HSL Всякий раз, когда вам нужно производить цвет (наведение состояния, палитры, темный режим), потому что светлость — это число, из которого вы можете вычесть, и RGBA/HSA когда вам нужна альфа. Контраст 4.5:1 для основного текста и 3:1 для большого текста - проверьте его, don't глаз его. палитра делает преобразования и соотношение. Затем возьмите остановки в градиент генератора, йо-

HEX, RGB, HSL: Какая настоящая разница?

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

гекс

Три байта в шестнадцатеричном формате. #4466EE красный 44 (68), зеленый 66 (102), синий EE (238). стенографический #RGB работает только тогда, когда каждая пара удваивается - #FF0000 сваливается в #F00, но #4466EE нельзя укоротить. 8-значная форма добавляет альфа: #4466EE80 составляет примерно 50% непрозрачных.

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

RGB

Те же три канала, десятичные, 0–255. Современный синтаксис CSS Color 4 сбрасывает запятые: rgb(68 102 238 / 80%), йо- RGB — это то, что вам нужно в JavaScript, Canvas и WebGL, потому что это формат, который действительно потребляет все нижестоящее, и вы можете сделать на нем арифметику.

HSL - тот, который зарабатывает свое место

оттенок (0–360° вокруг колеса), насыщенность (0–100%), легкость (0–100%). #4466EE есть hsl(228, 83%, 60%), йо-

Вот почему это важно. Состояние кнопки зависания должно быть «того же цвета, немного темнее». В шестнадцатеричном вопросе это вопрос без ответа. В HSL это вычитание:

.btn {
  background: hsl(228 83% 60%);   /* #4466EE */
}
.btn:hover  { background: hsl(228 83% 52%); }  /* darker  */
.btn:active { background: hsl(228 83% 44%); }  /* darker still */
.btn:disabled { background: hsl(228 22% 70%); } /* desaturated, lifted */

Четыре состояния, один оттенок, нет инструмента дизайна. Это 90% того, почему HSL находится в моем наборе инструментов.

Уловка - и это & #39;s настоящая - заключается в том, что легкость HSL не Перцептивный. hsl(60 100% 50%) (желтый) и hsl(240 100% 50%) (синий) Оба заявляют о 50% легкости, и одна из них сожжет ваши сетчатки, а другая почти черная. Эту проблему решает ОКЛЧ.

ОКЛЧ, кратко

CSS Цветовой уровень 4 приносящий oklch(L C H), где л воспринимаемый легкость. Два цвета с одинаковым L действительно выглядят одинаково яркими. Это правильный инструмент для создания тональной рампы, где каждый шаг кажется равномерно расположенным, и это то, что я бы использовал для новой дизайн-системы сегодня. вот почему linear-gradient(in oklch, blue, yellow) does't поседеет посередине - см CSS градиент генератора, йо-

CMYK

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

Как мне конвертировать между ними?

HEX → RGB — это просто базовое преобразование. #4466EE → разделиться на 44, 66, EE → 68, 102, 238.

RGB → HSL включает в себя нахождение MAX/MIN каналов, получение оттуда легкости из их среднего, затем насыщенность и оттенок. Это пятнадцать строк кода, и я написал эти пятнадцать строк по памяти ровно нулевые раз. Для одноразового, палитра делает это мгновенно. Для кода:

const hexToRgb = (hex) => {
  const n = parseInt(hex.replace('#', ''), 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
};

const rgbToHex = (r, g, b) =>
  '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');

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

const luminance = (hex) => {
  const { r, g, b } = hexToRgb(hex);
  const [R, G, B] = [r, g, b]
    .map(v => v / 255)
    .map(v => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4));
  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
};

const contrast = (a, b) => {
  const [x, y] = [luminance(a), luminance(b)].sort((m, n) => n - m);
  return (x + 0.05) / (y + 0.05);
};

contrast('#E99537', '#FFFFFF'); // 2.38  ← the one that got me
contrast('#E99537', '#0F172A'); // 7.50

Обратите внимание на эти зеленые коэффициенты: 0,2126 красного, 0,7152 зелёного, 0,0722 синего. Зеленый несет примерно Семьдесят процентов воспринимаемой яркости. Вот почему ярко-зеленый и ярко-синий при одинаковой легкости HSL не похожи друг на друга, и вся причина, по которой существуют перцептивные цветовые пространства.

Какие контрасты контраста я должен на самом деле поражать?

Некоторые реальные числа, все вычисляемые, а не угаданные:

Из стола выпадают две вещи.

#767676 Самый легкий серый, который проходит АА на белом. не #888, не #999, йо- Каждый «приглушенный вторичный текст» — это цвет, который я вижу в дикой природе — это оттенок или два. Стоит запоминать.

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

Как построить палитру, которая не борется с собой?

выбрать один оттенок. Варьировать легкость. Вот и весь метод, и HSL делает его механическим:

:root {
  /* One hue: 228. Nine steps of lightness. */
  --blue-50:  hsl(228 83% 96%);
  --blue-100: hsl(228 83% 91%);
  --blue-200: hsl(228 83% 84%);
  --blue-300: hsl(228 83% 76%);
  --blue-400: hsl(228 83% 68%);
  --blue-500: hsl(228 83% 60%);  /* #4466EE — the brand colour */
  --blue-600: hsl(228 83% 50%);
  --blue-700: hsl(228 78% 41%);
  --blue-800: hsl(228 72% 33%);
  --blue-900: hsl(228 66% 25%);
}

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

Затем назовите вещи по роль, не по внешнему виду, поэтому ребрендинг - это однострочное изменение, а не находка и замена сорок файлов:

:root {
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-text: #0F172A;
  --color-text-muted: #6B7280;   /* 4.83:1 on white — checked */
  --color-surface: #F8FAFC;
  --color-border: #E5E7EB;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: var(--blue-400);  /* lift it — dark bg needs a lighter primary */
    --color-text: #F8FAFC;
    --color-text-muted: #9CA3AF;
    --color-surface: #1E293B;
    --color-border: #374151;
  }
}

Темный режим не является инверсией

Не переворачивайте свою палитру. Две вещи ломаются сразу:

1. Насыщенные цвета становятся громче на темном фоне. Яркая синяя, которая читается как «профессионал» на белых, читается как «вибрация» на почти черном. Поднимите легкость, немного падайте насыщенность.
2. Чистый черный фон вызывает орецеп- яркий текст включен #000 Мазки для людей с астигматизмом. Используйте очень темно-серо-голубой (#0F172A, #111827) вместо этого. Это также дает вам куда-то пойти на приподнятые поверхности, которые чистый черный не носит.

Гармонические схемы, честно

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

Что еще сбивает людей с толку?

Одного цвета никогда не бывает достаточно

Примерно у 1 из 12 мужчин и 1 из 200 женщин наблюдается дефицит цветового зрения. Если красный означает-ошибка и зеленый-значит-успех только Сигнал, значимый кусочек ваших пользователей видит два одинаковых серых значка. Добавить значок, добавить слово. WCAG 1.4.1 ясно об этом, и это стоит вам один <span>, йо-

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

Кольца фокусировки тоже нуждаются в контрасте

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

Дизайн в сером цвете в первую очередь

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

Использование палитры цветов

1. откройте палитра, йо-
2. Перетащите спектр или вставьте известное значение в поле HEX, RGB или HSL - остальные обновляются пошагово.
3. Обратите внимание на HSL. Это ваш рабочий формат.
4. Создайте рампу, удерживая H и S и ступая L.
5. Проверяйте каждую пару текста/фона на строке 4,5:1 перед Он попадает в таблицу стилей, а не после того, как клиент напишет вам об этом по электронной почте.

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

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

Какая разница между HEX и RGB?

Ничего, семантически - они кодируют те же три канала sRGB. HEX записывает их в базе 16 (#4466EE), RGB в десятичном (Десятичном)rgb(68 102 238)). HEX более компактен и является соглашением CSS, RGB легче вычислять в JavaScript. Выбирайте в контексте, а не по принципу.

Какой цветовой формат я должен использовать в CSS?

Шестнадцатеричная для статических значений, которые вы просто транскрибируете. HSL в любое время, когда вам нужно производить цвет - состояния зависания, состояния отключения, тональный пандус, вариант темного режима - потому что светлость - это число, которое вы можете настроить. HSLA или RGBA, когда вам нужна альфа. OKLCH, если вы ' создаете новую систему дизайна и хотите четных шагов.

Как узнать, доступны ли мои цвета?

Вычислить коэффициент контрастности. WCAG 2.1 AA нужно 4.5:1 для обычного текста, 3:1 для большого текста (18pt, или 14pt жирный шрифт) и для компонентов пользовательского интерфейса.Не судите глазом - #E99537 На белом хорошо выглядит и набирает 2,38:1. Также проверьте, чтобы никакая информация не передалась только цветом.

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

#767676, который приземляется в 4.54:1 - едва над линией ПВО 4.5:1. #999999 только 2,85:1 и не работает. Если вы хотите ААА, #595959 Хит ровно 7.00:1.

Почему легкость HSL не соответствует воспринимаемой яркости?

Потому что HSL - это простое математическое преобразование RGB, а не модель человеческого зрения. Глаз гораздо более чувствителен к зеленому цвету, чем к синему - формула яркости WCAG весит зеленый цвет 0,7152 и синий 0,0722 - так что hsl(60 100% 50%) (желтый) и hsl(240 100% 50%) (синий) Ничто не похоже на то, что оба претендуют на 50% легкость. OKLCH существует специально для исправления этого.

Как построить темную палитру моды?

Не переворачивайте свет. Создайте вторую палитру: темный серо-синий фон, а не чистый черный (чистый черный, вызывает оздоровление для читателей с астигматизмом), более светлые и менее насыщенные версии ваших акцентов и текст, который не совсем белый, а не совсем белый #FFFFFF, йо- Поменяйте их с помощью пользовательских свойств CSS в разделе prefers-color-scheme: dark, йо-

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

Есть 't один. доказательство для "orange конвертирует best" является тонким и в основном фольклор. важно то, что CTA контрастирует со всем вокруг и что один и тот же цвет означает одно и то же везде на сайте. если ваша страница в основном синяя, работает оранжевый CTA - из-за контраста, а не оранжевый.

Могу ли я использовать цвета CMYK в Интернете?

Нет - CSS не имеет обозначений CMYK, а гаммы don't отображаются чисто, поэтому любое преобразование является приближением. если вам нужна согласованность бренда на печати и экране, определите оба значения в руководстве по бренду с самого начала, а не преобразуйте одно в другое.

Как преобразовать шестнадцатеричный цвет в RGB?

Разделите шестизначный гекс на три пары и прочитайте каждую пару как число 16 от 0 до 255. #4466EE становиться rgb(68, 102, 238): 44 68, 66 - 102, а 238 - 238. трехзначная сокращенная, такая как #46E Расширяется сначала, удвоив каждую цифру. Цветосборка делает это преобразование мгновенно, в обоих направлениях.

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

Шестигранный цветовой код представляет собой шестизначное, базовое представление 16 цвета sRGB, в каждой из которых используется две цифры для красного, зеленого и синего каналов после начального #, йо- #FFFFFF Белый и #000000 является черным. Необязательный седьмая и восьмая цифры добавляют альфа-канал (непрозрачность), как в #4466EE80, йо-

завершение

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

Арифметика не сложная. это просто то, что вы должны вести себя, и я несколько месяцев не делал на своем собственном сайте в цвете, который я выбрал сам.

выше палитра Преобразует между HEX, RGB и HSL и дает вам коэффициент контрастности, который бесплатно и полностью в вашем браузере. Соедините его с градиент генератора Для смесей, которые держат контрастный оттенок, а остальную часть полки в Руководство по инструментам повышения производительности разработчика, йо-