Инструменты для цвета

Пипетка: большой квадрат — это карта насыщенности и яркости при текущем оттенке: слева направо растёт насыщенность, сверху вниз уменьшается яркость. Щёлкните в любом месте, чтобы выбрать цвет. Тонкая вертикальная полоса справа — это ползунок оттенка (от 0° до 360°): сдвиньте его, чтобы изменить базовый оттенок, и квадрат перерисуется. Справа показан выбранный цвет в форматах HEX, RGB и HSL — щёлкните любое значение, чтобы скопировать его.

Палитра: левый выбор цвета и правое поле ввода хранят один и тот же базовый цвет — они синхронизированы в обе стороны (выберите цвет или введите hex-значение, и оба обновятся). Пять строк палитры ниже получены из этого базового цвета поворотом его оттенка по цветовому кругу: Дополнительные (оттенок +180°, наибольший контраст), Триадные (+120° / +240°, сбалансированная триада), Тетрадные (+90° / +180° / +270°, прямоугольная схема из четырёх цветов), Аналогичные (-30° / базовый / +30° / +60°, гармоничные соседи) и Раздвоенные дополнительные (+150° / +210°, мягче чисто дополнительных). Первый образец в каждой строке — всегда сам базовый цвет, а остальные — его варианты с поворотом оттенка.

Конвертер: введите любой допустимый цвет — HEX (#3b82f6), функцию CSS (rgb(59,130,246) / hsl(217,90%,60%)) или название цвета (dodgerblue) — и мгновенно получите конвертацию во все основные форматы. Выпадающий список формата при необходимости подсказывает парсеру, если автоопределение выбрало не тот формат. В результате показываются HEX, RGB (0-255), HSL (градусы, %, %), HSV и CMYK. Щёлкните любое значение, чтобы скопировать его.

Дальтонизм: загрузите изображение и выберите тип нарушения цветового зрения для симуляции. Инструмент применяет матричное преобразование колбочкового отклика к каждому пикселю, пересчитывая значения RGB, чтобы приблизительно показать, как люди с разными формами дальтонизма воспринимают изображение. Левый холст показывает оригинал, правый — симулированный вид. Выпадающий список охватывает три типа дихромазии (отсутствие одного колбочкового пигмента: протанопия, дейтеранопия, тританопия), полную ахроматопсию (отсутствие цветового зрения) и три типа аномальной трихромазии (ослабленный отклик колбочек). Изображения меньшего разрешения загружаются быстрее.

Градиент: это визуальный конструктор CSS-градиентов. Выберите линейный (направленный) или радиальный (от центра наружу), задайте угол (0° = снизу вверх, 90° = слева направо) и определите точки цвета. У каждой точки есть выбор цвета, и они равномерно распределены (0%, 50%, 100% для трёх точек). Нажмите + Точка, чтобы добавить промежуточные цветовые точки для более сложных градиентов. Предпросмотр обновляется в реальном времени, а сгенерированный CSS готов к копированию ниже.

Контраст: вычисляет коэффициент контраста WCAG 2.1 между цветом текста и фоном по формуле относительной яркости из значений sRGB (с гамма-коррекцией). Коэффициент варьируется от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом). Результаты показывают прохождение или непрохождение трёх уровней соответствия: AA, обычный текст (коэффициент ≥ 4.5:1), AAA, крупный текст (коэффициент ≥ 4.5:1 для текста от 18pt или жирного от 14pt) и AAA, обычный текст (коэффициент ≥ 7:1). Образец текста обновляется в реальном времени при изменении цветов.

Извлечение: загрузите любое изображение, и инструмент определит его палитру доминирующих цветов с помощью квантования цвета. Изображение уменьшается до 100×100 px, затем каждый пиксель распределяется по гистограмме 4 бита на канал (16 уровней на R/G/B = 4096 корзин). Прозрачные пиксели пропускаются. Самые частые корзины сортируются по числу пикселей, и центральный цвет каждой корзины становится образцом. Каждый образец показывает своё значение HEX и долю пикселей изображения, которую он представляет. Ползунок количества (2-12) задаёт, сколько доминирующих цветов извлечь.

Смешивание: смешивает два цвета в цветовом пространстве RGB линейной интерполяцией. Ползунок соотношения определяет смесь: 0% — чистый Цвет 1, 100% — чистый Цвет 2, а 50% — равномерная смесь. Каждый канал R, G, B интерполируется независимо (например, красный + синий при 50% даёт пурпурный). Предпросмотр результата и значения HEX/RGB обновляются в реальном времени при перетаскивании ползунка или изменении любого цвета.

Температура: преобразует цветовую температуру абсолютно чёрного тела в кельвинах в соответствующий видимый цвет по приближённому алгоритму Таннера Хелланда. Низкие температуры (1000-3000 K) дают тёплые оранжево-красные тона, как свеча и лампы накаливания; средний диапазон (4000-6500 K) — от нейтрального белого до дневного света; высокие температуры (8000-40000 K) сдвигаются в холодный синий, как пасмурное небо и глубокая вода. Подпись ниже указывает ближайший реальный источник света для каждой температуры.

Названия: просмотрите объединённую коллекцию из 80 традиционных китайских цветов (胭脂, 朱砂, 黛蓝 и др. — названия взяты из классической китайской литературы, живописи и крашения) и более 140 именованных CSS-цветов (стандартная веб-палитра). Используйте поле поиска, чтобы фильтровать по названию или значению HEX, либо переключайте категории выпадающим списком. Щёлкните любой цветовой образец, чтобы увидеть крупный предпросмотр с названием и кодом HEX — щёлкните код, чтобы скопировать его.