色名 · #C6A05E
Ginger Jar
Ginger Jarは#C6A05E：rgb(198 160 94)、hsl(38 48% 57%)、oklch(0.726 0.096 80.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Ginger Jar color name →
#C6A05E
oklch(0.726 0.096 80.2)
カラー変換
- HEX
- #c6a05e
- RGB
- rgb(198 160 94)
- HSL
- hsl(38 48% 57%)
- HWB
- hwb(38 37% 22%)
- OKLCH
- oklch(0.726 0.096 80.2)
- OKLab
- oklab(0.726 0.016 0.094)
- CIE Lab
- lab(68.35 8.6 39.69)
- LCH
- lch(68.35 40.61 77.8)
- CMYK
- cmyk(0% 19% 53% 22%)
ティント · シェード · トーン
ティント
- CCA96F
- D2B37F
- D7BC8F
- DDC69F
- E3CFAF
- E8D9BF
- EEE2CF
- F4ECDF
- F9F5EF
シェード
- AC8B51
- 927644
- 7A6137
- 624E2B
- 4B3B1F
- 352914
- 21190A
- 0E0903
- 020100
トーン
- BF9D63
- B89A67
- B1976B
- AA946F
- A39072
- 9C8D75
- 958A78
- 8E877B
- 87837E
カラーハーモニー
補色 +180°
- C6A05E
Ginger Jar
- 83A7E3
≈ Blue Cue
類似色 -30° +30°
- C6A05E
Ginger Jar
- D7956F
≈ Sweet Cardamom
- AAAC63
≈ Organic Garden
トライアド +120° +240°
- C6A05E
Ginger Jar
- 51B9BE
≈ Sussie
- C293CC
≈ Rose Souvenir
スプリットコンプリメンタリー +150° +210°
- C6A05E
Ginger Jar
- 62B2D7
≈ Riviera Blue
- A69CDF
≈ Dull Lavender
テトラード +90° +180° +270°
- C6A05E
Ginger Jar
- 62BA9E
≈ Sainsbury
- 83A7E3
≈ Blue Cue
- D58EAF
≈ Moonlit Mauve
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.44:1 · APCA Lc 48
Ag
AAA黒の上
WCAG 8.59:1 · APCA Lc 54
最適な文字色: #000000
WCAG 8.59:1 (AAA) · APCA Lc 54
Contrast pairs
コードスニペット
CSS
:root {
--ginger-jar: #c6a05e;
--ginger-jar-rgb: 198 160 94;
--ginger-jar-oklch: oklch(0.726 0.096 80.2);
}
.element {
color: var(--ginger-jar);
background-color: hsl(38 48% 57%);
border-color: oklch(0.726 0.096 80.2);
}Tailwind CSS v4
@theme {
--color-ginger-jar: #c6a05e;
--color-ginger-jar-50: #fff3d7;
--color-ginger-jar-100: #f8e6c4;
--color-ginger-jar-200: #e9d1a6;
--color-ginger-jar-300: #d0b37f;
--color-ginger-jar-400: #bc985a;
--color-ginger-jar-500: #a77e32;
--color-ginger-jar-600: #8d6b2c;
--color-ginger-jar-700: #715623;
--color-ginger-jar-800: #543e18;
--color-ginger-jar-900: #3b2b0f;
--color-ginger-jar-950: #251803;
}SCSS
$ginger-jar: #c6a05e;
$ginger-jar-rgb: 198, 160, 94;
$ginger-jar-light: mix(#fff, $ginger-jar, 20%);
$ginger-jar-dark: mix(#000, $ginger-jar, 20%);
.element {
color: $ginger-jar;
box-shadow: 0 0 0 2px rgba($ginger-jar, 0.35);
}