Colore con nome · #F1C983
Bad Hair Day
Bad Hair Day è #F1C983: rgb(241 201 131), hsl(38 80% 73%), oklch(0.855 0.099 80.8). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Orange mean? → · Bad Hair Day color name →
#F1C983
oklch(0.855 0.099 80.8)
Conversioni di colore
- HEX
- #f1c983
- RGB
- rgb(241 201 131)
- HSL
- hsl(38 80% 73%)
- HWB
- hwb(38 51% 5%)
- OKLCH
- oklch(0.855 0.099 80.8)
- OKLab
- oklab(0.855 0.016 0.098)
- CIE Lab
- lab(83.35 8.15 40.45)
- LCH
- lch(83.35 41.26 78.6)
- CMYK
- cmyk(0% 17% 46% 5%)
Tinte · Ombre · Toni
Tinte
- F3CF90
- F4D49D
- F6DAAA
- F7DFB6
- F8E4C3
- FAEACF
- FBEFDB
- FCF4E7
- FEFAF3
Ombre
- D2AE71
- B39560
- 957C4F
- 79643F
- 5D4C2F
- 433620
- 2B2212
- 140F06
- 030201
Toni
- E5C284
- DABA84
- CEB384
- C3AC84
- B7A484
- AC9D84
- A19683
- 968E82
- 8B8781
Armonie di colore
Complementare +180°
- F1C983
Bad Hair Day
- B5D1FF
≈ Ice Cold Stare
Analogo -30° +30°
- F1C983
Bad Hair Day
- FFBF9B
≈ Blushing Cinnamon
- D2D689
≈ Lime Sherbet
Triadico +120° +240°
- F1C983
Bad Hair Day
- 79E3EA
≈ Turkish Turquoise
- EDBAF7
≈ Euphoria
Complementare divisa +150° +210°
- F1C983
Bad Hair Day
- 92DBFF
≈ Gas Giant
- CFC7FF
≈ Innocent Snowdrop
Tetradico +90° +180° +270°
- F1C983
Bad Hair Day
- 89E5C7
≈ Bubble Algae
- B5D1FF
≈ Ice Cold Stare
- FFB7D7
≈ Candy Bar
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 1.56:1 · APCA Lc 26
Ag
AAASu nero
WCAG 13.42:1 · APCA Lc 77
Miglior colore del testo: #000000
WCAG 13.42:1 (AAA) · APCA Lc 77
Contrast pairs
Frammenti di codice
CSS
:root {
--bad-hair-day: #f1c983;
--bad-hair-day-rgb: 241 201 131;
--bad-hair-day-oklch: oklch(0.855 0.099 80.8);
}
.element {
color: var(--bad-hair-day);
background-color: hsl(38 80% 73%);
border-color: oklch(0.855 0.099 80.8);
}Tailwind CSS v4
@theme {
--color-bad-hair-day: #f1c983;
--color-bad-hair-day-50: #fff3d6;
--color-bad-hair-day-100: #f8e6c3;
--color-bad-hair-day-200: #e9d1a4;
--color-bad-hair-day-300: #d0b37c;
--color-bad-hair-day-400: #bd9857;
--color-bad-hair-day-500: #a87e2d;
--color-bad-hair-day-600: #8e6b28;
--color-bad-hair-day-700: #725620;
--color-bad-hair-day-800: #553e15;
--color-bad-hair-day-900: #3b2b0e;
--color-bad-hair-day-950: #251802;
}SCSS
$bad-hair-day: #f1c983;
$bad-hair-day-rgb: 241, 201, 131;
$bad-hair-day-light: mix(#fff, $bad-hair-day, 20%);
$bad-hair-day-dark: mix(#000, $bad-hair-day, 20%);
.element {
color: $bad-hair-day;
box-shadow: 0 0 0 2px rgba($bad-hair-day, 0.35);
}