#EC4899 Яркий Розовый

Q: Какой это цвет — #EC4899?

Яркий Розовый — это #EC4899, в верхнем регистре #EC4899. В RGB — rgb(236,72,153), в HSL примерно hsl(330 81% 60%), в OKLCH — oklch(0.656 0.212 354.3).

Q: Как применять Яркий Розовый в дизайне?

Выделите один фокусный элемент, держите основной текст нейтральным и проверьте контраст 3.53 на белом и 5.35 на чёрном.

Q: Доступен ли Яркий Розовый?

Контраст составляет 3.53 на белом (FAIL) и 5.35 на чёрном (AA). Для крупного текста используйте его только при уровне AA.

Преобразование цвета

CMYK profile: Coated FOGRA39 · Запись следует CSS Color 4 и правилам контраста WCAG 2.2.

Кратко

Название	Яркий Розовый
Транслитерация	Яркий Розовый
Традиция	цифровой цвет
Семейство	Красный
HEX	#EC4899
RGB	rgb(236,72,153)
HSL	hsl(330 81% 60%)
HSV	hsv(330, 69%, 93%)
OKLCH	oklch(0.656 0.212 354.3)
LAB	lab(56.85 68.81 -8.28)
XYZ	43,25,33
CMYK	cmyk(0.0% 69.5% 35.2% 7.5%)
RAL	#FA4402 · RAL orange[4] · RAL 2017

Об этом цвете

Яркий РозовыйКрасныйцифровой цвет

Срочность с пульсом

Яркий Розовый — это #EC4899, тон семейства Красный с ясным культурным происхождением. Сам по себе он читается как часть этого семейства; его корни (цифровой цвет) добавляют второй смысловой слой.

Совет дизайнеру

Сначала проверьте Яркий Розовый (#EC4899) на нейтральной поверхности: акцент из семейства Красный сделает его осознанным, а не декоративным.

Лучшее применение

Отдайте Яркий Розовый единственному элементу, который должен бросаться в глаза первым, а остальную палитру Красный оставьте ему в поддержку.

срочныйстрастныйсмелыйаппетитныйтёплый

Психология

Как воспринимается

срочныйстрастныйсмелыйаппетитныйтёплый

Психологический эффект

Яркий Розовый повышает воспринимаемую энергию композиции Красный и направляет взгляд к действию.

Эмоциональное воздействие

Он ощущается непосредственным и тёплым, поэтому оживляет сдержанную вёрстку, не делая её шумной.

Символика

Что означает

энергияаппетит и праздник

Культурное значение

В контексте, связанном с цифровой цвет, тон несёт местные отсылки, поэтому до кампании проверьте его символику.

Положительные ассоциации

Положительные ассоциации тяготеют к энергия, аппетит и праздник; потому он и появляется на приглашениях и в сезонных работах.

Осторожно в применении

Слишком большая площадь читается как опасность и агрессия при избытке, поэтому держите его в акцентах и малых полях.

Где встречается

Типичные задачи дизайна

Лендинги кампаний: Отдайте Яркий Розовый единственному элементу, который должен бросаться в глаза первым, а остальную палитру Красный оставьте ему в поддержку.
Системы журнальных обложек: Отдайте Яркий Розовый единственному элементу, который должен бросаться в глаза первым, а остальную палитру Красный оставьте ему в поддержку.
Этикетки упаковки продуктов: Отдайте Яркий Розовый единственному элементу, который должен бросаться в глаза первым, а остальную палитру Красный оставьте ему в поддержку.
Акценты статусов на дашборде: Отдайте Яркий Розовый единственному элементу, который должен бросаться в глаза первым, а остальную палитру Красный оставьте ему в поддержку.
Навигационные вывески в рознице: Отдайте Яркий Розовый единственному элементу, который должен бросаться в глаза первым, а остальную палитру Красный оставьте ему в поддержку.

Сочетание

Цвета, которые его дополняют

#00B788редакционные макеты, которым нужен один тёплый фокус

#AC0064интерфейсы, где акцент должен оставаться читаемым

#919C00упаковка, которая должна выглядеть аппетитно без крика

История

Пигменты и происхождение

До синтетических красителей Яркий Розовый составляли из минеральных и растительных пигментов; семейство Красный зависело от охры, марены и индиго. Экраны сегодня воспроизводят его стабильнее любого отдельного пигмента.

Вариации

Тёмные ступени затемняют, светлые осветляют, а угол тона остаётся прежним.

Профессиональный совет: Тёмные ступени затемняют, светлые осветляют, а угол тона остаётся прежним.

Тёмные ступени

Более тёмные ступени в том же тоне.

0% #EC4899

10% #D4418A

20% #BD3A7A

30% #A5326B

40% #8E2B5C

50% #76244D

60% #5E1D3D

70% #47162E

80% #2F0E1F

90% #18070F

100% #000000

Светлые ступени

Более светлые ступени для поверхностей и фона.

0% #EC4899

10% #EE5AA3

20% #F06DAD

30% #F27FB8

40% #F491C2

50% #F6A4CC

60% #F7B6D6

70% #F9C8E0

80% #FBDAEB

90% #FDEDF5

100% #FFFFFF

Шкала дизайна 50–950

50#FFE6F8100#FFD3F1200#FFB1DF300#FF8ECA400#FF6AB1500#E44093600#C6257A700#A50963800#83004C900#610036950#420024

Значение тёмной темы (AA): #DF3B8E · 4.62:1

Сценарии

Тёмные ступени → ховер, тени, глубина
Светлые ступени → светлые акценты, поверхности
Баланс → целостные цветовые системы

Совет по дизайну

Достаточно одного ведущего тона, одного поддерживающего и одного акцента.

Сравнение цветовых систем

Ближайший именованный цвет в каждой традиции и дизайн-системе по OKLCH ΔE. Чем меньше значение, тем ближе.

Азиатские традиции

गुलाल IN ΔE 0.020

品红 CN ΔE 0.023

柿色 JP ΔE 0.045

Показать все (6)

紅 KR ΔE 0.070

Ягаан MN ΔE 0.070

สีแดง TH ΔE 0.079

金 TB ΔE 0.112

Emas ID ΔE 0.119

Đỏ VN ΔE 0.126

Дизайн-системы

Pink 500 UnoCSS ΔE 0.000

Pink 500 Panda ΔE 0.000

Red 600 Open Color ΔE 0.020

Показать все (11)

Red 5 Ant Design ΔE 0.021

Crimson 9 Radix ΔE 0.022

Orange 600 Tailwind ΔE 0.026

Rose 11 Polaris ΔE 0.028

Red 500 Chakra ΔE 0.045

Office 90 Fluent ΔE 0.053

Brand (contract) vanilla-extract ΔE 0.058

Error 60 Material ΔE 0.060

Pink Bootstrap ΔE 0.060

Sponsors Primer ΔE 0.094

Secondary StyleX ΔE 0.224

RAL Classic

RAL orange[4] · RAL 2017 RAL ΔE 0.028

Попробовать другой цвет

Могут ли три ступени одного оттенка работать вместе

Три ступени из шкалы 50–950 цвета «Яркий Розовый»: оттенок тот же, различается только светлота. Ниже — контраст WCAG, когда одна ступень служит текстом на другой.

200#FFB1DF

500#E44093

800#83004C

200 ↔ 500: 2.31:1 (FAIL)
500 ↔ 800: 2.64:1 (FAIL)
200 ↔ 800: 6.09:1 (AA)

Пар с 4,5:1 (основной текст AA): 1 из 3. Пар с 3:1 (крупный текст, иконки, рамки): 1 из 3. Остальные ниже 3:1 — текст на них лучше не размещать.

Цветовые сочетания

Вращайте цветовой круг, сохраняя светлоту.

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

Три шага сохраняют читаемость и осознанность цвета.

Почему работает

Перцептивное обоснование палитры.

Все шесть наборов построены поворотом оттенка при близкой светлоте, поэтому лучший контраст внутри набора лежит в диапазоне 1.01:1–1.74:1. Используйте их для плашек, графиков и фигур, а не как текст друг на друге; для текста берите нейтральный цвет или более тёмную ступень той же шкалы.

Комплементарная

Напротив в цветовом круге; контраст обостряет фокусный цвет.

#EC4899#00B788

Лучшее применение: Призывы к действию и акценты одной функции

Раздельно-комплементарная

Два соседа противоположного тона; мягче прямого контраста.

#EC4899#00B027#00B1CC

Лучшее применение: Сбалансированные маркетинговые макеты с двумя акцентами

Триада

Три равноудалённых тона; живо, но нужен один ведущий голос.

#EC4899#919C00#009FFD

Лучшее применение: Айдентика событий и игривые журнальные развороты

Аналоговая

Соседние тоны круга; спокойно, цельно и легко читается взглядом.

#CD58D8#EC4899#F8484B

Лучшее применение: Фоны, графики и спокойные страницы продукта

Монохромная

Один тон по ступеням светлоты; дисциплинированно и премиально.

#AA346E#EC4899#F17BB6

Лучшее применение: Дизайн-системы, упаковка и типографическая иерархия

Тетрада

Две комплементарные пары; богато, но требует строгих пропорций.

#EC4899#ED5F00#00B788#009FFD

Лучшее применение: Сложные дашборды и бренды с несколькими сервисами

Экспорт шкалы

CSS

:root {
  --brand-50: #FFE6F8;
  --brand-100: #FFD3F1;
  --brand-200: #FFB1DF;
  --brand-300: #FF8ECA;
  --brand-400: #FF6AB1;
  --brand-500: #E44093;
  --brand-600: #C6257A;
  --brand-700: #A50963;
  --brand-800: #83004C;
  --brand-900: #610036;
  --brand-950: #420024;
}

Tailwind

theme: {
  extend: {
    colors: {
      brand: {
        50: '#FFE6F8',
        100: '#FFD3F1',
        200: '#FFB1DF',
        300: '#FF8ECA',
        400: '#FF6AB1',
        500: '#E44093',
        600: '#C6257A',
        700: '#A50963',
        800: '#83004C',
        900: '#610036',
        950: '#420024',
      },
    },
  },
}

Figma

{
  "brand": {
    "50": {
      "$type": "color",
      "$value": "#FFE6F8"
    },
    "100": {
      "$type": "color",
      "$value": "#FFD3F1"
    },
    "200": {
      "$type": "color",
      "$value": "#FFB1DF"
    },
    "300": {
      "$type": "color",
      "$value": "#FF8ECA"
    },
    "400": {
      "$type": "color",
      "$value": "#FF6AB1"
    },
    "500": {
      "$type": "color",
      "$value": "#E44093"
    },
    "600": {
      "$type": "color",
      "$value": "#C6257A"
    },
    "700": {
      "$type": "color",
      "$value": "#A50963"
    },
    "800": {
      "$type": "color",
      "$value": "#83004C"
    },
    "900": {
      "$type": "color",
      "$value": "#610036"
    },
    "950": {
      "$type": "color",
      "$value": "#420024"
    }
  }
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="120">
  <rect x="0" y="0" width="100" height="90" fill="#FFE6F8"/>
  <rect x="100" y="0" width="100" height="90" fill="#FFD3F1"/>
  <rect x="200" y="0" width="100" height="90" fill="#FFB1DF"/>
  <rect x="300" y="0" width="100" height="90" fill="#FF8ECA"/>
  <rect x="400" y="0" width="100" height="90" fill="#FF6AB1"/>
  <rect x="500" y="0" width="100" height="90" fill="#E44093"/>
  <rect x="600" y="0" width="100" height="90" fill="#C6257A"/>
  <rect x="700" y="0" width="100" height="90" fill="#A50963"/>
  <rect x="800" y="0" width="100" height="90" fill="#83004C"/>
  <rect x="900" y="0" width="100" height="90" fill="#610036"/>
  <rect x="1000" y="0" width="100" height="90" fill="#420024"/>
  <text x="50" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">50</text>
  <text x="150" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">100</text>
  <text x="250" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">200</text>
  <text x="350" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">300</text>
  <text x="450" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">400</text>
  <text x="550" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">500</text>
  <text x="650" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">600</text>
  <text x="750" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">700</text>
  <text x="850" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">800</text>
  <text x="950" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">900</text>
  <text x="1050" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">950</text>
</svg>

iOS

extension UIColor {
  static let brand50 = UIColor(red: 1.000, green: 0.902, blue: 0.973, alpha: 1.0)
  static let brand100 = UIColor(red: 1.000, green: 0.827, blue: 0.945, alpha: 1.0)
  static let brand200 = UIColor(red: 1.000, green: 0.694, blue: 0.875, alpha: 1.0)
  static let brand300 = UIColor(red: 1.000, green: 0.557, blue: 0.792, alpha: 1.0)
  static let brand400 = UIColor(red: 1.000, green: 0.416, blue: 0.694, alpha: 1.0)
  static let brand500 = UIColor(red: 0.894, green: 0.251, blue: 0.576, alpha: 1.0)
  static let brand600 = UIColor(red: 0.776, green: 0.145, blue: 0.478, alpha: 1.0)
  static let brand700 = UIColor(red: 0.647, green: 0.035, blue: 0.388, alpha: 1.0)
  static let brand800 = UIColor(red: 0.514, green: 0.000, blue: 0.298, alpha: 1.0)
  static let brand900 = UIColor(red: 0.380, green: 0.000, blue: 0.212, alpha: 1.0)
  static let brand950 = UIColor(red: 0.259, green: 0.000, blue: 0.141, alpha: 1.0)
}

Android

<resources>
  <color name="brand_50">#FFE6F8</color>
  <color name="brand_100">#FFD3F1</color>
  <color name="brand_200">#FFB1DF</color>
  <color name="brand_300">#FF8ECA</color>
  <color name="brand_400">#FF6AB1</color>
  <color name="brand_500">#E44093</color>
  <color name="brand_600">#C6257A</color>
  <color name="brand_700">#A50963</color>
  <color name="brand_800">#83004C</color>
  <color name="brand_900">#610036</color>
  <color name="brand_950">#420024</color>
</resources>

Принципы

Баланс

Достаточно одного ведущего тона, одного поддерживающего и одного акцента.

Контраст

До релиза проверьте основной текст на белом и на чёрном.

Гармония

Вращайте цветовой круг, сохраняя светлоту.

Проверка контраста

До релиза проверьте основной текст на белом и на чёрном.

Цвет текста

Фон

3.53 :1

FAIL

Цитата

Контраст WCAG

Предпросмотр

Aa / Bb

#EC4899 · Яркий Розовый

Стандарты контраста WCAG

WCAG 2.2 задаёт минимальный контраст для текста и элементов интерфейса. #EC4899 даёт 3.53:1 к белому (FAIL) и 5.35:1 к чёрному (AA). Выберите порог по таблице ниже в зависимости от размера текста.

Уровень	Обычный текст	Крупный текст (18pt+ / 14pt жирный)	Иконки и элементы UI
AAA	7 : 1	4.5 : 1	—
AA	4.5 : 1	3 : 1	3 : 1
Не пройдено	< 4.5 : 1	< 3 : 1	< 3 : 1

Крупный текст — 18pt обычный или 14pt жирный. Элементам UI нужен контраст 3:1 с соседними цветами. AA — обычная база, AAA — усиленный уровень.

Технические форматы

Запись в цветовых пространствах

HEX

#EC4899

CSS Color 4

RGB

236,72,153

sRGB / D65

HSL

330,81,60

HSL

OKLCH

oklch(0.656 0.212 354.3)

perceptual

LAB

57,69,-8

CIE Lab

LCH

57,69,353

CIE LCH

XYZ

43,25,33

CIE XYZ

LUV

57,100,-24

CIE LUV

HWB

330,28,7

CSS HWB

CMYK

0,69,35,7

Практические форматы

Готовые значения

CSS

color: #EC4899;

custom properties

Tailwind

bg-[#EC4899] text-[#FFF]

arbitrary value

Android

#FFEC4899

ARGB

Flutter

Color(0xFFEC4899)

dart:ui

Photoshop

R 236 G 72 B 153 · C 0 M 69 Y 35 K 7

RGB / CMYK

CMYK 0,69,35,7

FOGRA39

Анализ цвета

Измеренные свойства цвета

Светлота

0.248

relative luminance · warm

Контраст

3.53 : 1

vs white · FAIL · warm

Контраст

5.35 : 1

vs black · AA · warm

Тон

330°

saturation 81% · warm

LCH

57,69,353

lightness 60% · warm

ΔE

16.1

品红 #EC3A78 · warm

Симулятор дальтонизма

Как выглядит при нарушении цветового зрения

Предпросмотр

#EC4899

Protanopia

#50639D

Deuteranopia

#727A95

Tritanopia

#FF4761

Как выглядит при нарушении цветового зрения · ΔE 16.1