Named color · #E2E2EA
Sweet Flower
Sweet Flower is #E2E2EA: rgb(226 226 234), hsl(240 16% 90%), oklch(0.915 0.011 286.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Sweet Flower color name →
#E2E2EA
oklch(0.915 0.011 286.2)
Color conversions
- HEX
- #e2e2ea
- RGB
- rgb(226 226 234)
- HSL
- hsl(240 16% 90%)
- HWB
- hwb(240 89% 8%)
- OKLCH
- oklch(0.915 0.011 286.2)
- OKLab
- oklab(0.915 0.003 -0.01)
- CIE Lab
- lab(90.06 1.09 -3.91)
- LCH
- lch(90.06 4.06 285.5)
- CMYK
- cmyk(3% 3% 0% 8%)
Tints · Shades · Tones
Tints
- E5E5EC
- E8E8EE
- EBEBF0
- EEEEF2
- F0F0F4
- F3F3F7
- F6F6F9
- F9F9FB
- FCFCFD
Shades
- C4C4CB
- A8A8AE
- 8C8C91
- 717175
- 57575A
- 3E3E41
- 272729
- 121213
- 030303
Tones
- D8D8DF
- CECED4
- C4C4C9
- BABABE
- B0B0B4
- A6A6A9
- 9C9C9F
- 939394
- 89898A
Color harmonies
Complementary +180°
- E2E2EA
Sweet Flower
- E4E3DB
≈ Snow Drift
Analogous -30° +30°
- E2E2EA
Sweet Flower
- DEE3EA
≈ December Dawn
- E6E1E8
≈ Budapest Pastel
Triadic +120° +240°
- E2E2EA
Sweet Flower
- E9E1DD
≈ Sweet Roses
- DDE5E1
≈ Illuminating Experience
Split-complementary +150° +210°
- E2E2EA
Sweet Flower
- E7E2DB
≈ Toque White
- E0E5DE
≈ Chinese White
Tetradic +90° +180° +270°
- E2E2EA
Sweet Flower
- EAE0E0
≈ Crystallise
- E4E3DB
≈ Snow Drift
- DBE5E5
≈ Alpine Blue
Contrast & accessibility
Ag
FailOn white
WCAG 1.28:1 · APCA Lc 14
Ag
AAAOn black
WCAG 16.30:1 · APCA Lc 90
Best text color: #000000
WCAG 16.30:1 (AAA) · APCA Lc 90
Contrast pairs
Code snippets
CSS
:root {
--sweet-flower: #e2e2ea;
--sweet-flower-rgb: 226 226 234;
--sweet-flower-oklch: oklch(0.915 0.011 286.2);
}
.element {
color: var(--sweet-flower);
background-color: hsl(240 16% 90%);
border-color: oklch(0.915 0.011 286.2);
}Tailwind CSS v4
@theme {
--color-sweet-flower: #e2e2ea;
--color-sweet-flower-50: #f5f5f8;
--color-sweet-flower-100: #e7e7eb;
--color-sweet-flower-200: #d4d3d9;
--color-sweet-flower-300: #b7b7bd;
--color-sweet-flower-400: #9e9ea5;
--color-sweet-flower-500: #85858d;
--color-sweet-flower-600: #717177;
--color-sweet-flower-700: #5a5a60;
--color-sweet-flower-800: #424246;
--color-sweet-flower-900: #2d2d30;
--color-sweet-flower-950: #1a1a1d;
}SCSS
$sweet-flower: #e2e2ea;
$sweet-flower-rgb: 226, 226, 234;
$sweet-flower-light: mix(#fff, $sweet-flower, 20%);
$sweet-flower-dark: mix(#000, $sweet-flower, 20%);
.element {
color: $sweet-flower;
box-shadow: 0 0 0 2px rgba($sweet-flower, 0.35);
}