Adlandırılmış renk · #F1C983
Bad Hair Day
Bad Hair Day, #F1C983: rgb(241 201 131), hsl(38 80% 73%), oklch(0.855 0.099 80.8). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Orange mean? → · Bad Hair Day color name →
#F1C983
oklch(0.855 0.099 80.8)
Renk dönüşümleri
- 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%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- F3CF90
- F4D49D
- F6DAAA
- F7DFB6
- F8E4C3
- FAEACF
- FBEFDB
- FCF4E7
- FEFAF3
Koyu tonlar
- D2AE71
- B39560
- 957C4F
- 79643F
- 5D4C2F
- 433620
- 2B2212
- 140F06
- 030201
Gri tonlar
- E5C284
- DABA84
- CEB384
- C3AC84
- B7A484
- AC9D84
- A19683
- 968E82
- 8B8781
Renk uyumları
Tamamlayıcı +180°
- F1C983
Bad Hair Day
- B5D1FF
≈ Ice Cold Stare
Analog -30° +30°
- F1C983
Bad Hair Day
- FFBF9B
≈ Blushing Cinnamon
- D2D689
≈ Lime Sherbet
Üçlü +120° +240°
- F1C983
Bad Hair Day
- 79E3EA
≈ Turkish Turquoise
- EDBAF7
≈ Euphoria
Bölünmüş tamamlayıcı +150° +210°
- F1C983
Bad Hair Day
- 92DBFF
≈ Gas Giant
- CFC7FF
≈ Innocent Snowdrop
Dörtlü +90° +180° +270°
- F1C983
Bad Hair Day
- 89E5C7
≈ Bubble Algae
- B5D1FF
≈ Ice Cold Stare
- FFB7D7
≈ Candy Bar
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.56:1 · APCA Lc 26
Ag
AAASiyah üzerinde
WCAG 13.42:1 · APCA Lc 77
En iyi metin rengi: #000000
WCAG 13.42:1 (AAA) · APCA Lc 77
Contrast pairs
Kod parçacıkları
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);
}