Cor nomeada · #E4E1E3
Lavender Breeze
Lavender Breeze é #E4E1E3: rgb(228 225 227), hsl(320 5% 89%), oklch(0.913 0.004 337.4). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Lavender Breeze color name →
#E4E1E3
oklch(0.913 0.004 337.4)
Conversões de cor
- HEX
- #e4e1e3
- RGB
- rgb(228 225 227)
- HSL
- hsl(320 5% 89%)
- HWB
- hwb(320 88% 11%)
- OKLCH
- oklch(0.913 0.004 337.4)
- OKLab
- oklab(0.913 0.004 -0.002)
- CIE Lab
- lab(89.81 1.32 -0.6)
- LCH
- lch(89.81 1.45 335.4)
- CMYK
- cmyk(0% 1% 0% 11%)
Tons claros · Sombras · Tons
Tons claros
- E7E4E6
- E9E7E9
- ECEAEB
- EFEDEE
- F1F0F1
- F4F3F4
- F7F6F7
- FAF9F9
- FCFCFC
Sombras
- C6C4C5
- A9A7A8
- 8D8B8C
- 727071
- 585657
- 3F3E3F
- 282727
- 121212
- 030203
Tons
- DAD7D9
- CFCDCE
- C5C3C4
- BBB9BA
- B1AFB0
- A7A6A6
- 9D9C9D
- 939393
- 8A8989
Harmonias de cor
Complementar +180°
- E4E1E3
Lavender Breeze
- E0E3E1
≈ Intrepid Grey
Análoga -30° +30°
- E4E1E3
Lavender Breeze
- E3E1E4
≈ Orchid Blossom
- E5E1E1
≈ Easter Orchid
Tríade +120° +240°
- E4E1E3
Lavender Breeze
- E3E2DF
≈ Spilled Cappuccino
- DFE3E4
≈ Mauve White
Complementar dividida +150° +210°
- E4E1E3
Lavender Breeze
- E1E3E0
≈ Beryl Pearl
- DFE3E2
≈ Zircon
Tétrade +90° +180° +270°
- E4E1E3
Lavender Breeze
- E4E2DF
≈ Spilled Cappuccino
- E0E3E1
≈ Intrepid Grey
- E0E2E5
≈ January Dawn
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.29:1 · APCA Lc 15
Ag
AAASobre preto
WCAG 16.17:1 · APCA Lc 89
Melhor cor de texto: #000000
WCAG 16.17:1 (AAA) · APCA Lc 89
Contrast pairs
Trechos de código
CSS
:root {
--lavender-breeze: #e4e1e3;
--lavender-breeze-rgb: 228 225 227;
--lavender-breeze-oklch: oklch(0.913 0.004 337.4);
}
.element {
color: var(--lavender-breeze);
background-color: hsl(320 5% 89%);
border-color: oklch(0.913 0.004 337.4);
}Tailwind CSS v4
@theme {
--color-lavender-breeze: #e4e1e3;
--color-lavender-breeze-50: #f6f5f5;
--color-lavender-breeze-100: #e9e7e8;
--color-lavender-breeze-200: #d5d3d5;
--color-lavender-breeze-300: #b9b6b8;
--color-lavender-breeze-400: #a09d9f;
--color-lavender-breeze-500: #888587;
--color-lavender-breeze-600: #737172;
--color-lavender-breeze-700: #5c5a5b;
--color-lavender-breeze-800: #434243;
--color-lavender-breeze-900: #2e2d2e;
--color-lavender-breeze-950: #1b1a1b;
}SCSS
$lavender-breeze: #e4e1e3;
$lavender-breeze-rgb: 228, 225, 227;
$lavender-breeze-light: mix(#fff, $lavender-breeze, 20%);
$lavender-breeze-dark: mix(#000, $lavender-breeze, 20%);
.element {
color: $lavender-breeze;
box-shadow: 0 0 0 2px rgba($lavender-breeze, 0.35);
}