Couleur nommée · #F2F2E2
Storksbill White
Storksbill White correspond à #F2F2E2 : rgb(242 242 226), hsl(60 38% 92%), oklch(0.957 0.021 106.8). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Gray mean? → · Storksbill White color name →
#F2F2E2
oklch(0.957 0.021 106.8)
Conversions de couleur
- HEX
- #f2f2e2
- RGB
- rgb(242 242 226)
- HSL
- hsl(60 38% 92%)
- HWB
- hwb(60 89% 5%)
- OKLCH
- oklch(0.957 0.021 106.8)
- OKLab
- oklab(0.957 -0.006 0.02)
- CIE Lab
- lab(95.17 -2.04 7.75)
- LCH
- lch(95.17 8.02 104.7)
- CMYK
- cmyk(0% 0% 7% 5%)
Teintes · Ombres · Tons
Teintes
- F3F3E5
- F5F5E8
- F6F6EB
- F7F7EE
- F8F9F0
- FAFAF3
- FBFBF6
- FCFCF9
- FEFEFC
Ombres
- D2D2C4
- B4B4A8
- 96968C
- 797971
- 5E5E57
- 43433E
- 2B2B27
- 141412
- 030303
Tons
- E6E6D8
- DADACE
- CECEC4
- C3C3BA
- B7B7B0
- ACACA6
- A1A19C
- 969693
- 8B8B89
Harmonies de couleurs
Complémentaire +180°
- F2F2E2
Storksbill White
- EFEFFF
≈ Foundation White
Analogue -30° +30°
- F2F2E2
Storksbill White
- F9EFE1
≈ Marshmallow Whip
- EAF4E6
≈ Floaty Bubble
Triadique +120° +240°
- F2F2E2
Storksbill White
- E3F4FC
≈ Coastal Breeze
- FCEBF3
≈ Placebo Magenta
Complémentaire divisée +150° +210°
- F2F2E2
Storksbill White
- E8F2FF
≈ Moon White
- F7EDFA
≈ Placebo Fuchsia
Tétradique +90° +180° +270°
- F2F2E2
Storksbill White
- E1F5F5
≈ Coastal Breeze
- EFEFFF
≈ Foundation White
- FFEBEC
≈ Pink Lemonade
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.13:1 · APCA Lc 0
Ag
AAASur noir
WCAG 18.57:1 · APCA Lc 99
Meilleure couleur de texte: #000000
WCAG 18.57:1 (AAA) · APCA Lc 99
Contrast pairs
Extraits de code
CSS
:root {
--storksbill-white: #f2f2e2;
--storksbill-white-rgb: 242 242 226;
--storksbill-white-oklch: oklch(0.957 0.021 106.8);
}
.element {
color: var(--storksbill-white);
background-color: hsl(60 38% 92%);
border-color: oklch(0.957 0.021 106.8);
}Tailwind CSS v4
@theme {
--color-storksbill-white: #f2f2e2;
--color-storksbill-white-50: #f5f6ef;
--color-storksbill-white-100: #e8e8e1;
--color-storksbill-white-200: #d5d5cb;
--color-storksbill-white-300: #b8b8ac;
--color-storksbill-white-400: #a09f91;
--color-storksbill-white-500: #878777;
--color-storksbill-white-600: #737365;
--color-storksbill-white-700: #5c5c51;
--color-storksbill-white-800: #43433b;
--color-storksbill-white-900: #2e2e28;
--color-storksbill-white-950: #1b1b16;
}SCSS
$storksbill-white: #f2f2e2;
$storksbill-white-rgb: 242, 242, 226;
$storksbill-white-light: mix(#fff, $storksbill-white, 20%);
$storksbill-white-dark: mix(#000, $storksbill-white, 20%);
.element {
color: $storksbill-white;
box-shadow: 0 0 0 2px rgba($storksbill-white, 0.35);
}