Color Picker Pro
Расширенный выбор цвета с поддержкой нескольких форматов
Форматы цвета
Цветовая гармония
Color Picker Pro
Расширенный выбор цвета с поддержкой нескольких форматов
Возможности
- Выбирайте цвета через ползунки тона/насыщенности/яркости или вставьте HEX, RGB или HSL значение, чтобы синхронизировать все каналы мгновенно
- Шесть форматов вывода одновременно: HEX, RGB, RGBA, HSL, HSLA и CMYK (готов к печати, без встраивания профиля)
- Коэффициент контрастности WCAG 2.1 относительно любого тестового цвета текста, со знаками AA (4.5:1) и AAA (7:1) через формулу относительной яркости W3C
- Генератор цветовой гармонии производит комплементарные, триадные, аналоговые и монохромные варианты от текущего тона
- Курируемые палитры, включая Material Design, Tailwind CSS и контрастный набор для доступности
- Локальная история цветов до 20 недавних выборов в localStorage (очищается по запросу, никогда не синхронизируется)
- Поддержка альфа-канала для RGBA и HSLA вывода, готового для CSS custom properties
- Случайные образцы цветов и копирование одним кликом для любой строки формата
Как использовать
- Перетаскивайте ползунки тона, насыщенности и яркости или вставьте известный HEX, чтобы управлять выбором от определённой стартовой точки.
- Настройте альфа-ползунок, если нужна прозрачность для оверлея, эффекта стекла или дизайн-токена.
- Откройте панель «Форматы», чтобы увидеть HEX, RGB(A), HSL(A) и CMYK рядом и скопировать тот, что ожидает ваш стек.
- Переключите панель «Доступность» и задайте тестовый цвет текста, чтобы проверить, что WCAG-контраст достигает AA или AAA перед поставкой.
- Откройте «Гармонию цветов», чтобы получить комплементарных, триадных или аналоговых спутников для сбалансированной палитры.
- Добавляйте выборы в «Историю» во время экспериментов; нажмите на любой образец, чтобы вызвать его позже в сессии.
Советы и лучшие практики
- Просматривайте изменения в реальном времени, настраивая параметры.
- Копируйте сгенерированный код прямо в свой CSS-таблицу стилей.
- Тестируйте свои дизайны в светлом и тёмном режимах для доступности.
- Используйте инструменты разработчика браузера вместе с этим инструментом для живого тестирования.
- Сохраняйте свои любимые конфигурации для быстрого доступа позже.
Вопросы и ответы
Почему один и тот же HEX показывает разные RGB значения в других инструментах?
Значения цвета могут указываться в sRGB или display-P3, и браузеры могут рендерить их по-разному в зависимости от калибровки монитора и ICC-профилей. Этот выбор использует sRGB (по умолчанию CSS Color Module Level 3) и округляет до 8-битных каналов (0–255). Для wide-gamut дизайн-токенов используйте P3-инструмент и конвертируйте через color() из CSS Color Level 4.
Как вычисляется коэффициент контрастности WCAG?
Коэффициент использует формулу относительной яркости W3C: каждый sRGB-канал линеаризуется (sRGB-в-линейный гамма), взвешивается 0.2126R + 0.7152G + 0.0722B, затем более светлая и тёмная яркости комбинируются как (L1 + 0.05) / (L2 + 0.05). AA проходит при 4.5:1 для обычного текста и 3:1 для крупного; AAA — при 7:1. Математика работает в вашем браузере на текущей паре передний план/фон.
Отправляется ли что-нибудь на сервер при выборе цвета?
Нет. Конвертации цвета, поиск палитр, расчёт контраста и история работают на стороне клиента в JavaScript. Единственное постоянное хранилище — localStorage для истории, которая живёт на вашем устройстве и никогда не покидает его. Вы можете использовать инструмент офлайн после кеширования страницы.
Почему CMYK не совпадает точно с моими Pantone или Adobe значениями?
CMYK зависит от устройства и требует ICC-профиля для точности печати. Браузерные инструменты не могут встроить CMYK-профиль, поэтому вывод здесь — наивная конвертация sRGB-в-CMYK, полезная только для быстрой справки. Для продакшен-печати генерируйте CMYK в Photoshop или Illustrator с профилем вашего принтера.
Как генератор гармонии выбирает свои цвета?
Генератор вращает текущий HSL тон: комплементарный это +180 градусов, триадный добавляет два цвета на +120 и +240, аналоговый добавляет соседей на +30 и +330, монохромный сдвигает насыщенность и яркость. Это механический подход цветового круга: даёт стартовую точку, но не учитывает перцептуальную равномерность, которая потребовала бы Oklch или Lab.
Могу ли я использовать эти значения напрямую как CSS custom properties?
Да. HSL-вывод напрямую подходит в современный CSS как `--brand: hsl(217 100% 60%)` или с альфой как `hsla(217, 100%, 60%, 0.8)`. HSL обычно предпочитается для дизайн-токенов, потому что делает рампы яркости тривиальными — повышение третьего значения даёт мгновенные состояния hover и active без пересчёта RGB.
Поддерживает ли выбор display-P3 или wide-gamut вывод?
В настоящее время нет. Выбор предполагает sRGB и выводит HEX/RGB по 8 бит на канал. Если нужен P3 или Rec.2020, используйте инструмент, испускающий CSS Color Level 4 синтаксис вроде `color(display-p3 0.4 0.5 0.9)`. Возможно, добавим это, когда поддержка браузеров стабилизируется по всем целям.
Почему моя сохранённая история цветов исчезла?
История сохраняется в localStorage, привязанном к этому домену. Очистка данных браузера, режим инкогнито или смена браузера сбрасывают её. Лимит — 20 записей, чтобы избежать проблем с квотой — более старые выборы вытесняются по мере добавления новых.