命名颜色 · #D2D8F4
Flax Bloom
Flax Bloom 即 #D2D8F4：rgb(210 216 244)、hsl(229 61% 89%)、oklch(0.886 0.039 276)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Blue mean? → · Flax Bloom color name →
#D2D8F4
oklch(0.886 0.039 276)
颜色转换
- HEX
- #d2d8f4
- RGB
- rgb(210 216 244)
- HSL
- hsl(229 61% 89%)
- HWB
- hwb(229 82% 4%)
- OKLCH
- oklch(0.886 0.039 276)
- OKLab
- oklab(0.886 0.004 -0.039)
- CIE Lab
- lab(86.53 2 -14.49)
- LCH
- lch(86.53 14.63 277.9)
- CMYK
- cmyk(14% 11% 0% 4%)
浅色调 · 深色调 · 灰色调
浅色调
- D6DCF5
- DBE0F6
- DFE4F7
- E4E8F9
- E8EBFA
- EDEFFB
- F1F3FC
- F6F7FD
- FAFBFE
深色调
- B6BCD4
- 9BA0B5
- 818597
- 686B7A
- 50535E
- 393B44
- 24252B
- 101114
- 020203
灰色调
- C9CFE8
- C1C6DC
- B9BDD0
- B0B4C4
- A8ABB8
- A0A2AD
- 989AA1
- 909196
- 88888B
配色和谐
互补色 +180°
- D2D8F4
Flax Bloom
- E1DABD
≈ Coconut Cream
类似色 -30° +30°
- D2D8F4
Flax Bloom
- C5DDF2
≈ Island View
- E0D3EF
≈ Japan Blush
三角配色 +120° +240°
- D2D8F4
Flax Bloom
- F2D1C8
≈ Comical Coral
- C6E2CF
≈ Enchanted
分裂互补色 +150° +210°
- D2D8F4
Flax Bloom
- ECD5BF
≈ Speckled Eggs
- D3DFC3
≈ Dream Seascape
四角配色 +90° +180° +270°
- D2D8F4
Flax Bloom
- F2CFD5
≈ Pink Cupcake
- E1DABD
≈ Coconut Cream
- BEE2DD
≈ Sea Breath
对比度与无障碍
Ag
Fail白底
WCAG 1.41:1 · APCA Lc 20
Ag
AAA黑底
WCAG 14.86:1 · APCA Lc 84
最佳文字颜色: #000000
WCAG 14.86:1 (AAA) · APCA Lc 84
Contrast pairs
代码片段
CSS
:root {
--flax-bloom: #d2d8f4;
--flax-bloom-rgb: 210 216 244;
--flax-bloom-oklch: oklch(0.886 0.039 276);
}
.element {
color: var(--flax-bloom);
background-color: hsl(229 61% 89%);
border-color: oklch(0.886 0.039 276);
}Tailwind CSS v4
@theme {
--color-flax-bloom: #d2d8f4;
--color-flax-bloom-50: #f2f4ff;
--color-flax-bloom-100: #e4e7f5;
--color-flax-bloom-200: #d0d3e5;
--color-flax-bloom-300: #b2b6cc;
--color-flax-bloom-400: #989db6;
--color-flax-bloom-500: #7f84a1;
--color-flax-bloom-600: #6b7088;
--color-flax-bloom-700: #565a6d;
--color-flax-bloom-800: #3e4250;
--color-flax-bloom-900: #2b2d38;
--color-flax-bloom-950: #181a22;
}SCSS
$flax-bloom: #d2d8f4;
$flax-bloom-rgb: 210, 216, 244;
$flax-bloom-light: mix(#fff, $flax-bloom, 20%);
$flax-bloom-dark: mix(#000, $flax-bloom, 20%);
.element {
color: $flax-bloom;
box-shadow: 0 0 0 2px rgba($flax-bloom, 0.35);
}