Таблица цветов HTML и CSS — RGB, HEX, HSL коды

CSS поддерживает несколько форматов для задания цвета: HEX-коды, RGB, RGBA, HSL, а также 147 именованных цветов. В этой статье — полная таблица цветов HTML и CSS, объяснение всех форматов с примерами кода и инструменты для работы с цветом.

Форматы цветов в CSS — все варианты

В CSS цвет можно задать шестью способами. Каждый формат имеет свои сценарии применения.

/* 1. Именованный цвет */
color: red;
color: blue;
color: tomato;
color: steelblue;

/* 2. HEX (шестнадцатеричный) — самый распространённый */
color: #ff0000;    /* красный */
color: #FF0000;    /* то же самое (регистр не важен) */
color: #f00;       /* краткая запись (если пары совпадают) */

/* 3. RGB */
color: rgb(255, 0, 0);     /* красный */
color: rgb(0, 128, 0);     /* зелёный */
color: rgb(0, 0, 255);     /* синий */

/* 4. RGBA — RGB с прозрачностью */
color: rgba(255, 0, 0, 1);     /* полностью непрозрачный */
color: rgba(255, 0, 0, 0.5);   /* 50% прозрачности */
color: rgba(0, 0, 0, 0.3);     /* чёрный, 30% */

/* 5. HSL (тон, насыщенность, яркость) */
color: hsl(0, 100%, 50%);      /* красный */
color: hsl(120, 100%, 25%);    /* тёмно-зелёный */
color: hsl(240, 100%, 50%);    /* синий */

/* 6. HSLA */
color: hsla(0, 100%, 50%, 0.5);

/* Современный синтаксис CSS Color Level 4 */
color: rgb(255 0 0 / 50%);
color: hsl(0 100% 50% / 0.5);

HEX коды цветов HTML — как читать и писать

HEX-код — это шестнадцатеричное представление трёх каналов: красного (R), зелёного (G) и синего (B). Каждый канал — значение от 00 (0) до FF (255).

/* Структура HEX-кода */
# R  R  G  G  B  B
# F  F  0  0  0  0  → #ff0000 = красный
# 0  0  F  F  0  0  → #00ff00 = зелёный
# 0  0  0  0  F  F  → #0000ff = синий
# F  F  F  F  F  F  → #ffffff = белый
# 0  0  0  0  0  0  → #000000 = чёрный
# 8  0  8  0  8  0  → #808080 = серый 50%

/* Краткая запись: #RGB вместо #RRGGBB */
#f00  =  #ff0000   /* красный */
#0f0  =  #00ff00   /* зелёный */
#00f  =  #0000ff   /* синий */
#fff  =  #ffffff   /* белый */
#000  =  #000000   /* чёрный */
#abc  =  #aabbcc   /* серо-голубой */

/* HEX с прозрачностью (8 символов) */
#ff0000ff   /* красный, полностью непрозрачный */
#ff000080   /* красный, 50% прозрачность */
#ff000000   /* красный, полностью прозрачный */

Чтобы узнать HEX-код любого цвета на экране — используй инструмент «Пипетка» в Chrome DevTools: открой DevTools → нажми на квадратик цвета рядом с любым color свойством → появится colour picker с возможностью выбрать цвет с экрана.

Таблица цветов HTML и CSS с кодами

В CSS определено 147 именованных цветов. Вот основные из них с HEX и RGB кодами:

RGB цвета — формат и синтаксис

RGB расшифровывается как Red, Green, Blue. Каждый канал принимает значение от 0 до 255. Смешивая три канала, можно получить любой из 16 миллионов цветов.

/* Основные цвета */
color: rgb(255, 0, 0);     /* чистый красный */
color: rgb(0, 255, 0);     /* чистый зелёный */
color: rgb(0, 0, 255);     /* чистый синий */

/* Смешанные цвета */
color: rgb(255, 165, 0);   /* оранжевый */
color: rgb(128, 0, 128);   /* фиолетовый */
color: rgb(75, 0, 130);    /* индиго */

/* Оттенки серого (R=G=B) */
color: rgb(0, 0, 0);       /* чёрный */
color: rgb(128, 128, 128); /* серый 50% */
color: rgb(192, 192, 192); /* светло-серый */
color: rgb(255, 255, 255); /* белый */

/* RGBA — четвёртый параметр: прозрачность от 0 до 1 */
background: rgba(0, 0, 0, 0.5);    /* чёрная накладка 50% */
background: rgba(255, 255, 255, 0.1); /* тонкое белое стекло */
background: rgba(37, 99, 235, 0.15);  /* синяя подсветка */

HSL — удобный формат для дизайнеров

HSL расшифровывается как Hue (тон), Saturation (насыщенность), Lightness (яркость). Этот формат гораздо понятнее для человека, чем HEX или RGB.

/* hsl(тон, насыщенность%, яркость%) */

/* Тон (Hue): 0–360 градусов цветового круга */
/* 0°   = красный */
/* 60°  = жёлтый */
/* 120° = зелёный */
/* 180° = голубой */
/* 240° = синий */
/* 300° = розовый */
/* 360° = снова красный */

/* Насыщенность: 0% = серый, 100% = чистый цвет */
/* Яркость: 0% = чёрный, 50% = нормальный, 100% = белый */

hsl(0, 100%, 50%)     /* красный */
hsl(120, 100%, 50%)   /* зелёный */
hsl(240, 100%, 50%)   /* синий */
hsl(60, 100%, 50%)    /* жёлтый */
hsl(0, 0%, 50%)       /* серый */

/* Главное преимущество HSL: легко создать палитру */
/* Один цвет, разные оттенки: */
hsl(220, 90%, 95%)    /* очень светлый синий */
hsl(220, 90%, 80%)    /* светло-синий */
hsl(220, 90%, 60%)    /* средний синий */
hsl(220, 90%, 40%)    /* тёмно-синий */
hsl(220, 90%, 20%)    /* очень тёмный синий */

/* В CSS переменных — удобно для тем: */
:root {
  --primary-h: 220;
  --primary-s: 90%;
}

.light   { color: hsl(var(--primary-h), var(--primary-s), 80%); }
.default { color: hsl(var(--primary-h), var(--primary-s), 50%); }
.dark    { color: hsl(var(--primary-h), var(--primary-s), 25%); }

Прозрачность в CSS: rgba и opacity — в чём разница

Оба способа делают элемент прозрачным — но работают по-разному. Это одна из самых частых точек путаницы у новичков.

/* opacity: 0–1 — делает ВЕСЬ элемент прозрачным, включая содержимое */
.overlay {
  background: black;
  opacity: 0.5;
}
/* Проблема: текст внутри .overlay тоже станет 50% прозрачным */

/* rgba — прозрачный только ФОН, содержимое остаётся непрозрачным */
.overlay {
  background: rgba(0, 0, 0, 0.5);
  color: white; /* белый цвет останется 100% непрозрачным */
}

/* Когда использовать rgba: */
.modal-backdrop   { background: rgba(0, 0, 0, 0.6); }
.card             { background: rgba(255, 255, 255, 0.9); }
.glass-effect     { background: rgba(255, 255, 255, 0.15); }

/* Когда использовать opacity: */
.disabled-button  { opacity: 0.4; }
.image-on-hover   { opacity: 0.8; transition: opacity 0.3s; }
.fade-in-element  { animation: fadeIn 0.5s ease; }

CSS переменные для цветовой системы сайта

Профессиональный подход — хранить все цвета сайта в CSS переменных в :root. Это позволяет легко менять всю цветовую схему из одного места.

:root {
  /* Основные цвета */
  --color-primary:   #2563eb;
  --color-secondary: #7c3aed;
  --color-success:   #16a34a;
  --color-warning:   #d97706;
  --color-error:     #dc2626;

  /* Нейтральные */
  --color-text:      #1f2937;
  --color-muted:     #6b7280;
  --color-border:    #e5e7eb;
  --color-bg:        #ffffff;
  --color-bg-subtle: #f9fafb;

  /* Тёмная тема */
  /* Просто меняем переменные: */
}

[data-theme="dark"] {
  --color-text:      #f9fafb;
  --color-bg:        #111827;
  --color-bg-subtle: #1f2937;
  --color-border:    #374151;
}

/* Использование в компонентах */
body {
  color: var(--color-text);
  background: var(--color-bg);
}

.button-primary {
  background: var(--color-primary);
  color: white;
}

.error-message {
  color: var(--color-error);
  border-color: var(--color-error);
}

Современные цветовые форматы CSS (2024–2025)

В новых версиях CSS появились расширенные цветовые пространства с более широким охватом цветов — особенно важны для современных экранов с широким цветовым охватом (P3, HDR).

/* oklch — новый рекомендуемый формат (2023+) */
/* oklch(яркость хрома тон) */
color: oklch(0.7 0.2 250);    /* синий */
color: oklch(0.8 0.15 150);   /* зелёный */

/* Преимущество oklch: одинаковое восприятие яркости */
/* В HSL hsl(120, 100%, 50%) зелёный выглядит ярче красного */
/* В oklch яркость перцептивно равная */

/* display-p3 — широкий охват цветов */
color: color(display-p3 1 0 0);  /* более насыщенный красный */

/* Fallback для старых браузеров */
color: #2563eb;
color: oklch(0.55 0.22 263);  /* переопределит если браузер поддерживает */

/* Проверка поддержки */
@supports (color: oklch(0 0 0)) {
  :root {
    --accent: oklch(0.65 0.27 270);
  }
}

Инструменты для работы с цветом в CSS

Запоминать HEX-коды наизусть не нужно. Вот инструменты, которые используют профессиональные верстальщики:

• Chrome DevTools — встроенный colour picker. Клик на квадратик цвета в панели стилей — открывается редактор с пипеткой, HEX, RGB, HSL форматами.
• coolors.co — генератор цветовых палитр. Пробел = новая палитра.
• color.adobe.com — Adobe Color, цветовые схемы по правилам дизайна.
• colorhunt.co — готовые палитры от дизайнеров.
• oklch.com — визуальный редактор oklch цветов.
• contrast-ratio.com — проверка контрастности (важно для доступности, WCAG).

Контрастность цвета и доступность (WCAG)

Цвет текста и фона должны иметь достаточный контраст, чтобы текст читался людьми с нарушениями зрения. Стандарт WCAG 2.1 требует:

• WCAG AA: контраст минимум 4.5:1 для обычного текста, 3:1 для крупного (18px+)
• WCAG AAA: контраст минимум 7:1

/* ✅ Хороший контраст */
color: #1f2937;          /* тёмно-серый на белом — 16:1 */
background: #ffffff;

/* ✅ Приемлемо */
color: #2563eb;          /* синий на белом — 4.7:1 */
background: #ffffff;

/* ❌ Плохой контраст — не использовать! */
color: #999999;          /* серый на белом — 2.5:1 */
background: #ffffff;

/* Проверить контраст: */
/* https://webaim.org/resources/contrastchecker/ */

Часто задаваемые вопросы о цветах в CSS

Сколько именованных цветов в CSS?

В CSS определено 147 именованных цветов — от aliceblue до yellowgreen. Их можно использовать напрямую: color: tomato, background: steelblue. Полный список на MDN: developer.mozilla.org → CSS → color_value.

RGB и HEX — в чём разница?

Оба формата описывают один и тот же цвет через три канала (красный, зелёный, синий). HEX — шестнадцатеричная запись того же самого числа. #ff0000 и rgb(255, 0, 0) — это одно и то же: ff = 255 в десятичной. Разница только в записи: HEX короче (#2563eb вместо rgb(37, 99, 235)), RGB нагляднее для программирования.

Как узнать HEX код цвета на экране?

Три способа: 1) Chrome DevTools — открой DevTools (F12), нажми на любой квадратик цвета в CSS, появится пипетка. 2) Расширение ColorZilla для Chrome/Firefox — клик на любой пиксель страницы. 3) На macOS — приложение «Цифровой колориметр» (Digital Color Meter) в стандартных утилитах.

Когда использовать HSL вместо HEX?

HSL удобен когда нужно создать несколько оттенков одного цвета. Например, для кнопки: нормальное состояние hsl(220, 90%, 50%), hover hsl(220, 90%, 40%), активное hsl(220, 90%, 35%) — меняем только яркость. В HEX пришлось бы подбирать три разных кода. В 2025 году всё больше разработчиков используют oklch вместо HSL — он ещё точнее передаёт перцептивную яркость.