色名 · #BB8833
Burnished Copper
Burnished Copperは#BB8833：rgb(187 136 51)、hsl(38 57% 47%)、oklch(0.662 0.117 76.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Burnished Copper color name →
#BB8833
oklch(0.662 0.117 76.6)
カラー変換
- HEX
- #bb8833
- RGB
- rgb(187 136 51)
- HSL
- hsl(38 57% 47%)
- HWB
- hwb(38 20% 27%)
- OKLCH
- oklch(0.662 0.117 76.6)
- OKLab
- oklab(0.662 0.027 0.114)
- CIE Lab
- lab(60.7 14.21 51.41)
- LCH
- lch(60.7 53.34 74.6)
- CMYK
- cmyk(0% 27% 73% 27%)
ティント · シェード · トーン
ティント
- C2944C
- C9A062
- D0AB76
- D7B78A
- DEC39D
- E4CFB1
- EBDBC4
- F2E7D8
- F8F3EB
シェード
- A2752B
- 8A6323
- 73521C
- 5C4114
- 46310D
- 322207
- 1F1303
- 0D0601
- 020100
トーン
- B5883F
- AF8749
- AA8652
- A4865A
- 9E8561
- 988468
- 92836E
- 8C8275
- 86817A
カラーハーモニー
補色 +180°
- BB8833
Burnished Copper
- 6294DA
≈ Little Boy Blue
類似色 -30° +30°
- BB8833
Burnished Copper
- CD7A51
≈ Challah Bread
- 9C9737
≈ Be Yourself
トライアド +120° +240°
- BB8833
Burnished Copper
- 00A7AA
≈ Blue Bolero
- AF7BC2
≈ Wisteria
スプリットコンプリメンタリー +150° +210°
- BB8833
Burnished Copper
- 27A0CA
≈ Charybdis
- 8E87D7
≈ Indigo Bloom
テトラード +90° +180° +270°
- BB8833
Burnished Copper
- 37A983
≈ Herbal
- 6294DA
≈ Little Boy Blue
- C674A1
≈ Fading Love
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.14:1 · APCA Lc 58
Ag
AA黒の上
WCAG 6.68:1 · APCA Lc 43
最適な文字色: #000000
WCAG 6.68:1 (AA) · APCA Lc 43
Contrast pairs
コードスニペット
CSS
:root {
--burnished-copper: #bb8833;
--burnished-copper-rgb: 187 136 51;
--burnished-copper-oklch: oklch(0.662 0.117 76.6);
}
.element {
color: var(--burnished-copper);
background-color: hsl(38 57% 47%);
border-color: oklch(0.662 0.117 76.6);
}Tailwind CSS v4
@theme {
--color-burnished-copper: #bb8833;
--color-burnished-copper-50: #fff2d0;
--color-burnished-copper-100: #fee4bc;
--color-burnished-copper-200: #f0cf9b;
--color-burnished-copper-300: #d8b071;
--color-burnished-copper-400: #c59547;
--color-burnished-copper-500: #b17a04;
--color-burnished-copper-600: #96670d;
--color-burnished-copper-700: #78530c;
--color-burnished-copper-800: #5a3b07;
--color-burnished-copper-900: #3f2905;
--color-burnished-copper-950: #281600;
}SCSS
$burnished-copper: #bb8833;
$burnished-copper-rgb: 187, 136, 51;
$burnished-copper-light: mix(#fff, $burnished-copper, 20%);
$burnished-copper-dark: mix(#000, $burnished-copper, 20%);
.element {
color: $burnished-copper;
box-shadow: 0 0 0 2px rgba($burnished-copper, 0.35);
}