Названия цветов и HEX-коды

Узнайте значения HEX, RGB и HSL для любого названия цвета или ближайшее название к любому коду. Оттенки, тона и коэффициенты контраста WCAG для 148 цветов CSS.


Введите название цвета или вставьте значение HEX, RGB либо HSL. Работают все четыре формата.
Очистить

Все именованные цвета CSS

Все 148 названий цветов, встроенных в CSS, со значениями HEX и RGB. Нажмите на любую строку, чтобы открыть её выше.

Как устроены HEX-коды цвета

HEX-код это просто три числа, записанные в шестнадцатеричной системе: сколько красного, сколько зелёного и сколько синего, каждое от 00 до FF. Поэтому #FFD700 означает красный на полную, зелёный на 215 из 255 и полное отсутствие синего, что глаз воспринимает как золотой. Значение имеют только пары из двух знаков, и именно поэтому #FFF и #FFFFFF оба дают белый.

Сравнение HEX, RGB и HSL

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

Почему контраст важен

Текст должен достаточно выделяться на фоне, чтобы его могли прочитать люди со слабым зрением или при тусклом экране. Рекомендации по доступности задают соотношение 4,5 к 1 для обычного текста (AA) и 7 к 1 для более строгого уровня AAA. Крупному тексту достаточно 3 к 1. Этот инструмент вычисляет соотношение и с белым, и с чёрным, так что сразу видно, что класть сверху.

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

  • В CSS 148 именованных цветов, и некоторые из них дублируются: grey и gray, а также aqua и cyan, полностью совпадают.
  • Сокращённая запись HEX работает, только когда каждая пара повторяется, поэтому #FFCC00 можно записать как #FC0, а #FFD700 сократить нельзя.
  • Добавление ещё двух знаков задаёт прозрачность, так что #FFD70080 это золотой примерно с половинной непрозрачностью.
  • Чтобы собрать палитру, держите тон в HSL постоянным и меняйте только светлоту. Цвета всегда будут выглядеть родственными.

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

Цвет CSS с названием gold это #FFD700, то есть rgb(255, 215, 0). Это скорее яркий жёлто-золотой, чем металлический оттенок, поскольку плоский цвет не способен передать блеск настоящего золота. Для более металлического вида дизайнеры обычно сочетают его с тёмными золотыми оттенками вроде #B8860B, который в CSS называется darkgoldenrod.

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

Они несут ровно одну и ту же информацию, записанную по-разному. HEX записывает каждый из трёх каналов двумя шестнадцатеричными знаками, поэтому #FF7F50 это красный 255, зелёный 127, синий 80. RGB записывает те же числа в десятичном виде как rgb(255, 127, 80). Ни один не точнее другого; HEX просто короче набирать в CSS.

Тон, насыщенность и светлота. Тон это положение на цветовом круге от 0 до 360 градусов, насыщенность показывает, насколько цвет ярок, а светлота идёт от чёрного при 0% до белого при 100%. Для дизайна это самый удобный формат, потому что, сохраняя тон и меняя только светлоту, вы получаете набор оттенков, которые очевидно принадлежат друг другу.

В спецификации CSS 148 именованных цветов, включая transparent. Несколько названий указывают на одинаковые значения, в частности grey и gray, aqua и cyan, magenta и fuchsia. Полный список со значениями HEX и RGB приведён на этой странице.

Рекомендации по доступности требуют не менее 4,5 к 1 для обычного основного текста и 3 к 1 для крупного, что соответствует уровню AA. Более строгий уровень AAA требует 7 к 1. Этот инструмент вычисляет соотношение вашего цвета с белым и чёрным и показывает, какое из них проходит, чтобы вы сразу выбрали читаемый вариант.

Да. Восьмизначный HEX-код добавляет в конце два знака альфа-канала, где 00 полностью прозрачен, а FF полностью непрозрачен. Так, #FF000080 это красный примерно с 50% непрозрачности. Все современные браузеры это поддерживают, хотя более старая запись rgba() по-прежнему очень распространена.

Потому что 148 именованных цветов это крошечная выборка из примерно 16,7 миллиона, которые способен показать экран. Если ваше значение не попадает в одну из этих точек, инструмент находит ближайший именованный цвет, измеряя расстояние между ними в пространстве RGB, и предупреждает, что это приближение, а не совпадение.

Какой HEX-код у цвета?

Введите название цвета и получите сразу его значения HEX, RGB и HSL, либо вставьте любой код, чтобы найти ближайший именованный цвет CSS. Gold это #FFD700, coral это #FF7F50, а teal это #008080. В каждом результате также показаны затемнения, осветления и контраст с чёрным и белым.