Couleur nommée · #F4E5E1
Reverie Pink
Reverie Pink correspond à #F4E5E1 : rgb(244 229 225), hsl(13 46% 92%), oklch(0.933 0.017 35.3). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Gray mean? → · Reverie Pink color name →
#F4E5E1
oklch(0.933 0.017 35.3)
Conversions de couleur
- HEX
- #f4e5e1
- RGB
- rgb(244 229 225)
- HSL
- hsl(13 46% 92%)
- HWB
- hwb(13 88% 4%)
- OKLCH
- oklch(0.933 0.017 35.3)
- OKLab
- oklab(0.933 0.014 0.01)
- CIE Lab
- lab(92.07 4.78 3.88)
- LCH
- lch(92.07 6.16 39.1)
- CMYK
- cmyk(0% 6% 8% 4%)
Teintes · Ombres · Tons
Teintes
- F5E8E4
- F6EAE7
- F7EDEA
- F8EFED
- FAF2F0
- FBF5F3
- FCF7F6
- FDFAF9
- FEFCFC
Ombres
- D4C7C4
- B5AAA7
- 978E8B
- 7A7270
- 5E5856
- 443F3E
- 2B2827
- 141212
- 030302
Tons
- E8DAD7
- DCD0CD
- D0C6C3
- C4BBB9
- B8B1AF
- ADA7A6
- A19D9C
- 969393
- 8B8A89
Harmonies de couleurs
Complémentaire +180°
- F4E5E1
Reverie Pink
- DDECF0
≈ Prelude
Analogue -30° +30°
- F4E5E1
Reverie Pink
- F4E4E7
≈ Be Mine
- F1E7DD
≈ Fair Maiden
Triadique +120° +240°
- F4E5E1
Reverie Pink
- E0ECE4
≈ Wishy-Washy Lichen
- E5E8F5
≈ Whisper Blue
Complémentaire divisée +150° +210°
- F4E5E1
Reverie Pink
- DDEDEA
≈ Tranquil
- E0EAF4
≈ Harbour Afternoon
Tétradique +90° +180° +270°
- F4E5E1
Reverie Pink
- E6EBDF
≈ Hydrangea Floret
- DDECF0
≈ Prelude
- EBE6F2
≈ Tranquil Eve
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.22:1 · APCA Lc 11
Ag
AAASur noir
WCAG 17.14:1 · APCA Lc 93
Meilleure couleur de texte: #000000
WCAG 17.14:1 (AAA) · APCA Lc 93
Contrast pairs
Extraits de code
CSS
:root {
--reverie-pink: #f4e5e1;
--reverie-pink-rgb: 244 229 225;
--reverie-pink-oklch: oklch(0.933 0.017 35.3);
}
.element {
color: var(--reverie-pink);
background-color: hsl(13 46% 92%);
border-color: oklch(0.933 0.017 35.3);
}Tailwind CSS v4
@theme {
--color-reverie-pink: #f4e5e1;
--color-reverie-pink-50: #faf3f2;
--color-reverie-pink-100: #ede6e4;
--color-reverie-pink-200: #dbd2cf;
--color-reverie-pink-300: #c0b5b1;
--color-reverie-pink-400: #a89b98;
--color-reverie-pink-500: #91827e;
--color-reverie-pink-600: #7b6e6b;
--color-reverie-pink-700: #625856;
--color-reverie-pink-800: #48403e;
--color-reverie-pink-900: #322c2b;
--color-reverie-pink-950: #1e1918;
}SCSS
$reverie-pink: #f4e5e1;
$reverie-pink-rgb: 244, 229, 225;
$reverie-pink-light: mix(#fff, $reverie-pink, 20%);
$reverie-pink-dark: mix(#000, $reverie-pink, 20%);
.element {
color: $reverie-pink;
box-shadow: 0 0 0 2px rgba($reverie-pink, 0.35);
}