色名 · #C48C67
Copper Hide
Copper Hideは#C48C67：rgb(196 140 103)、hsl(24 44% 59%)、oklch(0.687 0.085 54.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Copper Hide color name →
#C48C67
oklch(0.687 0.085 54.3)
カラー変換
- HEX
- #c48c67
- RGB
- rgb(196 140 103)
- HSL
- hsl(24 44% 59%)
- HWB
- hwb(24 40% 23%)
- OKLCH
- oklch(0.687 0.085 54.3)
- OKLab
- oklab(0.687 0.05 0.069)
- CIE Lab
- lab(63.26 18.75 28.64)
- LCH
- lch(63.26 34.23 56.8)
- CMYK
- cmyk(0% 29% 47% 23%)
ティント · シェード · トーン
ティント
- CA9776
- D1A385
- D7AE94
- DDB9A3
- E3C5B2
- E9D0C1
- EEDCD0
- F4E8E0
- FAF3EF
シェード
- AA7959
- 91674B
- 78553D
- 614330
- 4A3323
- 352317
- 21140C
- 0E0704
- 020100
トーン
- BD8B6A
- B78A6D
- B08970
- A98872
- A28775
- 9C8577
- 95847A
- 8E837C
- 87817E
カラーハーモニー
補色 +180°
- C48C67
Copper Hide
- 62A3C7
≈ Scott Base
類似色 -30° +30°
- C48C67
Copper Hide
- CA8580
≈ Raspberry Ripple
- B3965B
≈ Edgy Gold
トライアド +120° +240°
- C48C67
Copper Hide
- 5CAC96
≈ Water Park
- 9D90CA
≈ Violet Tulip
スプリットコンプリメンタリー +150° +210°
- C48C67
Copper Hide
- 51AAB3
≈ Gone Fishing
- 809AD0
≈ Purple Gentian
テトラード +90° +180° +270°
- C48C67
Copper Hide
- 79A879
≈ Abomination
- 62A3C7
≈ Scott Base
- B588B8
≈ Violet Whimsy
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.87:1 · APCA Lc 55
Ag
AAA黒の上
WCAG 7.29:1 · APCA Lc 47
最適な文字色: #000000
WCAG 7.29:1 (AAA) · APCA Lc 47
Contrast pairs
コードスニペット
CSS
:root {
--copper-hide: #c48c67;
--copper-hide-rgb: 196 140 103;
--copper-hide-oklch: oklch(0.687 0.085 54.3);
}
.element {
color: var(--copper-hide);
background-color: hsl(24 44% 59%);
border-color: oklch(0.687 0.085 54.3);
}Tailwind CSS v4
@theme {
--color-copper-hide: #c48c67;
--color-copper-hide-50: #fff0de;
--color-copper-hide-100: #ffe1cd;
--color-copper-hide-200: #f2ccb2;
--color-copper-hide-300: #daad8d;
--color-copper-hide-400: #c6916e;
--color-copper-hide-500: #b2764d;
--color-copper-hide-600: #966442;
--color-copper-hide-700: #795035;
--color-copper-hide-800: #5a3a26;
--color-copper-hide-900: #3f2819;
--color-copper-hide-950: #28150a;
}SCSS
$copper-hide: #c48c67;
$copper-hide-rgb: 196, 140, 103;
$copper-hide-light: mix(#fff, $copper-hide, 20%);
$copper-hide-dark: mix(#000, $copper-hide, 20%);
.element {
color: $copper-hide;
box-shadow: 0 0 0 2px rgba($copper-hide, 0.35);
}