色名 · #A8816F
Cocoa Nutmeg
Cocoa Nutmegは#A8816F：rgb(168 129 111)、hsl(19 25% 55%)、oklch(0.636 0.055 46)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Cocoa Nutmeg color name →
#A8816F
oklch(0.636 0.055 46)
カラー変換
- HEX
- #a8816f
- RGB
- rgb(168 129 111)
- HSL
- hsl(19 25% 55%)
- HWB
- hwb(19 44% 34%)
- OKLCH
- oklch(0.636 0.055 46)
- OKLab
- oklab(0.636 0.038 0.04)
- CIE Lab
- lab(57.48 13.62 15.89)
- LCH
- lch(57.48 20.92 49.4)
- CMYK
- cmyk(0% 23% 34% 34%)
ティント · シェード · トーン
ティント
- B18D7D
- B9998A
- C2A598
- CBB2A7
- D4BEB5
- DCCBC3
- E5D8D2
- EEE5E1
- F6F2F0
シェード
- 926F60
- 7C5E51
- 674E42
- 523E34
- 3F2E27
- 2C1F1A
- 1A120E
- 0A0604
- 010101
トーン
- A48171
- A08173
- 9C8174
- 988176
- 948178
- 90817A
- 8C817B
- 88807D
- 84807E
カラーハーモニー
補色 +180°
- A8816F
Cocoa Nutmeg
- 6692A5
≈ Blue Cruise
類似色 -30° +30°
- A8816F
Cocoa Nutmeg
- AA7E80
≈ Jupiter Brown
- 9F8765
≈ Soft Bronze
トライアド +120° +240°
- A8816F
Cocoa Nutmeg
- 6B9683
≈ Douglas Fir Green
- 8887AC
≈ Purple Hills
スプリットコンプリメンタリー +150° +210°
- A8816F
Cocoa Nutmeg
- 629696
≈ Loch Blue
- 758DAD
≈ Distant Sky
テトラード +90° +180° +270°
- A8816F
Cocoa Nutmeg
- 7C9372
≈ Chic Shade
- 6692A5
≈ Blue Cruise
- 9881A2
≈ Purple Phantom
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.47:1 · APCA Lc 62
Ag
AA黒の上
WCAG 6.03:1 · APCA Lc 39
最適な文字色: #000000
WCAG 6.03:1 (AA) · APCA Lc 39
Contrast pairs
コードスニペット
CSS
:root {
--cocoa-nutmeg: #a8816f;
--cocoa-nutmeg-rgb: 168 129 111;
--cocoa-nutmeg-oklch: oklch(0.636 0.055 46);
}
.element {
color: var(--cocoa-nutmeg);
background-color: hsl(19 25% 55%);
border-color: oklch(0.636 0.055 46);
}Tailwind CSS v4
@theme {
--color-cocoa-nutmeg: #a8816f;
--color-cocoa-nutmeg-50: #fff1e8;
--color-cocoa-nutmeg-100: #f8e3d8;
--color-cocoa-nutmeg-200: #e9cec0;
--color-cocoa-nutmeg-300: #d0b09f;
--color-cocoa-nutmeg-400: #bb9583;
--color-cocoa-nutmeg-500: #a67b67;
--color-cocoa-nutmeg-600: #8c6858;
--color-cocoa-nutmeg-700: #705346;
--color-cocoa-nutmeg-800: #533c33;
--color-cocoa-nutmeg-900: #3a2923;
--color-cocoa-nutmeg-950: #241712;
}SCSS
$cocoa-nutmeg: #a8816f;
$cocoa-nutmeg-rgb: 168, 129, 111;
$cocoa-nutmeg-light: mix(#fff, $cocoa-nutmeg, 20%);
$cocoa-nutmeg-dark: mix(#000, $cocoa-nutmeg, 20%);
.element {
color: $cocoa-nutmeg;
box-shadow: 0 0 0 2px rgba($cocoa-nutmeg, 0.35);
}