Произвольный оттенок для цветового выбора

Онлайн-генератор случайного цвета мгновенно формирует произвольный оттенок для цветового выбора без необходимости ручной настройки каналов или перемещения ползунков в графическом редакторе. Инструмент не требует ввода начальных параметров со стороны пользователя. При запуске операции алгоритм самостоятельно вычисляет независимые координаты в стандартном цветовом пространстве и сразу выводит готовый визуальный образец вместе с его точными цифровыми кодами: HEX, RGB и HSL. Такой подход решает задачу быстрого поиска опорного тона на старте работы над проектом.

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

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

• Графический и веб-дизайн: поиск базового, акцентного или фонового тона для иллюстраций, рекламных макетов, фирменного стиля и посадочных страниц.
• Проектирование пользовательских интерфейсов (UI/UX): подбор цветовых решений для интерактивных компонентов, кнопок, карточек, статусных индикаторов и системных уведомлений.
• Веб-разработка: быстрое получение валидных цветовых значений для прямой вставки в таблицы стилей CSS при верстке макетов, тестировании тем оформления или создании прототипов.
• Визуализация данных: назначение различимых цветов для отдельных категорий на графиках, диаграммах, тепловых картах и аналитических панелях, а также автоматическая генерация уникальных фонов для пользовательских аватаров и тегов.

Использование готового случайного значения ускоряет переход от пустого макета к конкретной цветовой схеме. Достаточно зафиксировать подходящий результат генерации и использовать его код в рабочей среде.

Математический принцип генерации случайного цвета в цифровом пространстве

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

Стандартное 24-битное цветовое пространство формирует изображение за счет смешения трех базовых каналов: красного, зеленого и синего. На каждый из этих каналов выделяется ровно 8 бит памяти, что в двоичной системе исчисления дает 2 ⁸ , то есть 256 возможных состояний.

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

256 × 256 × 256 = 16 777 216

Итоговое число 16 777 216 определяет предел уникальных оттенков, доступных в рамках 24-битной глубины цвета. С математической точки зрения задача генерации случайного цвета сводится к выбору одной конкретной комбинации из этого массива.

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

Алгоритмический выбор координат с помощью PRNG

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

Для получения одного произвольного цвета алгоритм не перебирает всю базу из 16 777 216 оттенков, а последовательно и независимо генерирует три числовые координаты. Процесс формирования итогового значения проходит в несколько вычислительных шагов:

• Инициализация начального состояния на основе меняющегося стартового значения, в роли которого обычно выступает текущее системное время с точностью до миллисекунд или криптографический источник энтропии.
• Вычисление псевдослучайного дробного числа с плавающей точкой в нормализованном полуинтервале от 0 (включительно) до 1 (не включая единицу).
• Масштабирование полученной дроби путем умножения на 256 и округление результата до ближайшего меньшего целого числа (математическая функция взятия целой части), что гарантирует строгое попадание в диапазон от 0 до 255.
• Повторение операции независимо для красного, зеленого и синего каналов с последующим объединением трех полученных чисел в единый цветовой вектор.

При использовании равномерного распределения каждое из 256 значений внутри отдельного канала имеет одинаковую вероятность выпадения, равную 1/256 (около 0,39%). Так как выбор всех трех координат происходит независимо, вероятность получения любого конкретного оттенка при единичной генерации составляет 1 к 16 777 216.

Равномерность математического распределения влияет на визуальное восприятие результата. В трехмерном кубе координат чистые спектральные цвета или строго нейтральные серые тона (где значения всех трех каналов должны точно совпасть, например, 128, 128, 128) занимают лишь малую долю от общего объема комбинаций. Таких полностью ахроматических оттенков всего 256 из 16,7 миллиона. Подавляющее большинство комбинаций приходится на сложные смешанные тона с разной степенью интенсивности каналов, поэтому при честной математической рандомизации чаще всего выпадают составные, нестандартные оттенки.

Форматы представления цветовых кодов: HEX, RGB и HSL

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

Аддитивная модель RGB

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

Значение 0 означает полное отсутствие свечения в соответствующем канале, а 255 - максимальную интенсивность. В синтаксисе эта запись оформляется в виде функциональной нотации rgb(R, G, B) , где через запятую указываются числовые координаты каждого канала. Если все три параметра равны нулю - rgb(0, 0, 0) , получается абсолютно черный цвет. При максимальном значении всех трех составляющих - rgb(255, 255, 255) - световые потоки складываются в чистый белый цвет.

Шестнадцатеричный код HEX

Формат HEX представляет собой компактную шестнадцатеричную запись значений модели RGB. Код начинается со специального символа решетки и состоит из шести буквенно-цифровых символов по шаблону #RRGGBB . Каждая пара знаков последовательно кодирует интенсивность красного ( RR ), зеленого ( GG ) и синего ( BB ) каналов.

Для формирования HEX-кода десятичное значение каждого канала (от 0 до 255) переводится в шестнадцатеричную систему счисления с основанием 16. В этой системе для записи чисел используются арабские цифры от 0 до 9 и латинские буквы от A до F, где A соответствует десятичному числу 10, B - 11, C - 12, D - 13, E - 14, а F - 15. Минимальное значение канала (0 в десятичной системе) записывается как 00 , а максимальное (255) - как FF .

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

• Деление исходного десятичного числа (например, 58) на 16 нацело. Целая часть частного (58 ÷ 16 = 3) дает первый символ шестнадцатеричной пары ( 3 ).
• Вычисление остатка от деления (58 − (3 × 16) = 10). Полученное число переводится в шестнадцатеричный символ (10 соответствует букве A ), который становится вторым знаком в паре.
• Объединение двух полученных символов в единый двухзначный блок ( 3A ). Если исходное десятичное число меньше 16, на первое место всегда ставится ведущий ноль (например, число 12 записывается как 0C ).

Цилиндрическая система координат HSL

В отличие от аппаратно-ориентированных форматов RGB и HEX, модель HSL описывает цвет в цилиндрической системе координат через интуитивно понятные человеку характеристики. Запись имеет вид hsl(H, S%, L%) и включает три независимых параметра:

• Цветовой тон (Hue) - определяет положение базового спектрального оттенка на цветовом круге и измеряется в угловых градусах от 0° до 360°. Отсчет начинается с красного цвета (0°), проходит через зеленый (120°) и синий (240°), после чего цикл замыкается обратно на красном (360°).
• Насыщенность (Saturation) - отражает чистоту и интенсивность тона, измеряется в процентах от 0% до 100%. При значении 0% любой цветовой тон полностью теряет пигмент и превращается в оттенок серого, а при 100% цвет имеет максимальную спектральную чистоту.
• Светлота (Lightness) - задает уровень яркости оттенка в процентах от 0% до 100%. Значение 0% всегда дает абсолютно черный цвет независимо от выбранного тона и насыщенности, 100% - чистый белый цвет, а эталонное проявление чистого оттенка достигается ровно посередине шкалы на отметке 50%.

Сравнение и эквивалентная запись одного оттенка

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

Понимание взаимосвязи между этими форматами упрощает работу с полученным результатом. Шестнадцатеричный код #3A86D2 удобен для быстрого копирования в буфер обмена в виде единой строки, вектор rgb(58, 134, 210) необходим там, где требуется поканальная математическая обработка цвета или программная подстановка прозрачности, а запись hsl(210, 65%, 53%) позволяет сразу оценить визуальные свойства оттенка по его числовым координатам.

Визуальные характеристики произвольного оттенка и колориметрия

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

Три базовых измерения цвета в колористике

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

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

Категоризация оттенков по соотношению каналов

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

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

В условиях полной рандомизации строго ахроматические цвета выпадают крайне редко, так как совпадение всех трех координат (например, #A4A4A4 ) дает всего 256 комбинаций из 16 777 216 возможных. Однако околосерые оттенки с минимальным расхождением каналов в 2-5 единиц генерируются регулярно и визуально почти не отличаются от чистой шкалы серого.

Цветовая температура: деление спектра на теплые и холодные тона

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

К теплой гамме относятся цвета, расположенные в секторе от 0° до 90° и на замыкающем участке от 330° до 360°. Это красные, оранжевые, коралловые, янтарные, желтые и желто-зеленые тона. В пространстве RGB такие оттенки всегда характеризуются доминированием красного канала либо одновременной высокой активностью красного и зеленого каналов при подавленном синем. Визуально теплые цвета воспринимаются как выступающие вперед, активные и динамичные.

Холодная часть спектра охватывает диапазон углов примерно от 150° до 270°. Сюда входят изумрудные, бирюзовые, голубые, лазурные, синие и индиговые оттенки. На уровне аппаратных каналов их объединяет преобладание синей и зеленой составляющих над красной. В зрительном восприятии холодные тона создают ощущение глубины, пространственного отдаления и визуального спокойствия.

Пограничные зоны спектра - чистые зеленые оттенки (около 90°-150°) и фиолетово-пурпурные тона (270°-330°) - считаются нейтрально-переходными. Их температурное восприятие напрямую зависит от микробаланса соседних каналов: если в зеленом цвете значение желтого подтона (красный плюс зеленый) превышает долю синего, он считывается как теплый травяной оттенок, а при смещении баланса в сторону синего канала превращается в холодный мятный или хвойный тон.

Построение цветовых схем на основе базового случайного цвета

Один сгенерированный произвольный оттенок редко используется в проектах изолированно. В теории цвета полученное значение принимается за опорную точку (базовый цвет), вокруг которой вручную или алгоритмически выстраивается сбалансированная палитра. Для расчета сочетаемых тонов удобнее всего оперировать координатой цветового тона в модели HSL, поскольку выбор гармоничных пар и троек подчиняется строгим геометрическим правилам вращения по замкнутому кругу в 360°.

Геометрические принципы гармонизации на цветовом круге

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

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

• Комплементарная комбинация. Строится на максимальном цветовом контрасте двух противоположных точек спектра. Второй цвет находится строго напротив базового со сдвигом на 180° по формуле (H + 180°) mod 360° . Такое сочетание объединяет теплый и холодный полюса (например, синий с углом 210° и оранжевый с углом 30°), создавая высокую визуальную динамику.
• Триадная схема. В цветовой круг вписывается равносторонний треугольник, вершины которого указывают на три равноудаленных цвета с шагом ровно 120°: H , H + 120° и H + 240° . Триада сохраняет выразительный контраст, но выглядит более сбалансированной и разнообразной, чем жесткая комплементарная пара.
• Аналогичная схема. Включает от двух до четырех соседних оттенков, расположенных по обе стороны от опорного цвета с шагом в пределах 30°-60° (например, H - 30° , H и H + 30° ). Поскольку все элементы находятся в одном температурном секторе и имеют общие первичные каналы, такая гамма воспринимается спокойно и естественно, без резких границ.
• Расщепленно-комплементарная схема. Представляет собой усложненную вариацию противоположного сочетания, где вместо прямого антагониста (180°) берутся два соседних с ним тона со сдвигом по 30° в каждую сторону. Итоговая тройка имеет координаты H , H + 150° и H + 210° . Эта модель сохраняет сильный цветовой контраст, но избавляет композицию от чрезмерного зрительного напряжения.
• Тетрадная схема. Образуется путем вписывания в спектр прямоугольника или квадрата и объединяет четыре оттенка, которые представляют собой две комплементарные пары. В квадратной тетраде цвета распределяются равномерно через каждые 90° ( H , H + 90° , H + 180° , H + 270° ), а в прямоугольной - со смещением второй пары на 60° ( H , H + 60° , H + 180° , H + 240° ).

В таблице ниже приведен пример математического расчета углов тона для всех перечисленных гармонических схем, если в результате генерации выпал базовый оттенок с координатой H = 40° (теплый янтарный цвет):

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

Формирование монохромной гаммы через Tint и Shade

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

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

• Получение светлых вариаций (Tint). Представляет собой процесс высветления базового оттенка путем добавления к нему чистого белого цвета. В системе HSL это соответствует плавному увеличению параметра светлоты по направлению к 100%, а в модели RGB - пропорциональному подтягиванию значений всех трех каналов вверх к отметке 255. Высветленные тона теряют резкость и подходят для создания легких фоновых заливок и второстепенных подложек.
• Получение темных вариаций (Shade). Основано на затемнении опорного цвета за счет примешивания черного. Технически операция выполняется путем снижения показателя светлоты к 0% или пропорционального уменьшения чисел в каналах RGB вплоть до нуля. Такие глубокие, плотные оттенки сохраняют узнаваемость исходного тона, но обретают достаточный вес для отрисовки темных тем, четких границ, теней и контрастных текстовых блоков.

Грамотная комбинация нескольких градаций Tint и Shade вокруг одного случайно выпавшего оттенка дает готовую растяжку из 5-10 тональных ступеней. Такая шкала полностью закрывает потребность в цветовой иерархии без риска нарушить гармоническую сочетаемость элементов, так как все они имеют единую спектральную природу.

Применение случайного оттенка в дизайне и разработке интерфейсов

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

Проектирование UI/UX и сборка компонентов UI Kit

В дизайне интерфейсов и веб-страниц распределение цветовых масс строится на классическом правиле пропорций 60-30-10. Этот принцип помогает сбалансировать визуальную нагрузку и определить точную роль для выбранного оттенка на экране:

• Доминирующий цвет занимает 60% площади макета. На эту роль назначаются нейтральные, сильно высветленные или глубокие приглушенные тона. Они формируют общее пространство: основные фоновые подложки страниц, рабочие области и крупные контейнеры.
• Вторичный цвет охватывает 30% пространства. Он поддерживает базовый тон и выделяет структурные блоки интерфейса: карточки товаров, боковые панели навигации, шапки таблиц и модальные окна.
• Акцентный цвет составляет 10% от общей композиции. Сюда направляются чистые, насыщенные и яркие случайные цвета. Их задача - управлять вниманием пользователя и указывать на точки взаимодействия: целевые кнопки, активные переключатели, индикаторы уведомлений и важные ссылки.

При переносе утвержденного оттенка в системный UI Kit его код привязывается к конкретным графическим свойствам отдельных атомарных элементов. В векторных графических редакторах цвет назначается для сплошной внутренней заливки или для контурной обводки. Сплошная заливка применяется к кнопкам первого уровня, плашкам статусов и иконкам. Отрисовка через обводку толщиной в 1-2 пикселя без внутренней заливки или в паре с полупрозрачным фоном востребована при создании полей ввода, карточек, разделительных линий и второстепенных кнопок.

Интеграция цветовых кодов в веб-разработку и таблицы стилей CSS

На этапе верстки выбранный оттенок переносится в таблицы стилей CSS в виде кодов HEX, RGB или HSL. Чтобы избежать дублирования кода и упростить поддержку цветовой схемы, базовые значения объявляются на уровне корневого псевдокласса через пользовательские CSS-переменные. Это дает возможность управлять оформлением всего интерфейса из одной точки файла стилей:

:root {
  --primary-random-color: #3B82F6;
  --surface-fill: rgb(239, 246, 255);
  --element-stroke: hsl(217, 91%, 60%);
}

.ui-card {
  background-color: var(--surface-fill);
  border: 1px solid var(--element-stroke);
}

.ui-card-title {
  color: var(--primary-random-color);
}

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

Графический дизайн и визуализация данных

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

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

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

• Аватары пользователей по умолчанию. Если профиль в мессенджере, корпоративной системе или сервисе комментариев не содержит загруженной фотографии, поверх круглой или квадратной плашки выводятся инициалы человека. Случайный фоновый цвет такой заглушки помогает мгновенно различать участников дискуссии в общем потоке сообщений.
• Системы тегов и категорийных меток. В таск-трекерах, блогах и электронных таблицах цветные маркеры разделяют задачи по отделам, проектам или тематикам, ускоряя визуальный поиск нужной карточки на доске.
• Уникальные маркеры на картах и схемах. При отображении нескольких маршрутов, зон доставки или групп объектов на одной схеме произвольное окрашивание пинов предотвращает слияние соседних точек в единое пятно.

Оценка контрастности и визуальной доступности выбранного цвета

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

Относительная яркость и коэффициент контрастности по стандарту WCAG

Восприятие светлоты оттенка человеческим зрением неравномерно и зависит от длины световой волны. Два разных цвета с одинаковым параметром светлоты в цилиндрических координатах не выглядят одинаково светлыми: чистый желтый воспринимается значительно ярче чистого синего. Для точной количественной оценки в стандартах веб-доступности WCAG 2.0 и WCAG 2.1 применяется показатель относительной яркости (relative luminance).

Относительная яркость представляет собой нормализованное значение светового потока в диапазоне от 0 для абсолютно черного цвета до 1 для эталонного белого. При расчете этого параметра к линеаризованным значениям трех цветовых каналов применяются весовые коэффициенты: наибольший вклад в итоговую яркость вносит зеленый спектр (коэффициент 0.7152), средний - красный (0.2126), а минимальный - синий (0.0722).

На основе вычисленных значений яркости двух соприкасающихся оттенков определяется коэффициент контрастности. Расчет выполняется по формуле:

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

В этом выражении L1 - относительная яркость более светлого оттенка из проверяемой пары, а L2 - относительная яркость более темного. Прибавление константы 0.05 компенсирует фоновую засветку экрана и предотвращает деление на ноль при участии чистого черного цвета. Полученный результат записывается в виде пропорции и варьируется от 1:1 (полное совпадение цветов, нулевая различимость) до 21:1 (максимальный контраст черного и белого).

Нормативные пороговые значения контраста

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

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

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

Выбор читаемого цвета текста поверх произвольного фона

При динамическом окрашивании тегов, карточек или пользовательских заглушек возникает практическая задача: определить, какой цвет текста - белый (#FFFFFF) или черный (#000000) - обеспечит лучшую читаемость на сгенерированном фоне. Опора только на показатель светлоты в 50% часто приводит к ошибкам на насыщенных зеленых, желтых и голубых оттенках.

Математически точное решение задачи сводится к сравнению относительной яркости фонового цвета (L) с пороговым значением, при котором контраст с черным и белым текстом становится равным. Уравнение баланса контрастов выглядит следующим образом:

(1 + 0.05) / (L + 0.05) = (L + 0.05) / (0 + 0.05)

Решение этого уравнения дает граничную точку относительной яркости, равную приблизительно 0.179. В этой точке и белый, и черный текст дают коэффициент контрастности около 4.58:1, что преодолевает минимальный барьер уровня AA. Из этого вытекают два строгих правила выбора текстовой пары для любого произвольного фона:

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

Учет нарушений цветового зрения при формировании цветовых пар

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

При проверке сгенерированных цветовых сочетаний оцениваются риски для трех основных типов нарушений цветовосприятия:

• Протанопия. Отсутствие чувствительности к красному участку спектра. Красные оттенки воспринимаются значительно более темными, чем они есть на самом деле, и легко смешиваются с темно-зелеными, коричневыми и темно-серыми тонами. Размещение черного текста на случайном насыщенном красном фоне при протанопии приводит к полной потере читаемости.
• Дейтеранопия. Сниженная чувствительность к зеленому спектру. Пользователи с этой особенностью не различают зеленые и красные оттенки одинаковой светлоты, а также путают фиолетовые тона с синими, а светло-зеленые - с желтыми и оранжевыми.
• Тританопия. Нарушение восприятия сине-фиолетовой части спектра. Синие оттенки кажутся зеленоватыми, а желтые воспринимаются как бледно-розовые или серые, из-за чего пропадает визуальная разница между парами «синий - зеленый» и «желтый - фиолетовый».

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