Генератор аналогичных цветов

Добавляем контраст соседним оттенкам

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

Тридцать градусов — не всегда одинаковый шаг

HSL неравномерно распределяет оттенки с точки зрения восприятия. Между красным при 0°, оранжевым при 30° и жёлтым при 60° каждый шаг в 30° даёт цвет с другим названием, тогда как диапазон примерно от 90° до 150° целиком занимает зелёный. Поэтому аналогичный набор на основе зелёного может выглядеть почти одинаково. Базовый красный также переходит через начало круга: с одной стороны получается розовый около 330°, а с другой — оранжевый.

Как пользоваться

1. Введите корректные значения #RGB или #RRGGBB и любой запрошенный процент.
2. Запустите фиксированную операцию с цветом, выполняемую локально в браузере.
3. Просмотрите образцы и скопируйте результат или значения палитры.

Конфиденциальность и ограничения

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