命名颜色 · #CABAE0
Viking Diva
Viking Diva 即 #CABAE0：rgb(202 186 224)、hsl(265 38% 80%)、oklch(0.814 0.055 304.3)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Purple mean? → · Viking Diva color name →
#CABAE0
oklch(0.814 0.055 304.3)
颜色转换
- HEX
- #cabae0
- RGB
- rgb(202 186 224)
- HSL
- hsl(265 38% 80%)
- HWB
- hwb(265 73% 12%)
- OKLCH
- oklch(0.814 0.055 304.3)
- OKLab
- oklab(0.814 0.031 -0.046)
- CIE Lab
- lab(77.79 11.21 -16.95)
- LCH
- lch(77.79 20.32 303.5)
- CMYK
- cmyk(10% 17% 0% 12%)
浅色调 · 深色调 · 灰色调
浅色调
- CFC1E3
- D4C8E6
- DACEEA
- DFD5ED
- E4DCF0
- EAE3F3
- EFEAF6
- F4F1F9
- FAF8FC
深色调
- AFA1C3
- 9589A6
- 7C728A
- 645C70
- 4D4656
- 37323E
- 221E27
- 0F0D12
- 020202
灰色调
- C2B4D6
- BBAECC
- B3A8C2
- ACA2B9
- A49DAF
- 9D97A5
- 96919C
- 8E8B93
- 878689
配色和谐
互补色 +180°
- CABAE0
Viking Diva
- BAC9A2
≈ Gleam
类似色 -30° +30°
- CABAE0
Viking Diva
- B7C0E7
≈ Spoiled Rotten
- DAB5D1
≈ Purple Poodle
三角配色 +120° +240°
- CABAE0
Viking Diva
- DCBB9E
≈ Holmes Cream
- 9ACFC6
≈ Opal Turquoise
分裂互补色 +150° +210°
- CABAE0
Viking Diva
- CEC29A
≈ Inviting Gesture
- A7CDB2
≈ Calculus
四角配色 +90° +180° +270°
- CABAE0
Viking Diva
- E4B6AB
≈ Salmon Grey
- BAC9A2
≈ Gleam
- 9ACCD8
≈ Blue Stream
对比度与无障碍
Ag
Fail白底
WCAG 1.80:1 · APCA Lc 34
Ag
AAA黑底
WCAG 11.61:1 · APCA Lc 69
最佳文字颜色: #000000
WCAG 11.61:1 (AAA) · APCA Lc 69
Contrast pairs
代码片段
CSS
:root {
--viking-diva: #cabae0;
--viking-diva-rgb: 202 186 224;
--viking-diva-oklch: oklch(0.814 0.055 304.3);
}
.element {
color: var(--viking-diva);
background-color: hsl(265 38% 80%);
border-color: oklch(0.814 0.055 304.3);
}Tailwind CSS v4
@theme {
--color-viking-diva: #cabae0;
--color-viking-diva-50: #f9f1ff;
--color-viking-diva-100: #ece3f7;
--color-viking-diva-200: #dacfe7;
--color-viking-diva-300: #beb1ce;
--color-viking-diva-400: #a597b9;
--color-viking-diva-500: #8e7da4;
--color-viking-diva-600: #786a8b;
--color-viking-diva-700: #60556f;
--color-viking-diva-800: #463e53;
--color-viking-diva-900: #302b3a;
--color-viking-diva-950: #1d1824;
}SCSS
$viking-diva: #cabae0;
$viking-diva-rgb: 202, 186, 224;
$viking-diva-light: mix(#fff, $viking-diva, 20%);
$viking-diva-dark: mix(#000, $viking-diva, 20%);
.element {
color: $viking-diva;
box-shadow: 0 0 0 2px rgba($viking-diva, 0.35);
}