🎨 Конвертер цветов
Вставьте цвет в любом формате – #3B82F6, значение RGB или HSL либо английское название цвета – и получите все остальные форматы, оценку контрастности для доступности и палитру светлых и темных оттенков.
Коротко: Цвет #3B82F6 – это RGB (59, 130, 246), HSL (217°, 91%, 60%) и CMYK (76%, 47%, 0%, 4%); его контрастность на белом – 3,68:1 (уровень AA только для крупного текста), на черном – 5,71:1 (уровень AA).
Оценок пока нет · Обновлено · Бесплатно · Без регистрации
Конвертер цветов: исходные данные
Результат
Цвет
#3B82F6
rgb(59, 130, 246)
| HEX | #3B82F6 |
| RGB | rgb(59, 130, 246) |
| HSL | hsl(217, 91%, 60%) |
| HSV | hsv(217, 76%, 96%) |
| CMYK | cmyk(76%, 47%, 0%, 4%) |
- Контрастность с белым
- 3,68:1 · AA только для крупного текста
- Контрастность с черным
- 5,71:1 · AA
- Лучший цвет текста
- Черный
Светлые оттенки (смешение с белым)
| Доля белого | Цвет | RGB | HSL |
|---|---|---|---|
| Исходный цвет | #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
| 10% | #4F8FF7 | rgb(79, 143, 247) | hsl(217, 91%, 64%) |
| 20% | #629BF8 | rgb(98, 155, 248) | hsl(217, 91%, 68%) |
| 30% | #76A8F9 | rgb(118, 168, 249) | hsl(217, 92%, 72%) |
| 40% | #89B4FA | rgb(137, 180, 250) | hsl(217, 92%, 76%) |
| 50% | #9DC1FB | rgb(157, 193, 251) | hsl(217, 92%, 80%) |
| 60% | #B1CDFB | rgb(177, 205, 251) | hsl(217, 90%, 84%) |
| 70% | #C4DAFC | rgb(196, 218, 252) | hsl(216, 90%, 88%) |
| 80% | #D8E6FD | rgb(216, 230, 253) | hsl(217, 90%, 92%) |
| 90% | #EBF3FE | rgb(235, 243, 254) | hsl(215, 90%, 96%) |
Темные оттенки (смешение с черным)
| Доля черного | Цвет | RGB | HSL |
|---|---|---|---|
| Исходный цвет | #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
| 10% | #3575DD | rgb(53, 117, 221) | hsl(217, 71%, 54%) |
| 20% | #2F68C5 | rgb(47, 104, 197) | hsl(217, 61%, 48%) |
| 30% | #295BAC | rgb(41, 91, 172) | hsl(217, 62%, 42%) |
| 40% | #234E94 | rgb(35, 78, 148) | hsl(217, 62%, 36%) |
| 50% | #1E417B | rgb(30, 65, 123) | hsl(217, 61%, 30%) |
| 60% | #183462 | rgb(24, 52, 98) | hsl(217, 61%, 24%) |
| 70% | #12274A | rgb(18, 39, 74) | hsl(218, 61%, 18%) |
| 80% | #0C1A31 | rgb(12, 26, 49) | hsl(217, 61%, 12%) |
| 90% | #060D19 | rgb(6, 13, 25) | hsl(218, 61%, 6%) |
Требования WCAG к контрастности
| Уровень | Обычный текст | Крупный текст (от 18 пунктов или от 14 пунктов полужирным) | На белом | На черном |
|---|---|---|---|---|
| AA | 4,5:1 | 3:1 | Только крупный текст | Соответствует |
| AAA | 7:1 | 4,5:1 | Не соответствует | Только крупный текст |
Как пользоваться конвертером цветов
Вставьте цвет в любом распространенном формате – #3B82F6, #38F, rgb(59, 130, 246), hsl(217, 91%, 60%), hsv(217, 76%, 96%), cmyk(76%, 47%, 0%, 4%) или английское название базового цвета, например teal. Вы получите все остальные форматы, образец цвета, оценку контрастности и палитру светлых и темных оттенков.
Формулы перевода
HEX → RGB: каждая пара шестнадцатеричных цифр – один канал, 00–FF = 0–255
CMYK: K = 1 − макс.(R′, G′, B′) · C = (1 − R′ − K) ÷ (1 − K), аналогично M и Y (R′ = R ÷ 255)
HSL: L = (макс. + мин.) ÷ 2 · S = (макс. − мин.) ÷ (1 − |2L − 1|) · H – по преобладающему каналу
Контрастность = (L1 + 0,05) ÷ (L2 + 0,05) по относительной яркости WCAG
Пример расчета
#3B82F6 делится на 3B, 82 и F6 = rgb(59, 130, 246). Самый большой канал – синий (0,965), поэтому K = 3,5% и C = (1 − 0,231 − 0,035) ÷ 0,965 = 76%, что дает cmyk(76%, 47%, 0%, 4%). В HSL это hsl(217, 91%, 60%). Относительная яркость цвета – 0,236, поэтому контрастность с белым составляет 3,68:1, а с черным – 5,71:1: для мелкого шрифта на таком фоне используйте черный текст.
Распространенные цвета
| Цвет | HEX | RGB | HSL |
|---|---|---|---|
| Красный | #FF0000 | 255, 0, 0 | 0°, 100%, 50% |
| Зеленый | #008000 | 0, 128, 0 | 120°, 100%, 25% |
| Синий | #0000FF | 0, 0, 255 | 240°, 100%, 50% |
| Оранжевый | #FFA500 | 255, 165, 0 | 39°, 100%, 50% |
| Сине-зеленый | #008080 | 0, 128, 128 | 180°, 100%, 25% |
| Серый | #808080 | 128, 128, 128 | 0°, 0%, 50% |
Советы
- Значения CMYK здесь – простой аппаратно-независимый перевод; для профессиональной печати конвертируйте цвета с цветовым профилем вашей типографии.
- Проверяйте контрастность каждой пары «текст – фон» в макете, а не только фирменного цвета.
Частые вопросы
Как перевести HEX в RGB?
Разбейте шесть шестнадцатеричных цифр на три пары и переведите каждую из шестнадцатеричной системы в десятичную. #3B82F6 → 3B = 59, 82 = 130, F6 = 246, то есть RGB (59, 130, 246).
Чем RGB отличается от CMYK?
RGB смешивает красный, зеленый и синий свет для экранов, а CMYK – голубую, пурпурную, желтую и черную краски для печати. Очень яркие и насыщенные экранные цвета не всегда удается воспроизвести в печати.
Чем HSL отличается от HSV?
Обе модели описывают тон как угол (0–360°) и насыщенность. Светлота в HSL идет от черного через чистый цвет к белому, а значение в HSV (его еще называют яркостью) – от черного до чистого цвета.
Какая контрастность нужна, чтобы текст был доступен?
Уровень AA стандарта WCAG 2 требует 4,5:1 для обычного текста и 3:1 для крупного (от 18 пунктов или от 14 пунктов полужирным). Уровень AAA требует 7:1 и 4,5:1.
Что такое светлые и темные оттенки?
Светлый оттенок – это цвет, смешанный с белым, поэтому он светлее; темный оттенок смешан с черным и потому темнее. Это быстрый способ собрать согласованную палитру из одного фирменного цвета.
Оцените конвертер цветов
На сайте показывается только средняя оценка. Сообщения об ошибках приходят прямо к нам на почту — мы их проверим и исправим. Подробнее: Методология и политика конфиденциальности.