Color con nombre · #F4F2E7
Magnolia Spring
Magnolia Spring es #F4F2E7: rgb(244 242 231), hsl(51 37% 93%), oklch(0.96 0.015 98.3). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Gray mean? → · Magnolia Spring color name →
#F4F2E7
oklch(0.96 0.015 98.3)
Conversiones de color
- HEX
- #f4f2e7
- RGB
- rgb(244 242 231)
- HSL
- hsl(51 37% 93%)
- HWB
- hwb(51 91% 4%)
- OKLCH
- oklch(0.96 0.015 98.3)
- OKLab
- oklab(0.96 -0.002 0.015)
- CIE Lab
- lab(95.42 -0.71 5.57)
- LCH
- lch(95.42 5.62 97.3)
- CMYK
- cmyk(0% 1% 5% 4%)
Tintes · Sombras · Tonos
Tintes
- F5F3E9
- F6F5EC
- F7F6EE
- F8F7F1
- F9F8F3
- FBFAF5
- FCFBF8
- FDFCFA
- FEFEFD
Sombras
- D4D2C9
- B5B4AB
- 97968F
- 7A7973
- 5E5E59
- 444340
- 2B2B28
- 141413
- 030303
Tonos
- E8E6DC
- DCDAD2
- D0CEC7
- C4C3BD
- B8B7B2
- ADACA8
- A1A19E
- 969694
- 8B8B8A
Armonías de color
Complementario +180°
- F4F2E7
Magnolia Spring
- EFF1FC
≈ Alpine Goat
Análogo -30° +30°
- F4F2E7
Magnolia Spring
- F9F0E7
≈ Moonlit Beach
- EFF4E9
≈ Frosted Juniper
Triádico +120° +240°
- F4F2E7
Magnolia Spring
- E7F4F8
≈ Milky Way
- F9EEF5
≈ Sentimental Pink
Complementario dividido +150° +210°
- F4F2E7
Magnolia Spring
- EAF3FB
≈ Moon White
- F4EFFA
≈ Cloud Break
Tetrádico +90° +180° +270°
- F4F2E7
Magnolia Spring
- E7F5F3
≈ Shiroi White
- EFF1FC
≈ Alpine Goat
- FBEEF0
≈ Pale Cherry Blossom
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 1.12:1 · APCA Lc 0
Ag
AAASobre negro
WCAG 18.70:1 · APCA Lc 99
Mejor color de texto: #000000
WCAG 18.70:1 (AAA) · APCA Lc 99
Contrast pairs
Fragmentos de código
CSS
:root {
--magnolia-spring: #f4f2e7;
--magnolia-spring-rgb: 244 242 231;
--magnolia-spring-oklch: oklch(0.96 0.015 98.3);
}
.element {
color: var(--magnolia-spring);
background-color: hsl(51 37% 93%);
border-color: oklch(0.96 0.015 98.3);
}Tailwind CSS v4
@theme {
--color-magnolia-spring: #f4f2e7;
--color-magnolia-spring-50: #f6f5f1;
--color-magnolia-spring-100: #e9e8e3;
--color-magnolia-spring-200: #d5d4cd;
--color-magnolia-spring-300: #b9b8af;
--color-magnolia-spring-400: #a09f95;
--color-magnolia-spring-500: #88867c;
--color-magnolia-spring-600: #737269;
--color-magnolia-spring-700: #5c5b54;
--color-magnolia-spring-800: #44423d;
--color-magnolia-spring-900: #2f2e2a;
--color-magnolia-spring-950: #1b1b17;
}SCSS
$magnolia-spring: #f4f2e7;
$magnolia-spring-rgb: 244, 242, 231;
$magnolia-spring-light: mix(#fff, $magnolia-spring, 20%);
$magnolia-spring-dark: mix(#000, $magnolia-spring, 20%);
.element {
color: $magnolia-spring;
box-shadow: 0 0 0 2px rgba($magnolia-spring, 0.35);
}