命名颜色 · #802280
Hello Darkness My Old Friend
Hello Darkness My Old Friend 即 #802280：rgb(128 34 128)、hsl(300 58% 32%)、oklch(0.44 0.168 328)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Purple mean? → · Hello Darkness My Old Friend color name →
#802280
oklch(0.44 0.168 328)
颜色转换
- HEX
- #802280
- RGB
- rgb(128 34 128)
- HSL
- hsl(300 58% 32%)
- HWB
- hwb(300 13% 50%)
- OKLCH
- oklch(0.44 0.168 328)
- OKLab
- oklab(0.44 0.143 -0.089)
- CIE Lab
- lab(32.39 48.58 -32.02)
- LCH
- lch(32.39 58.19 326.6)
- CMYK
- cmyk(0% 73% 0% 50%)
浅色调 · 深色调 · 灰色调
浅色调
- 8E3C8D
- 9B5299
- A868A6
- B57DB3
- C292C0
- CEA7CC
- DBBDD9
- E7D3E6
- F3E9F2
深色调
- 6E1C6E
- 5D165D
- 4D114D
- 3D0B3D
- 2E072E
- 1F031F
- 120112
- 060006
- 010001
灰色调
- 812F81
- 823B81
- 834581
- 834E81
- 835781
- 836081
- 836881
- 827081
- 817881
配色和谐
互补色 +180°
- 802280
Hello Darkness My Old Friend
- 006425
≈ Woodland Wonder
类似色 -30° +30°
- 802280
Hello Darkness My Old Friend
- 6033A1
≈ Rebecca Purple
- 941152
≈ Wine Grape
三角配色 +120° +240°
- 802280
Hello Darkness My Old Friend
- 674F00
≈ Olive Brown
- 005E68
≈ Fish Tale
分裂互补色 +150° +210°
- 802280
Hello Darkness My Old Friend
- 4E5900
≈ Kyuri Green
- 006152
≈ Alpine Green
四角配色 +90° +180° +270°
- 802280
Hello Darkness My Old Friend
- 7C4100
≈ Hazelnut Chocolate
- 006425
≈ Woodland Wonder
- 005982
≈ High Profile
对比度与无障碍
Ag
AAA白底
WCAG 8.54:1 · APCA Lc 88
Ag
Fail黑底
WCAG 2.45:1 · APCA Lc 14
最佳文字颜色: #FFFFFF
WCAG 8.54:1 (AAA) · APCA Lc 88
Contrast pairs
代码片段
CSS
:root {
--hello-darkness-my-old-friend: #802280;
--hello-darkness-my-old-friend-rgb: 128 34 128;
--hello-darkness-my-old-friend-oklch: oklch(0.44 0.168 328);
}
.element {
color: var(--hello-darkness-my-old-friend);
background-color: hsl(300 58% 32%);
border-color: oklch(0.44 0.168 328);
}Tailwind CSS v4
@theme {
--color-hello-darkness-my-old-friend: #802280;
--color-hello-darkness-my-old-friend-50: #ffe4ff;
--color-hello-darkness-my-old-friend-100: #ffd4ff;
--color-hello-darkness-my-old-friend-200: #febaf7;
--color-hello-darkness-my-old-friend-300: #e897e0;
--color-hello-darkness-my-old-friend-400: #d277d0;
--color-hello-darkness-my-old-friend-500: #bf55bd;
--color-hello-darkness-my-old-friend-600: #a149a0;
--color-hello-darkness-my-old-friend-700: #813a80;
--color-hello-darkness-my-old-friend-800: #5f2a61;
--color-hello-darkness-my-old-friend-900: #421c44;
--color-hello-darkness-my-old-friend-950: #2b0c2c;
}SCSS
$hello-darkness-my-old-friend: #802280;
$hello-darkness-my-old-friend-rgb: 128, 34, 128;
$hello-darkness-my-old-friend-light: mix(#fff, $hello-darkness-my-old-friend, 20%);
$hello-darkness-my-old-friend-dark: mix(#000, $hello-darkness-my-old-friend, 20%);
.element {
color: $hello-darkness-my-old-friend;
box-shadow: 0 0 0 2px rgba($hello-darkness-my-old-friend, 0.35);
}