HTML-цвета: конвертер и таблица кодов цветов

Таблица HTML-цветов

Щёлкните строку, чтобы открыть цвет в конвертере выше.

Названия цветов в CSS

148 названий цветов, которые понимает CSS. Щёлкните строку, чтобы открыть цвет в конвертере.

Коды HTML-цветов, таблица цветов и конвертер цветов

Конвертируйте любой цвет между HEX, RGB, HSL и HSV (с прозрачностью), находите HTML-код цвета по названию, проверяйте, насколько читается текст на его фоне, и просматривайте готовую таблицу кодов HTML-цветов. Всё считается мгновенно в вашем браузере, на сервер ничего не отправляется.

Как пользоваться конвертером цветов

1. Введите или вставьте цвет в поле: HEX (#2563EB или 2563EB), rgb(37, 99, 235), hsl(221, 83%, 53%), hsv(221, 84%, 92%) либо название цвета в CSS, например rebeccapurple. Значения с прозрачностью, такие как #2563EB80 или rgba(37, 99, 235, 0.5), тоже работают.
2. Или выберите цвет палитрой рядом с полем либо щёлкните любую строку таблиц цветов ниже.
3. Скопируйте нужный формат кнопкой копирования рядом с ним: HEX, HEX с альфа-каналом, RGB, RGBA, HSL, HSLA, HSV или название цвета в CSS, если есть точное совпадение.

Если цвет на картинке, фото или у вас на экране, возьмите его пипеткой цвета онлайн и вставьте код сюда, чтобы получить его во всех форматах.

HEX, RGB, HSL и HSV: в чём разница

• HEX (#RRGGBB) — самая короткая и самая распространённая запись цвета в HTML и CSS. Каждая пара цифр — количество красного, зелёного и синего от 00 до FF. Дополнительная пара добавляет прозрачность (#RRGGBBAA).
• RGB и RGBA записывают те же количества красного, зелёного и синего числами от 0 до 255 и необязательным альфа-каналом (непрозрачностью) от 0 до 1.
• HSL и HSLA описывают цвет как оттенок (0–360 градусов на цветовом круге), насыщенность и светлоту. Их проще всего подбирать вручную: меняйте светлоту, чтобы получить более светлый или тёмный тон, и оставляйте оттенок, чтобы остаться в том же семействе цветов.
• HSV (он же HSB) использует оттенок, насыщенность и яркость (value). Именно его показывает большинство графических редакторов и пипеток.

Контраст текста (WCAG)

Конвертер показывает коэффициент контраста выбранного цвета с белым и чёрным текстом. Рекомендации по доступности веб-страниц (WCAG) требуют не менее 4,5:1 для обычного текста и 3:1 для крупного (уровень AA), а для более строгого уровня AAA — 7:1 и 4,5:1. Используйте это, чтобы выбрать читаемый цвет текста для кнопки или фона.

Оттенки и дополнительный цвет

Под конвертером показаны три более светлых и три более тёмных оттенка того же тона и дополнительный цвет с противоположной стороны цветового круга. Щёлкните любой из них, чтобы продолжить работу с ним.

Таблица HTML-цветов

Здесь собрана подробная таблица HTML-цветов, которая служит удобной шпаргалкой для веб-разработчиков и дизайнеров. В ней вы найдёте популярные и редкие оттенки с названиями на русском и английском (например, «Снег» или «Василёк») и соответствующими им кодами HEX, нужными для вёрстки и стилей CSS.

Цвета разбиты по группам, так что можно быстро подобрать нужный тон, от классических чёрного и белого до таких вариантов, как «Бледно-золотистый» или «Цвет морской волны». Поле поиска находит цвет по названию на русском или английском либо по коду HEX.

Названия цветов в CSS

Кроме кодов HEX, CSS понимает 148 названий цветов, таких как tomato, navy или rebeccapurple. Их можно использовать в таблице стилей вместо кода, а во второй таблице перечислены все они со значениями HEX. Названия читаются легче, а HEX, RGB и HSL позволяют задать любой цвет и прозрачность.