命名颜色 · #DDAACC
Aristocratic Pink
Aristocratic Pink 即 #DDAACC：rgb(221 170 204)、hsl(320 43% 77%)、oklch(0.795 0.074 339.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Pink mean? → · Aristocratic Pink color name →
#DDAACC
oklch(0.795 0.074 339.1)
颜色转换
- HEX
- #ddaacc
- RGB
- rgb(221 170 204)
- HSL
- hsl(320 43% 77%)
- HWB
- hwb(320 67% 13%)
- OKLCH
- oklch(0.795 0.074 339.1)
- OKLab
- oklab(0.795 0.069 -0.027)
- CIE Lab
- lab(75.18 23.27 -9.78)
- LCH
- lch(75.18 25.24 337.2)
- CMYK
- cmyk(0% 23% 8% 13%)
浅色调 · 深色调 · 灰色调
浅色调
- E1B2D1
- E4BBD6
- E8C3DB
- EBCCE0
- EFD4E5
- F2DDEA
- F6E5F0
- F9EEF5
- FCF6FA
深色调
- C093B1
- A47D97
- 88687E
- 6E5365
- 553F4E
- 3D2D37
- 261B22
- 110B0F
- 020102
灰色调
- D4A6C4
- CAA2BC
- C19DB5
- B799AD
- AE95A5
- A5919E
- 9C8D96
- 92888F
- 898487
配色和谐
互补色 +180°
- DDAACC
Aristocratic Pink
- 93CBAB
≈ Peppermint Spray
类似色 -30° +30°
- DDAACC
Aristocratic Pink
- CAB0E1
≈ Lavender Field Dreamer
- E7A9B2
≈ Perennial Phlox
三角配色 +120° +240°
- DDAACC
Aristocratic Pink
- C8BD86
≈ Olive Hint
- 84C8DD
≈ Winter Chime
分裂互补色 +150° +210°
- DDAACC
Aristocratic Pink
- ADC693
≈ Geddy Green
- 82CCC6
≈ Blue Green Gem
四角配色 +90° +180° +270°
- DDAACC
Aristocratic Pink
- DCB488
≈ Butterscotch Sundae
- 93CBAB
≈ Peppermint Spray
- 97C1EA
≈ Salvia Blue
对比度与无障碍
Ag
Fail白底
WCAG 1.96:1 · APCA Lc 38
Ag
AAA黑底
WCAG 10.69:1 · APCA Lc 65
最佳文字颜色: #000000
WCAG 10.69:1 (AAA) · APCA Lc 65
Contrast pairs
代码片段
CSS
:root {
--aristocratic-pink: #ddaacc;
--aristocratic-pink-rgb: 221 170 204;
--aristocratic-pink-oklch: oklch(0.795 0.074 339.1);
}
.element {
color: var(--aristocratic-pink);
background-color: hsl(320 43% 77%);
border-color: oklch(0.795 0.074 339.1);
}Tailwind CSS v4
@theme {
--color-aristocratic-pink: #ddaacc;
--color-aristocratic-pink-50: #ffedfb;
--color-aristocratic-pink-100: #fadfef;
--color-aristocratic-pink-200: #ebc8de;
--color-aristocratic-pink-300: #d3a9c3;
--color-aristocratic-pink-400: #bd8ead;
--color-aristocratic-pink-500: #a77396;
--color-aristocratic-pink-600: #8d617f;
--color-aristocratic-pink-700: #714e66;
--color-aristocratic-pink-800: #53384c;
--color-aristocratic-pink-900: #3a2735;
--color-aristocratic-pink-950: #241520;
}SCSS
$aristocratic-pink: #ddaacc;
$aristocratic-pink-rgb: 221, 170, 204;
$aristocratic-pink-light: mix(#fff, $aristocratic-pink, 20%);
$aristocratic-pink-dark: mix(#000, $aristocratic-pink, 20%);
.element {
color: $aristocratic-pink;
box-shadow: 0 0 0 2px rgba($aristocratic-pink, 0.35);
}