色名 · #CA884B
Golden Pumpkin
Golden Pumpkinは#CA884B：rgb(202 136 75)、hsl(29 55% 54%)、oklch(0.682 0.112 61.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Golden Pumpkin color name →
#CA884B
oklch(0.682 0.112 61.8)
カラー変換
- HEX
- #ca884b
- RGB
- rgb(202 136 75)
- HSL
- hsl(29 55% 54%)
- HWB
- hwb(29 29% 21%)
- OKLCH
- oklch(0.682 0.112 61.8)
- OKLab
- oklab(0.682 0.053 0.099)
- CIE Lab
- lab(62.69 21.65 42.89)
- LCH
- lch(62.69 48.05 63.2)
- CMYK
- cmyk(0% 33% 63% 21%)
ティント · シェード · トーン
ティント
- D0945E
- D6A071
- DBAC83
- E1B794
- E6C3A6
- EBCFB8
- F1DBC9
- F5E7DB
- FAF3ED
シェード
- AF7540
- 956335
- 7C522B
- 644121
- 4D3117
- 37220E
- 221306
- 0F0602
- 020100
トーン
- C38852
- BC8759
- B4875F
- AD8664
- A6856A
- 9E846F
- 978373
- 8F8278
- 88817C
カラーハーモニー
補色 +180°
- CA884B
Golden Pumpkin
- 53A1D8
≈ Waimea Blue
類似色 -30° +30°
- CA884B
Golden Pumpkin
- D57E6D
≈ Tawny Orange
- B2963E
≈ Roti
トライアド +120° +240°
- CA884B
Golden Pumpkin
- 2CAF9E
≈ Billiard
- A588D2
≈ Middy’s Purple
スプリットコンプリメンタリー +150° +210°
- CA884B
Golden Pumpkin
- 23ABC1
≈ Future
- 8094DE
≈ Mystic Iris
テトラード +90° +180° +270°
- CA884B
Golden Pumpkin
- 5FAD76
≈ Green Tea Candy
- 53A1D8
≈ Waimea Blue
- C17EB8
≈ Lavender Sweater
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.94:1 · APCA Lc 56
Ag
AAA黒の上
WCAG 7.13:1 · APCA Lc 46
最適な文字色: #000000
WCAG 7.13:1 (AAA) · APCA Lc 46
Contrast pairs
コードスニペット
CSS
:root {
--golden-pumpkin: #ca884b;
--golden-pumpkin-rgb: 202 136 75;
--golden-pumpkin-oklch: oklch(0.682 0.112 61.8);
}
.element {
color: var(--golden-pumpkin);
background-color: hsl(29 55% 54%);
border-color: oklch(0.682 0.112 61.8);
}Tailwind CSS v4
@theme {
--color-golden-pumpkin: #ca884b;
--color-golden-pumpkin-50: #ffefd5;
--color-golden-pumpkin-100: #ffe1c2;
--color-golden-pumpkin-200: #f7cba3;
--color-golden-pumpkin-300: #e0ab7a;
--color-golden-pumpkin-400: #ce8f56;
--color-golden-pumpkin-500: #ba732b;
--color-golden-pumpkin-600: #9d6226;
--color-golden-pumpkin-700: #7e4e1e;
--color-golden-pumpkin-800: #5e3815;
--color-golden-pumpkin-900: #42260d;
--color-golden-pumpkin-950: #2a1402;
}SCSS
$golden-pumpkin: #ca884b;
$golden-pumpkin-rgb: 202, 136, 75;
$golden-pumpkin-light: mix(#fff, $golden-pumpkin, 20%);
$golden-pumpkin-dark: mix(#000, $golden-pumpkin, 20%);
.element {
color: $golden-pumpkin;
box-shadow: 0 0 0 2px rgba($golden-pumpkin, 0.35);
}