色名 · #CAA84C
Grandiose
Grandioseは#CAA84C：rgb(202 168 76)、hsl(44 54% 55%)、oklch(0.744 0.117 88.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Yellow mean? → · Grandiose color name →
#CAA84C
oklch(0.744 0.117 88.9)
カラー変換
- HEX
- #caa84c
- RGB
- rgb(202 168 76)
- HSL
- hsl(44 54% 55%)
- HWB
- hwb(44 30% 21%)
- OKLCH
- oklch(0.744 0.117 88.9)
- OKLab
- oklab(0.744 0.002 0.117)
- CIE Lab
- lab(70.63 5.22 51.1)
- LCH
- lch(70.63 51.37 84.2)
- CMYK
- cmyk(0% 17% 62% 21%)
ティント · シェード · トーン
ティント
- CFB161
- D5BA74
- DAC286
- DFCB98
- E4D4A9
- EADCBB
- EFE5CC
- F4EEDD
- FAF6EE
シェード
- AF9241
- 957C36
- 7C672C
- 645222
- 4D3F18
- 372C0F
- 221A06
- 0F0A02
- 020100
トーン
- C2A454
- BBA05B
- B39C62
- AC9867
- A4946C
- 9D9071
- 968C75
- 8E8879
- 87847D
カラーハーモニー
補色 +180°
- CAA84C
Grandiose
- 8EA9F7
≈ Kitten’s Eye
類似色 -30° +30°
- CAA84C
Grandiose
- E3995D
≈ Sabre-Toothed Tiger
- A4B75D
≈ Green Banana
トライアド +120° +240°
- CAA84C
Grandiose
- 33C0D4
≈ The Crowd Roars!
- D591D1
≈ Somewhere in a Fairytale
スプリットコンプリメンタリー +150° +210°
- CAA84C
Grandiose
- 5EB6EE
≈ Sanctuary Spa
- B69BEC
≈ Dreamy Candy Forest
テトラード +90° +180° +270°
- CAA84C
Grandiose
- 42C4AD
≈ Melbourne Cup
- 8EA9F7
≈ Kitten’s Eye
- E88CAA
≈ Charm Pink
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.27:1 · APCA Lc 45
Ag
AAA黒の上
WCAG 9.21:1 · APCA Lc 57
最適な文字色: #000000
WCAG 9.21:1 (AAA) · APCA Lc 57
Contrast pairs
コードスニペット
CSS
:root {
--grandiose: #caa84c;
--grandiose-rgb: 202 168 76;
--grandiose-oklch: oklch(0.744 0.117 88.9);
}
.element {
color: var(--grandiose);
background-color: hsl(44 54% 55%);
border-color: oklch(0.744 0.117 88.9);
}Tailwind CSS v4
@theme {
--color-grandiose: #caa84c;
--color-grandiose-50: #fff5d0;
--color-grandiose-100: #f6e7bc;
--color-grandiose-200: #e7d39b;
--color-grandiose-300: #ceb56f;
--color-grandiose-400: #ba9b44;
--color-grandiose-500: #a58100;
--color-grandiose-600: #8c6d03;
--color-grandiose-700: #705706;
--color-grandiose-800: #543f02;
--color-grandiose-900: #3a2b03;
--color-grandiose-950: #241800;
}SCSS
$grandiose: #caa84c;
$grandiose-rgb: 202, 168, 76;
$grandiose-light: mix(#fff, $grandiose, 20%);
$grandiose-dark: mix(#000, $grandiose, 20%);
.element {
color: $grandiose;
box-shadow: 0 0 0 2px rgba($grandiose, 0.35);
}