Главная / Генераторы / Генератор RGB-цвета
Цвета и значения

Цветовое значение RGB случайного оттенка

Сгенерируйте случайный цвет и получите его значения RGB.

Три канала
случайного цвета

Быстрая генерация случайного оттенка с показом красного, зелёного и синего значений.

RGB
Каналы
Оттенок

Случайный RGB-оттенок

Получите случайный цвет и отдельные значения красного, зелёного и синего каналов.

Результат
—
После генерации здесь появится цвет и значения RGB.

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

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

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

Генератор RGB-цвета

Устройство цветовой модели RGB и структура каналов

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

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

Параметры 24-битного кодирования и ёмкость палитры

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

  • На кодирование каждого из трёх каналов выделяется 1 байт, что равняется 8 битам данных.
  • В двоичной системе счисления 8 бит позволяют записать 2 8 , то есть ровно 256 уникальных состояний.
  • При переводе из двоичного кода в десятичный эти 256 шагов образуют непрерывный целочисленный диапазон от 0 до 255 включительно, где 0 соответствует выключенному состоянию субпикселя, а 255 - пиковой интенсивности его свечения.

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

Параметр структуры Значение на один канал Суммарный показатель модели
Информационный объём в битах 8 бит 24 бита (8 + 8 + 8)
Информационный объём в байтах 1 байт 3 байта
Десятичный диапазон интенсивности Целые числа от 0 до 255 Тройка координат (R, G, B)
Количество возможных состояний 256 вариантов (2 8 ) 16 777 216 комбинаций

Математический расчёт полного цветового охвата стандартной 24-битной глубины выглядит следующим образом: 256 × 256 × 256 = 16 777 216. Такого объёма (около 16,7 миллиона уникальных цветовых комбинаций) достаточно для передачи плавных тональных переходов без видимых ступенчатых искажений, поскольку человеческое зрение не способно различить разницу между двумя соседними единицами интенсивности одного канала.

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

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

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

  • Генерация координаты R: случайный выбор одного целого числа из 256 возможных градаций красного спектра.
  • Генерация координаты G: независимое вычисление целочисленного показателя в диапазоне 0-255 для зелёного канала.
  • Генерация координаты B: отдельное определение случайного целого числа от 0 до 255 для синего компонента.

При равномерном распределении каждое число от 0 до 255 имеет одинаковый шанс выпадения, равный 1/256 (приблизительно 0,39%). За счёт независимости трёх операций любая комбинация координат (R, G, B) из всей палитры также является равновероятной.

Математическое преобразование на примере JavaScript

В программной среде базовые генераторы псевдослучайных чисел обычно возвращают дробное значение с плавающей точкой, которое затем масштабируется до нужного целочисленного диапазона. В качестве технического примера стандартной логики такого вычисления можно рассмотреть связку встроенных методов языка JavaScript: Math.random() и Math.floor() .

Базовый метод Math.random() генерирует псевдослучайное дробное число в полуинтервале от 0 (включительно) до 1 (не включая саму единицу), например 0.738421 . Чтобы перевести эту дробь в цветовую координату от 0 до 255, число умножают на 256 и округляют вниз до ближайшего целого с помощью функции Math.floor() .

const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);

Умножение именно на 256, а не на 255, обусловлено правилами округления вниз. Так как метод Math.random() никогда не возвращает строгую единицу, его максимальный результат стремится к значению 0.999999... . При умножении такой дроби на 256 получается число, немного меньшее 256 (например, 255.999 ), которое после отбрасывания дробной части через Math.floor() превращается ровно в 255. Если бы в формуле использовался множитель 255, верхняя граница производила бы значение около 254.999 , и после округления вниз максимальное число 255 никогда бы не выпадало.

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

Цветовой канал Исходное значение Math.random() Результат умножения на 256 Итоговое целое число через Math.floor()
R (красный) 0.18359375 47.0 47
G (зелёный) 0.814453125 208.5 208
B (синий) 0.558203125 142.9 142

Формирование итогового оттенка и поканальное представление

После выполнения трёх вычислений полученные числа фиксируются в двух взаимосвязанных видах: как единое цветовое значение RGB и как три отдельных показателя по каждому каналу. В разобранном выше примере вычисленные числа 47, 208 и 142 образуют общую цветовую координату rgb(47, 208, 142) , которая определяет конкретный мятно-зелёный оттенок.

Раздельное представление тех же чисел (R: 47, G: 208, B: 142) сохраняет доступ к каждому компоненту по отдельности. Это избавляет от необходимости вручную разбирать общую строку на части, когда требуется подставить числовые значения каналов в разные поля ввода или проанализировать баланс конкретного спектра в полученном случайном цвете.

Интерпретация значений красного, зелёного и синего каналов

Отдельные числовые показатели каналов R, G и B позволяют оценить визуальные свойства полученного случайного оттенка ещё до его применения в макете или коде. Каждое из трёх чисел показывает, сколько света соответствующего спектра присутствует в итоговой смеси. Соотношение между этими тремя величинами определяет цветовой тон, уровень светлоты, насыщенность и принадлежность к тёплой или холодной гамме.

Крайние точки, чистые базовые и вторичные цвета

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

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

Канал R Канал G Канал B Единая запись RGB Характеристика оттенка
0 0 0 rgb(0, 0, 0) Абсолютно чёрный цвет (отсутствие свечения всех каналов)
255 255 255 rgb(255, 255, 255) Чистый белый цвет (максимальное свечение всех каналов)
255 0 0 rgb(255, 0, 0) Чистый базовый красный цвет
0 255 0 rgb(0, 255, 0) Чистый базовый зелёный цвет
0 0 255 rgb(0, 0, 255) Чистый базовый синий цвет
255 255 0 rgb(255, 255, 0) Вторичный жёлтый цвет (смешение красного и зелёного)
0 255 255 rgb(0, 255, 255) Вторичный голубой цвет, циан (смешение зелёного и синего)
255 0 255 rgb(255, 0, 255) Вторичный пурпурный цвет, маджента (смешение красного и синего)

Нейтральная шкала и баланс серого

Равенство всех трёх чисел ( R = G = B ) полностью гасит цветовую окраску и формирует ахроматический нейтральный оттенок. В такой ситуации ни один спектр не перетягивает баланс на себя, и глаз воспринимает результат как серый цвет различной степени светлоты. Например, комбинация rgb(60, 60, 60) даёт тёмно-угольный тон, rgb(128, 128, 128) соответствует нейтральному средне-серому, а rgb(220, 220, 220) выглядит как светло-серебристый.

При случайной генерации точное совпадение всех трёх каналов выпадает редко, однако близкие друг к другу значения (например, R: 140, G: 145, B: 138) действуют по тому же принципу. Минимальная разница между каналами означает, что оттенок будет сильно приглушённым, близким к серому, с едва заметным присутствием того спектра, число которого немного выше остальных.

Определение светлоты, насыщенности и цветовой температуры

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

Основные закономерности распределения чисел по каналам сводятся к четырём визуальным группам:

  • Высокие и близкие друг к другу значения (все три числа выше 180-200 с небольшим разбросом, например R: 242, G: 215, B: 230) формируют светлые и пастельные тона. Обилие света во всех трёх каналах «разбеливает» оттенок, делая его мягким и неконтрастным.
  • Низкие значения по всем каналам (все показатели ниже 60-70, например R: 25, G: 58, B: 45) дают глубокие тёмные оттенки. Доминирующий канал задаёт основной тон (в данном примере - тёмно-хвойный зелёный), но из-за слабой общей интенсивности цвет остаётся приближенным к чёрному.
  • Резкий перепад между каналами (один или два показателя близки к 255, а оставшийся близок к 0, например R: 18, G: 248, B: 95) создаёт яркие, чистые и неоновые цвета. Отсутствие третьего компонента не даёт оттенку уйти в серый или белый, сохраняя максимальную спектральную чистоту.
  • Преобладание каналов R или B управляет цветовой температурой. Высокие показатели R при умеренном G и низком B смещают случайный оттенок в тёплую гамму (красные, коралловые, оранжевые, песочные, терракотовые тона). Доминирование канала B (или связки B и G при низком R) уводит цвет в холодный спектр - к синим, ледяным, бирюзовым и фиолетовым оттенкам.

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

Математическая связь RGB с форматами HEX, RGBA и HSL

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

Перевод десятичных каналов в HEX-код

Шестнадцатеричный код цвета представляет собой компактную запись тех же трёх каналов R, G и B, переведённых из десятичной системы счисления (база 10) в шестнадцатеричную (база 16, где значения от 10 до 15 обозначаются латинскими буквами от A до F). В стандартах вёрстки такая конструкция называется шестнадцатеричным триплетом (hexadecimal triplet) и записывается после символа решётки в формате #RRGGBB .

Для ручного перевода каждого отдельного канала его десятичное значение в диапазоне от 0 до 255 делится нацело на 16:

  • Целая часть от деления определяет первый (старший) символ пары.
  • Остаток от деления определяет второй (младший) символ пары.
  • Если исходное десятичное число канала меньше 16, старший разряд обязательно заполняется ведущим нулём (например, число 12 переводится как 0C , а не C ), чтобы сохранить строгую шестизначную структуру кода.

Приведем пошаговый расчёт шестнадцатеричного триплета для случайного оттенка с показателями R: 45, G: 180, B: 12:

Канал Десятичное значение Деление на 16 (целое и остаток) Перевод разрядов в базу 16 Итоговая пара
Красный (R) 45 45 / 16 = 2 (остаток 13) 2 → 2, 13 → D 2D
Зелёный (G) 180 180 / 16 = 11 (остаток 4) 11 → B, 4 → 4 B4
Синий (B) 12 12 / 16 = 0 (остаток 12) 0 → 0, 12 → C 0C

Склеивание трёх полученных пар в строгом порядке следования каналов даёт итоговый код #2DB40C . В программном коде на JavaScript такое преобразование для каждого отдельного числа выполняется вызовом метода toString(16) с добавлением ведущего нуля через метод padStart(2, '0') :

function channelToHex(channelValue) {
  return channelValue.toString(16).padStart(2, '0').toUpperCase();
}

// Пример для R: 45, G: 180, B: 12
const hexColor = '#' + channelToHex(45) + channelToHex(180) + channelToHex(12);
// Результат: "#2DB40C"

В случаях, когда в каждой из трёх полученных пар символы дублируют друг друга (например, при десятичных значениях R: 255, G: 102, B: 0, которые дают код #FF6600 ), запись сокращается до трёх символов - #F60 .

Подстановка значений в функциональную нотацию RGBA

Классическая трёхканальная модель описывает исключительно плотный, полностью непрозрачный цвет. Для управления степенью прозрачности элемента используется расширенная функциональная нотация rgba(R, G, B, A) , где четвёртым параметром выступает альфа-канал (Alpha).

Переход к формату RGBA не требует математического пересчёта самих цветовых компонентов. Три полученных числа R, G и B переносятся в скобки функции в неизменном виде, а через запятую дописывается коэффициент непрозрачности в диапазоне от 0 до 1 (или в процентах от 0% до 100% ):

  • Значение 0 делает оттенок полностью прозрачным (невидимым), независимо от интенсивности цветовых каналов.
  • Дробные промежуточные значения (например, 0.25 , 0.5 или 0.85 ) создают эффект тонированного стекла, пропуская часть фонового изображения сквозь выбранный оттенок.
  • Значение 1 соответствует абсолютно плотному цвету, визуально идентичному базовой записи без альфа-канала.

Например, при подстановке сгенерированных каналов R: 45, G: 180, B: 12 с заданием 60% непрозрачности запись принимает вид rgba(45, 180, 12, 0.6) . В современных спецификациях CSS4 допускается использование единой функции rgb() с разделением каналов пробелами и указанием альфа-канала через косую черту: rgb(45 180 12 / 60%) .

Концептуальное отличие поканальной модели RGB от координат HSL и HSV/HSB

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

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

  • Цветовой тон (Hue) - задаёт положение чистого спектрального цвета на цветовом круге и измеряется в градусах от 0° до 360° (где 0° и 360° - красный, 120° - зелёный, 240° - синий). В модели RGB этот параметр скрыт в соотношении доминирующего и второстепенного каналов.
  • Насыщенность (Saturation) - определяет чистоту и интенсивность тона в процентах от 0% (нейтральный серый цвет) до 100% (максимально сочный спектральный оттенок). В координатах RGB за насыщенность отвечает величина разрыва между минимальным и максимальным числами из тройки.
  • Светлота (Lightness в модели HSL) или Яркость (Value / Brightness в модели HSV/HSB) - регулирует количество света в оттенке от 0% до 100% .

Ключевое различие между самими цилиндрическими моделями кроется в работе третьего параметра при максимальном значении в 100% . В системе HSL показатель Lightness 100% всегда даёт абсолютно белый цвет (аналог R: 255, G: 255, B: 255) при любой насыщенности, а чистый спектральный цвет располагается строго посередине шкалы - на отметке 50% . В системе HSV/HSB, часто используемой в палитрах графических редакторов, параметр Value/Brightness на уровне 100% при стопроцентной насыщенности даёт чистый яркий цвет (например, R: 255, G: 0, B: 0), а для перехода к белому требуется дополнительно снизить насыщенность до 0% . Математический переход от сгенерированных чисел R, G, B к координатам HSL или HSV выполняется через нормализацию каждого канала к отрезку от 0 до 1 с последующим поиском минимума, максимума и дельты (разницы) между ними.

Применение RGB-значений в CSS-вёрстке и UI/UX дизайне

Сгенерированное цветовое значение и отдельные числовые показатели каналов R, G и B напрямую используются при написании таблиц стилей, проектировании дизайн-систем и работе с графикой. Наличие как готовой строки оттенка, так и разбивки по каналам позволяет без дополнительных пересчётов переносить цвет в код или настройки графического программного обеспечения.

Синтаксис функции rgb в свойствах CSS3

В спецификациях CSS3 и CSS Color Module Level 4 базовая функция rgb(R, G, B) выступает стандартным способом объявления цвета для любых визуальных элементов страницы. В качестве аргументов внутрь скобок передаются три полученных целых числа, разделённых запятыми (классический синтаксис) или пробелами (современный стандарт записи).

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

  • Оформление типографики и векторных иконок через свойство color: rgb(45, 118, 210); .
  • Заливка фоновых подложек блоков, карточек и кнопок с помощью background-color: rgb(242, 245, 250); .
  • Отрисовка границ, разделительных линий и контуров фокуса в свойствах border-color и outline-color .
  • Формирование объёмных теней в свойствах box-shadow и text-shadow , где RGB-значения определяют оттенок свечения или падающей тени, например: box-shadow: 0 8px 24px rgb(45, 118, 210, 0.25); .
  • Построение плавных цветовых переходов в функциях linear-gradient() , radial-gradient() и conic-gradient() путём подстановки двух и более сгенерированных точек цвета.

Дизайн-токены и поканальные CSS-переменные

В современной фронтенд-разработке и архитектуре UI/UX широкое распространение получил паттерн хранения отдельных числовых каналов внутри пользовательских CSS-свойств (CSS custom properties). Если записать в переменную готовый цвет целиком, например --color-accent: rgb(94, 53, 177); , изменить его прозрачность для второстепенных элементов без дублирования кода становится затруднительно.

Передача в переменную только тройки чисел без самой обёртки rgb() решает эту задачу и позволяет динамически управлять альфа-каналом в любых состояниях интерфейса:

:root {
  /* Сохранение отдельных значений R, G и B в дизайн-токен */
  --color-primary-rgb: 94, 53, 177;
}

.button {
  /* Сплошной основной цвет */
  background-color: rgb(var(--color-primary-rgb));
  color: rgb(255, 255, 255);
}

.button:hover {
  /* Тот же оттенок с плотностью 85% при наведении */
  background-color: rgba(var(--color-primary-rgb), 0.85);
}

.button:active {
  /* Состояние нажатия с плотностью 70% */
  background-color: rgba(var(--color-primary-rgb), 0.7);
}

.modal-overlay {
  /* Полупрозрачная подложка или оверлей с плотностью 15% */
  background-color: rgba(var(--color-primary-rgb), 0.15);
}

Такой подход упрощает переключение между дневной и ночной темами оформления (Dark Mode): достаточно переопределить три числа внутри переменной --color-primary-rgb для тёмного селектора, и все зависимые элементы - от рамок до полупрозрачных плашек - перекрасятся в новый тон с сохранением заданной прозрачности.

Аналогичный принцип заложен в конфигурацию популярных утилитарных фреймворков, включая Tailwind CSS. При настройке пользовательской палитры в файле tailwind.config.js цвета с поддержкой модификаторов прозрачности (например, для работы классов вида bg-primary/50 ) объявляются именно через подстановку отдельных каналов и служебного плейсхолдера альфа-значения: rgb(var(--color-primary-rgb) / <alpha-value>) .

Графические редакторы и процедурная графика

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

Среда применения Формат ввода данных Практическая задача
Графические и UI-редакторы (Figma, Adobe Photoshop, Illustrator) Последовательный ввод трёх целых чисел (от 0 до 255) в поля R, G и B инспектора цвета Точная синхронизация оттенков в макетах, создание цветовых стилей (Color Styles), настройка корректирующих слоёв и заливок
Двумерная и трёхмерная веб-графика (HTML5 Canvas API, WebGL) Передача аргументов в методы рендеринга или нормализация значений делением на 255 для шейдеров (диапазон 0.0-1.0) Процедурная раскраска частиц, отрисовка графиков и диаграмм, динамическая генерация текстур и фонов
Генеративный дизайн и обработка изображений (p5.js, Processing) Вызов функций заливки и обводки с тремя числовыми параметрами: fill(R, G, B) , stroke(R, G, B) Алгоритмическое искусство, создание случайных паттернов, визуализация данных и попиксельная фильтрация матриц

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

Построение цветовых схем и оценка контрастности по каналам RGB

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

Расчет противоположного цвета методом инверсии

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

R_inv = 255 - R
G_inv = 255 - G
B_inv = 255 - B

Полученная тройка чисел (255 - R, 255 - G, 255 - B) формирует точный математический антипод исходного оттенка. Если при случайной генерации выпал цвет со значениями R: 40, G: 180, B: 95 , то вычитание из 255 дает противоположный оттенок с координатами R: 215, G: 75, B: 160 . В дизайне интерфейсов такая пара используется для создания акцентных элементов, выделения активных маркеров или построения высококонтрастных схем оформления.

При использовании математической инверсии необходимо учитывать пограничный случай в центральной зоне диапазона. Когда сгенерированные значения всех трех каналов близки к 128, например (125, 130, 122) , вычитание из 255 дает (130, 125, 133) . Оба оттенка останутся практически неразличимыми средне-серыми тонами, поэтому для цветов со средней светлотой инверсия не обеспечивает визуального разделения.

Формирование монохромной палитры через пропорциональное изменение каналов

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

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

  • Получение темных тонов (Shades) - умножение каждого из трех каналов на одинаковый коэффициент k в диапазоне от 0 до 1 с последующим округлением до целого числа: (R × k, G × k, B × k) . При k = 0.6 базовый оттенок (100, 150, 200) преобразуется в более темный вариант (60, 90, 120) с сохранением исходной пропорции между каналами 2:3:4.
  • Получение светлых тонов (Tints) - пропорциональное сокращение дистанции от текущих показателей до верхней границы 255 по формуле R + (255 - R) × k для каждого канала. Такая операция равномерно приближает оттенок к белому цвету, формируя светлые фоновые подложки, рамки и неактивные состояния элементов, согласованные с основным цветом.

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

Относительная яркость и проверка читаемости текста по WCAG 2.0

Сгенерированный случайный оттенок не всегда подходит для размещения текста поверх фона или использования в качестве самого шрифта. Для объективной оценки читаемости в веб-разработке применяется руководство WCAG 2.0, которое опирается на вычисление относительной яркости (Luminance) непосредственно из значений каналов R, G и B.

Человеческое зрение воспринимает базовые лучи неравномерно: зеленый спектр кажется значительно светлее синего и красного при одинаковой числовой интенсивности. В формуле относительной яркости L после предварительной нормализации каналов (перевода диапазона 0-255 в шкалу от 0 до 1 и коррекции гаммы) каждому компоненту присваивается весовой коэффициент:

L = 0.2126 × R_lin + 0.7152 × G_lin + 0.0722 × B_lin

Из уравнения следует, что зеленый канал формирует более 71% воспринимаемой светлоты оттенка, красный дает около 21%, а синий - лишь 7%. По этой причине чистый синий цвет (0, 0, 255) визуально остается темным и требует светлого текста, тогда как чистый зеленый (0, 255, 0) обладает высокой относительной яркостью и читается только в паре с темным шрифтом.

После расчета показателя L для двух цветов (например, сгенерированного фона и текста) вычисляется итоговый коэффициент контрастности по отношению более светлого оттенка L1 к более темному L2 :

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

Нормативные требования стандарта WCAG 2.0 разделяют допустимые пороговые коэффициенты в зависимости от размера шрифта и требуемого уровня доступности интерфейса.

Уровень соответствия WCAG 2.0 Обычный текст Крупный текст и графика UI Практическое назначение в интерфейсе
Уровень AA (минимальный стандарт) 4.5:1 3:1 Основной текст страниц, подписи к формам, кнопки, навигационные меню и информационные карточки
Уровень AAA (повышенный стандарт) 7:1 4.5:1 Специализированные сервисы для слабовидящих, лонгриды, финансовые и государственные порталы с высокой текстовой нагрузкой

Если рассчитанный коэффициент для сгенерированного цвета на белом фоне (255, 255, 255) опускается ниже отметки 4.5:1, такой оттенок содержит слишком высокие значения в зеленом или красном каналах. В этом случае поверх него следует использовать темный текст либо снизить значения R, G и B через пропорциональное масштабирование до достижения нормативного порога.

Нужен другой
генератор?

Откройте раздел генераторов и выберите инструмент для другой задачи.

Все генераторы