Named color · #CCCFE2
Wildflower Prairie
Wildflower Prairie is #CCCFE2: rgb(204 207 226), hsl(232 27% 84%), oklch(0.858 0.026 278.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Wildflower Prairie color name →
#CCCFE2
oklch(0.858 0.026 278.7)
Color conversions
- HEX
- #cccfe2
- RGB
- rgb(204 207 226)
- HSL
- hsl(232 27% 84%)
- HWB
- hwb(232 80% 11%)
- OKLCH
- oklch(0.858 0.026 278.7)
- OKLab
- oklab(0.858 0.004 -0.026)
- CIE Lab
- lab(83.32 1.67 -9.8)
- LCH
- lch(83.32 9.94 279.7)
- CMYK
- cmyk(10% 8% 0% 11%)
Tints · Shades · Tones
Tints
- D1D4E5
- D6D8E8
- DBDDEB
- E0E2EE
- E5E7F1
- EAECF3
- EFF0F6
- F5F5F9
- FAFAFC
Shades
- B1B4C4
- 9799A8
- 7E7F8C
- 656771
- 4E4F57
- 37383E
- 222327
- 0F1012
- 020203
Tones
- C4C7D8
- BCBFCE
- B5B7C4
- ADAFBA
- A5A7B0
- 9E9FA6
- 96979C
- 8F8F93
- 878889
Color harmonies
Complementary +180°
- CCCFE2
Wildflower Prairie
- D4D1BE
≈ 400XT Film
Analogous -30° +30°
- CCCFE2
Wildflower Prairie
- C3D2E1
≈ Sea Drive
- D5CCDE
≈ Languid Lavender
Triadic +120° +240°
- CCCFE2
Wildflower Prairie
- E1CBC4
≈ Rose Beige
- C3D6CA
≈ Gracilis
Split-complementary +150° +210°
- CCCFE2
Wildflower Prairie
- DCCEBE
≈ Clay Angel
- CBD4C2
≈ Carrot Flower
Tetradic +90° +180° +270°
- CCCFE2
Wildflower Prairie
- E1CACD
≈ Perfume Cloud
- D4D1BE
≈ 400XT Film
- BED6D4
≈ Viridian Green
Contrast & accessibility
Ag
FailOn white
WCAG 1.54:1 · APCA Lc 25
Ag
AAAOn black
WCAG 13.59:1 · APCA Lc 78
Best text color: #000000
WCAG 13.59:1 (AAA) · APCA Lc 78
Contrast pairs
Code snippets
CSS
:root {
--wildflower-prairie: #cccfe2;
--wildflower-prairie-rgb: 204 207 226;
--wildflower-prairie-oklch: oklch(0.858 0.026 278.7);
}
.element {
color: var(--wildflower-prairie);
background-color: hsl(232 27% 84%);
border-color: oklch(0.858 0.026 278.7);
}Tailwind CSS v4
@theme {
--color-wildflower-prairie: #cccfe2;
--color-wildflower-prairie-50: #f3f4fd;
--color-wildflower-prairie-100: #e6e7f1;
--color-wildflower-prairie-200: #d2d3e0;
--color-wildflower-prairie-300: #b4b6c5;
--color-wildflower-prairie-400: #9b9dae;
--color-wildflower-prairie-500: #828598;
--color-wildflower-prairie-600: #6e7080;
--color-wildflower-prairie-700: #585a67;
--color-wildflower-prairie-800: #40424c;
--color-wildflower-prairie-900: #2c2d35;
--color-wildflower-prairie-950: #191a20;
}SCSS
$wildflower-prairie: #cccfe2;
$wildflower-prairie-rgb: 204, 207, 226;
$wildflower-prairie-light: mix(#fff, $wildflower-prairie, 20%);
$wildflower-prairie-dark: mix(#000, $wildflower-prairie, 20%);
.element {
color: $wildflower-prairie;
box-shadow: 0 0 0 2px rgba($wildflower-prairie, 0.35);
}