色名 · #DFC16D
Highlight Gold
Highlight Goldは#DFC16D：rgb(223 193 109)、hsl(44 64% 65%)、oklch(0.819 0.109 90.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Yellow mean? → · Highlight Gold color name →
#DFC16D
oklch(0.819 0.109 90.2)
カラー変換
- HEX
- #dfc16d
- RGB
- rgb(223 193 109)
- HSL
- hsl(44 64% 65%)
- HWB
- hwb(44 43% 13%)
- OKLCH
- oklch(0.819 0.109 90.2)
- OKLab
- oklab(0.819 0 0.109)
- CIE Lab
- lab(79.37 3.33 46.02)
- LCH
- lch(79.37 46.14 85.9)
- CMYK
- cmyk(0% 13% 51% 13%)
ティント · シェード · トーン
ティント
- E2C77D
- E5CE8D
- E9D49B
- ECDAAA
- EFE0B8
- F2E7C7
- F5EDD5
- F9F3E3
- FCF9F1
シェード
- C2A75E
- A58F4F
- 8A7741
- 6F5F33
- 564926
- 3D3419
- 27200D
- 120E04
- 020201
トーン
- D5BA71
- CBB474
- C2AD76
- B8A779
- AEA07A
- A59A7C
- 9C937D
- 928D7F
- 89867F
カラーハーモニー
補色 +180°
- DFC16D
Highlight Gold
- ADC1FF
≈ Pastel Blue
類似色 -30° +30°
- DFC16D
Highlight Gold
- F8B379
≈ Market Melon
- BACF7C
≈ Tart Apple
トライアド +120° +240°
- DFC16D
Highlight Gold
- 61D7EB
≈ Electric Lemonade
- EDAAE5
≈ Land of Dreams
スプリットコンプリメンタリー +150° +210°
- DFC16D
Highlight Gold
- 85CDFF
≈ Platonic Blue
- CFB4FF
≈ Light Violet
テトラード +90° +180° +270°
- DFC16D
Highlight Gold
- 68DBC7
≈ Star Grass
- ADC1FF
≈ Pastel Blue
- FFA6C0
≈ Amélie’s Tutu
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.75:1 · APCA Lc 32
Ag
AAA黒の上
WCAG 11.98:1 · APCA Lc 71
最適な文字色: #000000
WCAG 11.98:1 (AAA) · APCA Lc 71
Contrast pairs
コードスニペット
CSS
:root {
--highlight-gold: #dfc16d;
--highlight-gold-rgb: 223 193 109;
--highlight-gold-oklch: oklch(0.819 0.109 90.2);
}
.element {
color: var(--highlight-gold);
background-color: hsl(44 64% 65%);
border-color: oklch(0.819 0.109 90.2);
}Tailwind CSS v4
@theme {
--color-highlight-gold: #dfc16d;
--color-highlight-gold-50: #fff5d2;
--color-highlight-gold-100: #f5e8bf;
--color-highlight-gold-200: #e5d49f;
--color-highlight-gold-300: #cbb675;
--color-highlight-gold-400: #b79c4d;
--color-highlight-gold-500: #a28217;
--color-highlight-gold-600: #896e18;
--color-highlight-gold-700: #6e5814;
--color-highlight-gold-800: #52400b;
--color-highlight-gold-900: #392c07;
--color-highlight-gold-950: #231900;
}SCSS
$highlight-gold: #dfc16d;
$highlight-gold-rgb: 223, 193, 109;
$highlight-gold-light: mix(#fff, $highlight-gold, 20%);
$highlight-gold-dark: mix(#000, $highlight-gold, 20%);
.element {
color: $highlight-gold;
box-shadow: 0 0 0 2px rgba($highlight-gold, 0.35);
}