Конвертируйте цвета между форматами HEX, RGB, HSL, HSV и CMYK. Проверяйте коэффициенты контрастности в соответствии с WCAG, формируйте цветовые палитры с учетом правил гармонии и создавайте шкалы оттенков и теней.
#3B82F659, 130, 246217° 91% 60%217° 76% 96%76% 47% 0% 4%rgb(59 130 246)Color Toolkit - это универсальная утилита для работы с цветами «четыре в одном», предназначенная для дизайнеров и разработчиков. На вкладке «Преобразование» можно преобразовать любой цвет в шесть форматов: HEX, RGB, HSL, HSV, CMYK, а также в синтаксис функции CSS rgb(). Вкладка «Contrast» проверяет пары цветов переднего плана и фона на соответствие всем четырём пороговым значениям WCAG 2.1 - «normal AA», «normal AAA», «large AA» и «large AAA» - и отображает предварительный просмотр комбинации в режиме реального времени. Вкладка «Палитра» генерирует шесть типов гармоничных цветовых сочетаний на основе любого базового цвета: комплементарные, аналогичные, триадические, раздельно-комплементарные, тетрадические и монохроматические. Вкладка «Оттенки» генерирует десять оттенков в сторону белого и десять оттенков в сторону черного.
Выберите вкладку, соответствующую выполняемой задаче. На вкладках «Преобразование», «Палитра» и «Оттенки» воспользуйтесь образцом цвета, чтобы открыть встроенный выбор цвета, или введите любой шестнадцатеричный код напрямую в текстовое поле. Также допускается использование именованных цветов CSS, таких как coral или steelblue. На вкладке «Контраст» установите цвета переднего плана и фона независимо друг от друга и воспользуйтесь кнопкой «Поменять местами», чтобы поменять их местами. Щелкните любой цветовой образец на вкладках «Палитра» или «Оттенки», чтобы скопировать его шестнадцатеричный код в буфер обмена. На вкладке «Преобразование» у каждой строки результатов есть собственная кнопка «Копировать».
Коэффициенты контрастности WCAG рассчитываются по формуле, приведенной в Руководстве по доступности веб-контента 2.1. Коэффициент 4,5:1 или выше соответствует уровню AA для обычного текста, а 7:1 - уровню AAA. Для крупного текста (18pt или 14pt жирным шрифтом) установлены более низкие пороговые значения: 3:1 для уровня AA и 4,5:1 для уровня AAA. Воспользуйтесь вкладкой «Палитра», чтобы быстро изучить варианты дизайна - щелкните любой образец, чтобы скопировать его шестнадцатеричный код (HEX), и вставьте его в редактор или инструмент для дизайна.