Named color · #D2D8F4
Flax Bloom
Flax Bloom is #D2D8F4: rgb(210 216 244), hsl(229 61% 89%), oklch(0.886 0.039 276). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Flax Bloom color name →
#D2D8F4
oklch(0.886 0.039 276)
Color conversions
- 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%)
Tints · Shades · Tones
Tints
- D6DCF5
- DBE0F6
- DFE4F7
- E4E8F9
- E8EBFA
- EDEFFB
- F1F3FC
- F6F7FD
- FAFBFE
Shades
- B6BCD4
- 9BA0B5
- 818597
- 686B7A
- 50535E
- 393B44
- 24252B
- 101114
- 020203
Tones
- C9CFE8
- C1C6DC
- B9BDD0
- B0B4C4
- A8ABB8
- A0A2AD
- 989AA1
- 909196
- 88888B
Color harmonies
Complementary +180°
- D2D8F4
Flax Bloom
- E1DABD
≈ Coconut Cream
Analogous -30° +30°
- D2D8F4
Flax Bloom
- C5DDF2
≈ Island View
- E0D3EF
≈ Japan Blush
Triadic +120° +240°
- D2D8F4
Flax Bloom
- F2D1C8
≈ Comical Coral
- C6E2CF
≈ Enchanted
Split-complementary +150° +210°
- D2D8F4
Flax Bloom
- ECD5BF
≈ Speckled Eggs
- D3DFC3
≈ Dream Seascape
Tetradic +90° +180° +270°
- D2D8F4
Flax Bloom
- F2CFD5
≈ Pink Cupcake
- E1DABD
≈ Coconut Cream
- BEE2DD
≈ Sea Breath
Contrast & accessibility
Ag
FailOn white
WCAG 1.41:1 · APCA Lc 20
Ag
AAAOn black
WCAG 14.86:1 · APCA Lc 84
Best text color: #000000
WCAG 14.86:1 (AAA) · APCA Lc 84
Contrast pairs
Code snippets
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);
}