Выбор HEX-цвета: HEX, RGB, HSL, OKLCH, тона и оттенки | We.Inc
Бесплатный выбор HEX-цвета: выберите или вставьте цвет и получите значения HEX, RGB, HSL и OKLCH, тона и оттенки, и оценку контраста относительно белого и чёрного.
Выбор HEX-цвета
Выберите цвет или вставьте любое значение HEX, RGB или HSL, чтобы получить все форматы, нужные для дизайна и кода: HEX, RGB, HSL и OKLCH. Посмотрите шкалу тонов и оттенков и проверьте, насколько читаем текст на этом цвете относительно белого и чёрного.
Используйте палитру выбора цвета или введите значение, например #4F98FB, rgb(79, 152, 251) или hsl(215, 95%, 65%).
Копируйте любой формат в один клик. OKLCH — современный CSS-формат, который сохраняет светлоту одинаковой для разных оттенков.
Нажмите на любой тон или оттенок, чтобы сделать его текущим цветом.
Прочитайте коэффициенты контраста, чтобы решить, белый или чёрный текст подойдёт для этого цвета.
Для кнопок стремитесь минимум к контрасту 4,5:1 между надписью и цветом кнопки.
Стройте палитру от одного фирменного цвета: светлый тон для фона, сам цвет для кнопок, тёмный оттенок для состояний наведения и текста.
Экраны отличаются. Проверьте свой фирменный цвет и на телефоне, и на ноутбуке.
Частые вопросы
Что такое hex-код цвета?
Шестизначный код цвета на экране, записанный как # с тремя парами шестнадцатеричных цифр для красного, зелёного и синего. #FF0000 — чистый красный; #000000 — чёрный; #FFFFFF — белый.
В чём разница между HEX, RGB и HSL?
Они описывают одни и те же цвета по-разному. HEX и RGB задают количество красного, зелёного и синего. HSL задаёт оттенок (угол на цветовом круге), насыщенность и светлоту, что легче настраивать вручную.
Что такое OKLCH и стоит ли его использовать?
OKLCH — более новый CSS-формат цвета, основанный на том, как люди воспринимают цвет. Два цвета с одинаковым значением L выглядят одинаково светлыми, что упрощает построение согласованных палитр. Все современные браузеры его поддерживают.
Как рассчитывается контраст?
По формуле WCAG 2: относительная яркость более светлого цвета плюс 0,05, делённая на то же самое для более тёмного цвета плюс 0,05. Для полной проверки пары цветов используйте проверку контраста цветов We.Inc.
Выбор фирменного цвета, который работает на сайте
Фирменный цвет должен справляться с несколькими задачами: выделяться на кнопках, оставаться читаемым за белым текстом и не утомлять глаз на всей странице. Средние тона синего, зелёного и глубокого красного обычно справляются со всеми тремя. Очень светлые цвета (жёлтый, пастельно-розовый) хорошо смотрятся в логотипе, но плохо подходят для кнопок, потому что ни белый, ни чёрный текст на них не читается без корректировки.
Панель контраста показывает это сразу. Если белый текст набирает меньше 4,5:1, используйте чёрный текст или выберите более тёмный оттенок из шкалы для кнопок.
Тона, оттенки и простая палитра
Тона смешивают ваш цвет с белым; оттенки — с чёрным. Практичной палитре сайта нужно совсем немного: очень светлый тон для фона секций, основной цвет для кнопок и ссылок, и один более тёмный оттенок для состояний наведения. Добавьте нейтральные серые для текста и границ — и у вас полный, согласованный набор.
Чтобы проверить конкретную пару текста и фона (например, серый текст на тонированном фоне), используйте проверку контраста цветов, которая оценивает и WCAG AA, и AAA.