Couleur nommée · #F6E5C5
Lightweight Beige
Lightweight Beige correspond à #F6E5C5 : rgb(246 229 197), hsl(39 73% 87%), oklch(0.927 0.046 83.3). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Orange mean? → · Lightweight Beige color name →
#F6E5C5
oklch(0.927 0.046 83.3)
Conversions de couleur
- HEX
- #f6e5c5
- RGB
- rgb(246 229 197)
- HSL
- hsl(39 73% 87%)
- HWB
- hwb(39 77% 4%)
- OKLCH
- oklch(0.927 0.046 83.3)
- OKLab
- oklab(0.927 0.005 0.046)
- CIE Lab
- lab(91.71 2.3 17.87)
- LCH
- lch(91.71 18.02 82.7)
- CMYK
- cmyk(0% 7% 20% 4%)
Teintes · Ombres · Tons
Teintes
- F7E8CB
- F8EAD1
- F9EDD6
- FAEFDC
- FBF2E2
- FBF5E8
- FCF7EE
- FDFAF3
- FEFCF9
Ombres
- D6C7AB
- B7AA92
- 988E79
- 7B7261
- 5F584B
- 453F35
- 2C2821
- 15120E
- 030302
Tons
- EADABE
- DDD0B7
- D1C6B0
- C5BBA9
- B9B1A2
- AEA79B
- A29D94
- 96938E
- 8B8A87
Harmonies de couleurs
Complémentaire +180°
- F6E5C5
Lightweight Beige
- DBE8FF
≈ Veiling Waterfalls
Analogue -30° +30°
- F6E5C5
Lightweight Beige
- FFE0CD
≈ Autumn Bloom
- E6EBC8
≈ Green Essence
Triadique +120° +240°
- F6E5C5
Lightweight Beige
- C4F1F5
≈ Vaporised
- F7DDF9
≈ Strawberry Frost
Complémentaire divisée +150° +210°
- F6E5C5
Lightweight Beige
- CDEDFF
≈ Blue Hijab
- E7E3FF
≈ Lavender Mist
Tétradique +90° +180° +270°
- F6E5C5
Lightweight Beige
- C9F2E4
≈ Light Salome
- DBE8FF
≈ Veiling Waterfalls
- FFDCE9
≈ Strawberry Cheesecake
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.24:1 · APCA Lc 12
Ag
AAASur noir
WCAG 16.93:1 · APCA Lc 92
Meilleure couleur de texte: #000000
WCAG 16.93:1 (AAA) · APCA Lc 92
Contrast pairs
Extraits de code
CSS
:root {
--lightweight-beige: #f6e5c5;
--lightweight-beige-rgb: 246 229 197;
--lightweight-beige-oklch: oklch(0.927 0.046 83.3);
}
.element {
color: var(--lightweight-beige);
background-color: hsl(39 73% 87%);
border-color: oklch(0.927 0.046 83.3);
}Tailwind CSS v4
@theme {
--color-lightweight-beige: #f6e5c5;
--color-lightweight-beige-50: #fbf4e7;
--color-lightweight-beige-100: #efe7d7;
--color-lightweight-beige-200: #ddd3bf;
--color-lightweight-beige-300: #c2b69d;
--color-lightweight-beige-400: #ac9d80;
--color-lightweight-beige-500: #958463;
--color-lightweight-beige-600: #7e7054;
--color-lightweight-beige-700: #655943;
--color-lightweight-beige-800: #4b4130;
--color-lightweight-beige-900: #342d21;
--color-lightweight-beige-950: #1f1a10;
}SCSS
$lightweight-beige: #f6e5c5;
$lightweight-beige-rgb: 246, 229, 197;
$lightweight-beige-light: mix(#fff, $lightweight-beige, 20%);
$lightweight-beige-dark: mix(#000, $lightweight-beige, 20%);
.element {
color: $lightweight-beige;
box-shadow: 0 0 0 2px rgba($lightweight-beige, 0.35);
}