Utilore

Конвертер цветов

Введите цвет в любой привычной записи — #1f5fd6, 1f5fd6, #1f5, rgb(31, 95, 214) — и остальные формы появятся сразу, вместе с показателями контраста, без которых текст рискует оказаться нечитаемым.

  • #1f5fd6 HEX
  • rgb(31, 95, 214) RGB
  • hsl(219, 75%, 48%) HSL

Контраст:

Как пользоваться

  1. Введите или вставьте цвет либо выберите его в поле выбора.
  2. Сравните HEX, RGB и HSL рядом.
  3. Скопируйте ту запись, которая нужна вашему файлу.

Полезно знать

Три записи одного цвета

HEX короткий и понятен любому CSS. RGB прямо называет каналы — это важно, когда значение вычисляется, а не пишется руками. HSL описывает тон, насыщенность и светлоту: именно к нему стоит идти, если нужен тот же цвет на тон светлее, ведь меняется одно число вместо угадывания трёх.

Контраст — не украшение

По WCAG обычному тексту нужно отношение не ниже 4,5:1 к фону, крупному — не ниже 3:1. Две цифры на этой странице сразу говорят, выдержит ли цвет белый текст, чёрный или ни тот ни другой, — ещё до того, как макет уйдёт разработчику.

Источники

Частые вопросы

Какие форматы принимаются?

HEX из трёх, четырёх, шести и восьми знаков, с решёткой и без, а также rgb() и rgba() с запятыми или пробелами. Прозрачность сохраняется и попадает в значение HEX.

Почему HSL иногда показывает чуть другой цвет?

Значения HSL округляются до целых, чтобы их было удобно читать, поэтому обратный перевод может сдвинуть канал на единицу. HEX и RGB при этом точны.

Что-нибудь уходит на сервер?

Нет. Всё считается на странице — фирменные цвета неопубликованного макета остаются у вас.

Похожие инструменты