命名颜色 · #D4C0DF
Purple Whisper
Purple Whisper 即 #D4C0DF：rgb(212 192 223)、hsl(279 33% 81%)、oklch(0.834 0.048 313.7)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Purple mean? → · Purple Whisper color name →
#D4C0DF
oklch(0.834 0.048 313.7)
颜色转换
- HEX
- #d4c0df
- RGB
- rgb(212 192 223)
- HSL
- hsl(279 33% 81%)
- HWB
- hwb(279 75% 13%)
- OKLCH
- oklch(0.834 0.048 313.7)
- OKLab
- oklab(0.834 0.033 -0.035)
- CIE Lab
- lab(80.13 11.49 -12.83)
- LCH
- lch(80.13 17.22 311.8)
- CMYK
- cmyk(5% 14% 0% 13%)
浅色调 · 深色调 · 灰色调
浅色调
- D8C6E2
- DDCCE5
- E1D3E9
- E5D9EC
- E9DFEF
- EEE6F2
- F2ECF5
- F6F2F9
- FBF9FC
深色调
- B8A7C2
- 9D8EA5
- 83768A
- 695F6F
- 514956
- 3A343D
- 242027
- 100E12
- 020202
灰色调
- CBB9D5
- C3B3CB
- BAACC2
- B2A6B8
- A9A0AE
- A199A5
- 98939C
- 908C92
- 888689
配色和谐
互补色 +180°
- D4C0DF
Purple Whisper
- BCD0B1
≈ Apple Ice
类似色 -30° +30°
- D4C0DF
Purple Whisper
- C4C5E7
≈ Powdered Granite
- E0BDD0
≈ Scandalous Rose
三角配色 +120° +240°
- D4C0DF
Purple Whisper
- DCC5A7
≈ Sand Motif
- A5D3D1
≈ Crystal Aqua
分裂互补色 +150° +210°
- D4C0DF
Purple Whisper
- CDCBA7
≈ Crisp Celery
- ADD3C0
≈ Misty Jade
四角配色 +90° +180° +270°
- D4C0DF
Purple Whisper
- E5BFB0
≈ Adorable
- BCD0B1
≈ Apple Ice
- A8D0E0
≈ Flemish Blue
对比度与无障碍
Ag
Fail白底
WCAG 1.69:1 · APCA Lc 30
Ag
AAA黑底
WCAG 12.40:1 · APCA Lc 73
最佳文字颜色: #000000
WCAG 12.40:1 (AAA) · APCA Lc 73
Contrast pairs
代码片段
CSS
:root {
--purple-whisper: #d4c0df;
--purple-whisper-rgb: 212 192 223;
--purple-whisper-oklch: oklch(0.834 0.048 313.7);
}
.element {
color: var(--purple-whisper);
background-color: hsl(279 33% 81%);
border-color: oklch(0.834 0.048 313.7);
}Tailwind CSS v4
@theme {
--color-purple-whisper: #d4c0df;
--color-purple-whisper-50: #fbf1ff;
--color-purple-whisper-100: #eee3f3;
--color-purple-whisper-200: #dccee2;
--color-purple-whisper-300: #c1b0c8;
--color-purple-whisper-400: #a997b3;
--color-purple-whisper-500: #927d9d;
--color-purple-whisper-600: #7b6a85;
--color-purple-whisper-700: #63556a;
--color-purple-whisper-800: #483e4f;
--color-purple-whisper-900: #322a37;
--color-purple-whisper-950: #1e1822;
}SCSS
$purple-whisper: #d4c0df;
$purple-whisper-rgb: 212, 192, 223;
$purple-whisper-light: mix(#fff, $purple-whisper, 20%);
$purple-whisper-dark: mix(#000, $purple-whisper, 20%);
.element {
color: $purple-whisper;
box-shadow: 0 0 0 2px rgba($purple-whisper, 0.35);
}