色名 · #CAA375
Golden Thistle Yellow
Golden Thistle Yellowは#CAA375：rgb(202 163 117)、hsl(32 45% 63%)、oklch(0.74 0.077 70.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Golden Thistle Yellow color name →
#CAA375
oklch(0.74 0.077 70.8)
カラー変換
- HEX
- #caa375
- RGB
- rgb(202 163 117)
- HSL
- hsl(32 45% 63%)
- HWB
- hwb(32 46% 21%)
- OKLCH
- oklch(0.74 0.077 70.8)
- OKLab
- oklab(0.74 0.025 0.072)
- CIE Lab
- lab(69.81 10.37 29.63)
- LCH
- lch(69.81 31.39 70.7)
- CMYK
- cmyk(0% 19% 42% 21%)
ティント · シェード · トーン
ティント
- CFAC83
- D5B591
- DABE9E
- E0C7AC
- E5D1BA
- EADAC7
- EFE3D5
- F5ECE3
- FAF6F1
シェード
- AF8D65
- 957855
- 7C6346
- 644F37
- 4D3C29
- 372A1C
- 22190F
- 0F0A05
- 020101
トーン
- C2A077
- BB9C78
- B4997A
- AC957B
- A5927C
- 9D8E7D
- 968B7E
- 8F877F
- 87847F
カラーハーモニー
補色 +180°
- CAA375
Golden Thistle Yellow
- 87AFDA
≈ Buoyant Blue
類似色 -30° +30°
- CAA375
Golden Thistle Yellow
- D59B86
≈ Terra Earth
- B5AD73
≈ Jalapeño Jelly
トライアド +120° +240°
- CAA375
Golden Thistle Yellow
- 6EBBB6
≈ Earth Eclipse
- BA9ECF
≈ Turnip Crown
スプリットコンプリメンタリー +150° +210°
- CAA375
Golden Thistle Yellow
- 71B6CD
≈ Blue Brocade
- A2A6DB
≈ Sorbet Ice Mauve
テトラード +90° +180° +270°
- CAA375
Golden Thistle Yellow
- 7FBA9B
≈ Froggy Pond
- 87AFDA
≈ Buoyant Blue
- CD98B9
≈ Peach Buff
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.33:1 · APCA Lc 46
Ag
AAA黒の上
WCAG 9.00:1 · APCA Lc 56
最適な文字色: #000000
WCAG 9.00:1 (AAA) · APCA Lc 56
Contrast pairs
コードスニペット
CSS
:root {
--golden-thistle-yellow: #caa375;
--golden-thistle-yellow-rgb: 202 163 117;
--golden-thistle-yellow-oklch: oklch(0.74 0.077 70.8);
}
.element {
color: var(--golden-thistle-yellow);
background-color: hsl(32 45% 63%);
border-color: oklch(0.74 0.077 70.8);
}Tailwind CSS v4
@theme {
--color-golden-thistle-yellow: #caa375;
--color-golden-thistle-yellow-50: #fff2de;
--color-golden-thistle-yellow-100: #f8e5cd;
--color-golden-thistle-yellow-200: #e9d0b1;
--color-golden-thistle-yellow-300: #d0b28c;
--color-golden-thistle-yellow-400: #bc976c;
--color-golden-thistle-yellow-500: #a67d4b;
--color-golden-thistle-yellow-600: #8d6a40;
--color-golden-thistle-yellow-700: #715533;
--color-golden-thistle-yellow-800: #543d24;
--color-golden-thistle-yellow-900: #3a2a18;
--color-golden-thistle-yellow-950: #241809;
}SCSS
$golden-thistle-yellow: #caa375;
$golden-thistle-yellow-rgb: 202, 163, 117;
$golden-thistle-yellow-light: mix(#fff, $golden-thistle-yellow, 20%);
$golden-thistle-yellow-dark: mix(#000, $golden-thistle-yellow, 20%);
.element {
color: $golden-thistle-yellow;
box-shadow: 0 0 0 2px rgba($golden-thistle-yellow, 0.35);
}