Colore con nome · #F4C26C
Hawker’s Gold
Hawker’s Gold è #F4C26C: rgb(244 194 108), hsl(38 86% 69%), oklch(0.841 0.119 79.6). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Orange mean? → · Hawker’s Gold color name →
#F4C26C
oklch(0.841 0.119 79.6)
Conversioni di colore
- HEX
- #f4c26c
- RGB
- rgb(244 194 108)
- HSL
- hsl(38 86% 69%)
- HWB
- hwb(38 42% 4%)
- OKLCH
- oklch(0.841 0.119 79.6)
- OKLab
- oklab(0.841 0.021 0.117)
- CIE Lab
- lab(81.68 11.37 49.82)
- LCH
- lch(81.68 51.1 77.1)
- CMYK
- cmyk(0% 20% 56% 4%)
Tinte · Ombre · Toni
Tinte
- F5C87D
- F7CF8C
- F8D59C
- F9DBAA
- FAE1B9
- FBE7C7
- FCEDD5
- FDF3E3
- FEF9F1
Ombre
- D4A85D
- B58F4E
- 977740
- 7A6032
- 5E4925
- 443419
- 2B200D
- 140E04
- 030200
Toni
- E8BB70
- DCB573
- D0AE76
- C4A879
- B9A17B
- AD9B7C
- A2947E
- 968D7F
- 8B877F
Armonie di colore
Complementare +180°
- F4C26C
Hawker’s Gold
- ADCDFF
≈ Night Snow
Analogo -30° +30°
- F4C26C
Hawker’s Gold
- FFB992
≈ Coral Wisp
- D0D272
≈ Fool’s Gold
Triadico +120° +240°
- F4C26C
Hawker’s Gold
- 57E2E9
≈ Pluviophile
- EDB2FC
≈ Candy Dreams
Complementare divisa +150° +210°
- F4C26C
Hawker’s Gold
- 83D8FF
≈ Sky
- C9C2FF
≈ Light Periwinkle
Tetradico +90° +180° +270°
- F4C26C
Hawker’s Gold
- 71E4BE
≈ Ocean in a Bowl
- ADCDFF
≈ Night Snow
- FFAFD5
≈ Spaghetti Strap Pink
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 1.64:1 · APCA Lc 28
Ag
AAASu nero
WCAG 12.77:1 · APCA Lc 74
Miglior colore del testo: #000000
WCAG 12.77:1 (AAA) · APCA Lc 74
Contrast pairs
Frammenti di codice
CSS
:root {
--hawker-s-gold: #f4c26c;
--hawker-s-gold-rgb: 244 194 108;
--hawker-s-gold-oklch: oklch(0.841 0.119 79.6);
}
.element {
color: var(--hawker-s-gold);
background-color: hsl(38 86% 69%);
border-color: oklch(0.841 0.119 79.6);
}Tailwind CSS v4
@theme {
--color-hawker-s-gold: #f4c26c;
--color-hawker-s-gold-50: #fff3cf;
--color-hawker-s-gold-100: #fce5bc;
--color-hawker-s-gold-200: #eed09a;
--color-hawker-s-gold-300: #d6b26f;
--color-hawker-s-gold-400: #c39644;
--color-hawker-s-gold-500: #af7b00;
--color-hawker-s-gold-600: #946904;
--color-hawker-s-gold-700: #775406;
--color-hawker-s-gold-800: #593c03;
--color-hawker-s-gold-900: #3e2903;
--color-hawker-s-gold-950: #271700;
}SCSS
$hawker-s-gold: #f4c26c;
$hawker-s-gold-rgb: 244, 194, 108;
$hawker-s-gold-light: mix(#fff, $hawker-s-gold, 20%);
$hawker-s-gold-dark: mix(#000, $hawker-s-gold, 20%);
.element {
color: $hawker-s-gold;
box-shadow: 0 0 0 2px rgba($hawker-s-gold, 0.35);
}