色名 · #554A3C
Metallic Bronze
Metallic Bronzeは#554A3C：rgb(85 74 60)、hsl(34 17% 28%)、oklch(0.416 0.027 73.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Metallic Bronze color name →
#554A3C
oklch(0.416 0.027 73.6)
カラー変換
- HEX
- #554a3c
- RGB
- rgb(85 74 60)
- HSL
- hsl(34 17% 28%)
- HWB
- hwb(34 24% 67%)
- OKLCH
- oklch(0.416 0.027 73.6)
- OKLab
- oklab(0.416 0.008 0.026)
- CIE Lab
- lab(32.27 2.94 10.18)
- LCH
- lch(32.27 10.6 73.9)
- CMYK
- cmyk(0% 13% 29% 67%)
ティント · シェード · トーン
ティント
- 645A4D
- 746B5F
- 857C72
- 958E85
- A6A098
- B7B2AC
- C9C5C0
- DBD8D5
- EDEBEA
シェード
- 493F33
- 3D352A
- 312A21
- 262019
- 1C1711
- 110E0A
- 080604
- 020201
- 000000
トーン
- 594F43
- 5D5449
- 625A50
- 665F56
- 6A645D
- 6F6A64
- 736F6B
- 777572
- 7C7A79
カラーハーモニー
補色 +180°
- 554A3C
Metallic Bronze
- 424D5B
≈ Night Flight
類似色 -30° +30°
- 554A3C
Metallic Bronze
- 594840
≈ Baronial Brown
- 4E4D3C
≈ Sooty Willow Bamboo
トライアド +120° +240°
- 554A3C
Metallic Bronze
- 3B5150
≈ Dark Reaper
- 514856
≈ Napa Harvest
スプリットコンプリメンタリー +150° +210°
- 554A3C
Metallic Bronze
- 3C4F57
≈ Mountain Midnight
- 4A4A5A
≈ Black Flame
テトラード +90° +180° +270°
- 554A3C
Metallic Bronze
- 3F5148
≈ Heavy Black Green
- 424D5B
≈ Night Flight
- 574650
≈ Napa Harvest
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 8.63:1 · APCA Lc 90
Ag
Fail黒の上
WCAG 2.43:1 · APCA Lc 13
最適な文字色: #FFFFFF
WCAG 8.63:1 (AAA) · APCA Lc 90
Contrast pairs
コードスニペット
CSS
:root {
--metallic-bronze: #554a3c;
--metallic-bronze-rgb: 85 74 60;
--metallic-bronze-oklch: oklch(0.416 0.027 73.6);
}
.element {
color: var(--metallic-bronze);
background-color: hsl(34 17% 28%);
border-color: oklch(0.416 0.027 73.6);
}Tailwind CSS v4
@theme {
--color-metallic-bronze: #554a3c;
--color-metallic-bronze-50: #faf4ed;
--color-metallic-bronze-100: #ede7de;
--color-metallic-bronze-200: #dbd3c8;
--color-metallic-bronze-300: #c0b6a9;
--color-metallic-bronze-400: #a89c8d;
--color-metallic-bronze-500: #918473;
--color-metallic-bronze-600: #7b7061;
--color-metallic-bronze-700: #62594e;
--color-metallic-bronze-800: #484138;
--color-metallic-bronze-900: #322d27;
--color-metallic-bronze-950: #1e1a15;
}SCSS
$metallic-bronze: #554a3c;
$metallic-bronze-rgb: 85, 74, 60;
$metallic-bronze-light: mix(#fff, $metallic-bronze, 20%);
$metallic-bronze-dark: mix(#000, $metallic-bronze, 20%);
.element {
color: $metallic-bronze;
box-shadow: 0 0 0 2px rgba($metallic-bronze, 0.35);
}