色名 · #F4C26C
Hawker’s Gold
Hawker’s Goldは#F4C26C：rgb(244 194 108)、hsl(38 86% 69%)、oklch(0.841 0.119 79.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Hawker’s Gold color name →
#F4C26C
oklch(0.841 0.119 79.6)
カラー変換
- 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%)
ティント · シェード · トーン
ティント
- F5C87D
- F7CF8C
- F8D59C
- F9DBAA
- FAE1B9
- FBE7C7
- FCEDD5
- FDF3E3
- FEF9F1
シェード
- D4A85D
- B58F4E
- 977740
- 7A6032
- 5E4925
- 443419
- 2B200D
- 140E04
- 030200
トーン
- E8BB70
- DCB573
- D0AE76
- C4A879
- B9A17B
- AD9B7C
- A2947E
- 968D7F
- 8B877F
カラーハーモニー
補色 +180°
- F4C26C
Hawker’s Gold
- ADCDFF
≈ Night Snow
類似色 -30° +30°
- F4C26C
Hawker’s Gold
- FFB992
≈ Coral Wisp
- D0D272
≈ Fool’s Gold
トライアド +120° +240°
- F4C26C
Hawker’s Gold
- 57E2E9
≈ Pluviophile
- EDB2FC
≈ Candy Dreams
スプリットコンプリメンタリー +150° +210°
- F4C26C
Hawker’s Gold
- 83D8FF
≈ Sky
- C9C2FF
≈ Light Periwinkle
テトラード +90° +180° +270°
- F4C26C
Hawker’s Gold
- 71E4BE
≈ Ocean in a Bowl
- ADCDFF
≈ Night Snow
- FFAFD5
≈ Spaghetti Strap Pink
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.64:1 · APCA Lc 28
Ag
AAA黒の上
WCAG 12.77:1 · APCA Lc 74
最適な文字色: #000000
WCAG 12.77:1 (AAA) · APCA Lc 74
Contrast pairs
コードスニペット
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);
}