命名颜色 · #A379AA
Pleasant Dream
Pleasant Dream 即 #A379AA:rgb(163 121 170)、hsl(291 22% 57%)、oklch(0.634 0.086 321.6)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度,以及 CSS、Tailwind v4 和 SCSS 代码。
What does Purple mean? → · Pleasant Dream color name →
#A379AA
oklch(0.634 0.086 321.6)
颜色转换
- HEX
- #a379aa
- RGB
- rgb(163 121 170)
- HSL
- hsl(291 22% 57%)
- HWB
- hwb(291 47% 33%)
- OKLCH
- oklch(0.634 0.086 321.6)
- OKLab
- oklab(0.634 0.068 -0.054)
- CIE Lab
- lab(56.38 23.34 -19.63)
- LCH
- lch(56.38 30.5 319.9)
- CMYK
- cmyk(4% 29% 0% 33%)
浅色调 · 深色调 · 灰色调
浅色调
- AC86B2
- B593BB
- BEA0C3
- C8ADCC
- D1BBD4
- DAC8DD
- E3D6E5
- ECE3EE
- F6F1F6
深色调
- 8D6893
- 78587D
- 634868
- 4F3953
- 3C2B3F
- 2A1D2D
- 19101B
- 0A050B
- 010101
灰色调
- A07AA6
- 9C7BA2
- 997C9E
- 957C99
- 927D95
- 8E7E91
- 8B7E8D
- 877F89
- 848084
配色和谐
互补色 +180°
- A379AA
Pleasant Dream
- 6D9867
≈ Leafy
类似色 -30° +30°
- A379AA
Pleasant Dream
- 8B81BB
≈ Bravo!
- B37590
≈ So Long Shadow
三角配色 +120° +240°
- A379AA
Pleasant Dream
- A5854A
≈ Kiss Candy
- 3E9AA0
≈ Water Carrier
分裂互补色 +150° +210°
- A379AA
Pleasant Dream
- 8C9050
≈ Fair and Square
- 4D9C84
≈ Wintergreen Shadow
四角配色 +90° +180° +270°
- A379AA
Pleasant Dream
- B47B59
≈ Japanese Wax Tree
- 6D9867
≈ Leafy
- 4F94B6
≈ Heritage Blue
对比度与无障碍
Ag
Fail白底
WCAG 3.57:1 · APCA Lc 63
Ag
AA黑底
WCAG 5.87:1 · APCA Lc 38
最佳文字颜色: #000000
WCAG 5.87:1 (AA) · APCA Lc 38
Contrast pairs
代码片段
CSS
:root {
--pleasant-dream: #a379aa;
--pleasant-dream-rgb: 163 121 170;
--pleasant-dream-oklch: oklch(0.634 0.086 321.6);
}
.element {
color: var(--pleasant-dream);
background-color: hsl(291 22% 57%);
border-color: oklch(0.634 0.086 321.6);
}Tailwind CSS v4
@theme {
--color-pleasant-dream: #a379aa;
--color-pleasant-dream-50: #ffedff;
--color-pleasant-dream-100: #f7dff9;
--color-pleasant-dream-200: #e7c8ea;
--color-pleasant-dream-300: #cea9d1;
--color-pleasant-dream-400: #b68ebd;
--color-pleasant-dream-500: #a173a8;
--color-pleasant-dream-600: #88618e;
--color-pleasant-dream-700: #6d4e72;
--color-pleasant-dream-800: #503855;
--color-pleasant-dream-900: #37273b;
--color-pleasant-dream-950: #221525;
}SCSS
$pleasant-dream: #a379aa;
$pleasant-dream-rgb: 163, 121, 170;
$pleasant-dream-light: mix(#fff, $pleasant-dream, 20%);
$pleasant-dream-dark: mix(#000, $pleasant-dream, 20%);
.element {
color: $pleasant-dream;
box-shadow: 0 0 0 2px rgba($pleasant-dream, 0.35);
}