Палитра цветов

WCAG (Web Content Accessibility Guidelines) определяет минимальные коэффициенты контраста между текстом и его фоном для обеспечения читаемости людьми с ослабленным зрением или цветовой слепотой. AA — это юридический минимум в большинстве юрисдикций: 4.5:1 для обычного текста (ниже 18pt/14pt bold), 3:1 для крупного текста. AAA — это расширенный стандарт: 7:1 для обычного текста, 4.5:1 для крупного текста. Примерно 8% мужчин и 0.5% женщин имеют какую-то форму нарушения цветового зрения, поэтому соблюдение контрастности крайне важно для продуктов, ориентированных на широкую аудиторию. Проверка здесь тестирует цвета текста и фона одновременно и показывает, какие комбинации проходят проверку или не проходят.

Оба используют Оттенок (Hue, 0-360 градусов) и Насыщенность (Saturation), но различаются в третьем канале. HSL (Lightness) устанавливает 50% как чистый насыщенный цвет, 0% как черный и 100% как белый — что делает его интуитивно понятным для CSS и дизайна. HSV (Value/Brightness) устанавливает 100% Value как чистый насыщенный цвет и 0% как черный — в HSV нет чистого белого цвета, если только Насыщенность не равна 0%. Adobe Photoshop, Illustrator и большинство встроенных в ОС цветовых индикаторов используют HSV. CSS и инструменты веб-дизайна обычно используют HSL. Этот инструмент мгновенно конвертирует оба формата.

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

Нажмите на раздел Presets и выберите либо Tailwind CSS, либо Material Design. Каждая палитра показывает полную шкалу цветов (например, Tailwind blue-50 через blue-950 или Material red 100 через 900). Нажмите на любой образец, чтобы загрузить этот цвет в индикатор и мгновенно получить его HEX, RGB, HSL и другие значения. Это полезно при разработке внутри существующей системы дизайна — вы можете скопировать нужный вам формат (например, значение HSL для Tailwind blue-600) без необходимости искать его в других местах.

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

Да. Вы можете ввести или вставить HEX-код непосредственно в поле ввода HEX (с префиксом # или без него), и индикатор и все остальные поля с форматами обновятся мгновенно. Вы также можете регулировать ползунки Оттенка, Насыщенности и Яркости напрямую, если хотите изменить конкретное свойство, не меняя другие. Это удобно, когда у вас есть hex-код из файла дизайна и вы хотите проверить его контрастность или конвертировать в другой формат.

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