Irodori彩り

#EC4899 鲜粉

生成颜色代码、变体、配色，并检查对比度。

撰文与审校 Steve 最近更新

颜色转换

#EC4899鲜粉

CMYK profile: Coated FOGRA39 · 数值遵循 CSS Color 4 记法与 WCAG 2.2 对比度规则。

速览

名称鲜粉
读音转写鲜粉
文化体系数字色彩
色系红
HEX#EC4899
RGBrgb(236,72,153)
HSLhsl(330 81% 60%)
HSVhsv(330, 69%, 93%)
OKLCHoklch(0.656 0.212 354.3)
LABlab(56.85 68.81 -8.28)
XYZ43,25,33
CMYKcmyk(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 经典色

RAL orange[4] · RAL 2017 RAL ΔE 0.028
用任意颜色试试

同族三档能不能一起用

从「鲜粉」的 50–950 色阶里取 200 / 500 / 800 三档：同一个色相，只差明度。下面是它们互为文字与背景时的 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）

三对里达到 AA 正文（4.5:1）的有 1 对；达到 3:1（大字、图标、描边）的有 1 对。剩下的组合低于 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 粗体）图标与界面元素
AAA7 : 14.5 : 1—
AA4.5 : 13 : 13 : 1
不通过< 4.5 : 1< 3 : 1< 3 : 1

大号文字指 18pt 常规或 14pt 粗体；界面元素与相邻色需达到 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

print

实用格式

可直接使用的值

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

Print
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

相近色

按 ΔE 排序，从 Irodori 全色库中找出最接近的颜色。

गुलाल #E83E8CΔE 4.9 浅粉 #FF69B4ΔE 10.0 鲜粉 #C71585ΔE 14.1 鲜粉 #FF1493ΔE 16.0 品红 #EC3A78ΔE 16.1 鲜粉 #FF0084ΔE 19.0

色盲模拟

色觉缺陷下的观感

预览
#EC4899
Protanopia
#50639D
Deuteranopia
#727A95
Tritanopia
#FF4761

色觉缺陷下的观感 · ΔE 16.1

创意维度

文化、情绪与故事

情绪
紧迫, 热烈, 大胆, 诱人, 温暖

它常被读作能量、温暖、自信，并带一点仪式感。

色系
红 · oklch(0.656 0.212 354.3)

它常被读作能量、温暖、自信，并带一点仪式感。

用法
营销落地页

它常被读作能量、温暖、自信，并带一点仪式感。

风格
带着脉搏的紧迫感

它常被读作能量、温暖、自信，并带一点仪式感。

灵感来源
数字色彩

它常被读作能量、温暖、自信，并带一点仪式感。

常见问题

#EC4899 是什么颜色？
鲜粉 的色值是 #EC4899，大写写作 #EC4899。RGB 为 rgb(236,72,153)，HSL 约为 hsl(330 81% 60%)，OKLCH 为 oklch(0.656 0.212 354.3)。
设计中如何使用 鲜粉？
只给它一个视觉焦点，正文保持中性，并确认对白 3.53、对黑 5.35 的对比度。
鲜粉 具备无障碍性吗？
对白对比度为 3.53（FAIL），对黑为 5.35（AA）。级别达到 AA 时才可用于大字号。