Couleur nommée · #FEF9D3
Focus on Light
Focus on Light correspond à #FEF9D3 : rgb(254 249 211), hsl(53 96% 91%), oklch(0.976 0.05 101.1). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Yellow mean? → · Focus on Light color name →
#FEF9D3
oklch(0.976 0.05 101.1)
Conversions de couleur
- HEX
- #fef9d3
- RGB
- rgb(254 249 211)
- HSL
- hsl(53 96% 91%)
- HWB
- hwb(53 83% 0%)
- OKLCH
- oklch(0.976 0.05 101.1)
- OKLab
- oklab(0.976 -0.01 0.049)
- CIE Lab
- lab(97.6 -2.78 18.96)
- LCH
- lch(97.6 19.16 98.3)
- CMYK
- cmyk(0% 2% 17% 0%)
Teintes · Ombres · Tons
Teintes
- FEFAD8
- FEFADC
- FEFBE0
- FEFCE5
- FEFCE9
- FFFDEE
- FFFDF2
- FFFEF6
- FFFEFB
Ombres
- DDD9B7
- BDB99C
- 9E9A82
- 807D69
- 636151
- 47463A
- 2D2C24
- 161510
- 030302
Tons
- F1ECCA
- E4E0C2
- D7D3BA
- CAC7B1
- BDBBA9
- B0AFA1
- A4A398
- 989790
- 8C8B88
Harmonies de couleurs
Complémentaire +180°
- FEF9D3
Focus on Light
- F6F7FF
≈ Ghost White
Analogue -30° +30°
- FEF9D3
Focus on Light
- FFF6EB
≈ Apricot Ice
- ECFFDC
≈ Baby Tooth
Triadique +120° +240°
- FEF9D3
Focus on Light
- ECFAFF
≈ Alice Blue
- FFF3FA
≈ Pinkish White
Complémentaire divisée +150° +210°
- FEF9D3
Focus on Light
- F2F8FF
≈ Alice Blue
- FBF5FF
≈ Sugar Crystal
Tétradique +90° +180° +270°
- FEF9D3
Focus on Light
- DFFFFD
≈ Light Cyan
- F6F7FF
≈ Ghost White
- FFF4F5
≈ Glimpse of Pink
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.06:1 · APCA Lc 0
Ag
AAASur noir
WCAG 19.70:1 · APCA Lc 103
Meilleure couleur de texte: #000000
WCAG 19.70:1 (AAA) · APCA Lc 103
Contrast pairs
Extraits de code
CSS
:root {
--focus-on-light: #fef9d3;
--focus-on-light-rgb: 254 249 211;
--focus-on-light-oklch: oklch(0.976 0.05 101.1);
}
.element {
color: var(--focus-on-light);
background-color: hsl(53 96% 91%);
border-color: oklch(0.976 0.05 101.1);
}Tailwind CSS v4
@theme {
--color-focus-on-light: #fef9d3;
--color-focus-on-light-50: #f7f6e6;
--color-focus-on-light-100: #eae9d6;
--color-focus-on-light-200: #d8d6be;
--color-focus-on-light-300: #bcb99c;
--color-focus-on-light-400: #a4a07e;
--color-focus-on-light-500: #8d8861;
--color-focus-on-light-600: #777353;
--color-focus-on-light-700: #5f5c42;
--color-focus-on-light-800: #46432f;
--color-focus-on-light-900: #312e20;
--color-focus-on-light-950: #1d1b0f;
}SCSS
$focus-on-light: #fef9d3;
$focus-on-light-rgb: 254, 249, 211;
$focus-on-light-light: mix(#fff, $focus-on-light, 20%);
$focus-on-light-dark: mix(#000, $focus-on-light, 20%);
.element {
color: $focus-on-light;
box-shadow: 0 0 0 2px rgba($focus-on-light, 0.35);
}