色名 · #54504A
Urbane Bronze
Urbane Bronzeは#54504A：rgb(84 80 74)、hsl(36 6% 31%)、oklch(0.433 0.011 78.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Urbane Bronze color name →
#54504A
oklch(0.433 0.011 78.2)
カラー変換
- HEX
- #54504a
- RGB
- rgb(84 80 74)
- HSL
- hsl(36 6% 31%)
- HWB
- hwb(36 29% 67%)
- OKLCH
- oklch(0.433 0.011 78.2)
- OKLab
- oklab(0.433 0.002 0.011)
- CIE Lab
- lab(34.27 0.8 4.17)
- LCH
- lch(34.27 4.24 79.1)
- CMYK
- cmyk(0% 5% 12% 67%)
ティント · シェード · トーン
ティント
- 63605A
- 73706B
- 84817C
- 94928E
- A5A3A0
- B7B5B2
- C8C7C5
- DAD9D8
- EDECEB
シェード
- 48443F
- 3C3935
- 312E2A
- 262420
- 1B1A17
- 11100E
- 080706
- 020202
- 000000
トーン
- 58554F
- 5D5954
- 615E5A
- 65635F
- 6A6864
- 6E6C6A
- 72716F
- 777675
- 7B7B7A
カラーハーモニー
補色 +180°
- 54504A
Urbane Bronze
- 4D5157
≈ Water Ouzel
類似色 -30° +30°
- 54504A
Urbane Bronze
- 564F4B
≈ Berry Brown
- 51514A
≈ Urbane Bronze
トライアド +120° +240°
- 54504A
Urbane Bronze
- 4A5353
≈ Dark as Night
- 534F55
≈ Magnet
スプリットコンプリメンタリー +150° +210°
- 54504A
Urbane Bronze
- 4B5255
≈ Chimney
- 505057
≈ Water Ouzel
テトラード +90° +180° +270°
- 54504A
Urbane Bronze
- 4B534F
≈ Evergreen Field
- 4D5157
≈ Water Ouzel
- 564E52
≈ Pavement
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 8.00:1 · APCA Lc 88
Ag
Fail黒の上
WCAG 2.62:1 · APCA Lc 14
最適な文字色: #FFFFFF
WCAG 8.00:1 (AAA) · APCA Lc 88
Contrast pairs
コードスニペット
CSS
:root {
--urbane-bronze: #54504a;
--urbane-bronze-rgb: 84 80 74;
--urbane-bronze-oklch: oklch(0.433 0.011 78.2);
}
.element {
color: var(--urbane-bronze);
background-color: hsl(36 6% 31%);
border-color: oklch(0.433 0.011 78.2);
}Tailwind CSS v4
@theme {
--color-urbane-bronze: #54504a;
--color-urbane-bronze-50: #f7f5f2;
--color-urbane-bronze-100: #eae7e4;
--color-urbane-bronze-200: #d7d4cf;
--color-urbane-bronze-300: #bab7b1;
--color-urbane-bronze-400: #a29e97;
--color-urbane-bronze-500: #8a857e;
--color-urbane-bronze-600: #75716b;
--color-urbane-bronze-700: #5e5a55;
--color-urbane-bronze-800: #45423e;
--color-urbane-bronze-900: #2f2d2b;
--color-urbane-bronze-950: #1c1a18;
}SCSS
$urbane-bronze: #54504a;
$urbane-bronze-rgb: 84, 80, 74;
$urbane-bronze-light: mix(#fff, $urbane-bronze, 20%);
$urbane-bronze-dark: mix(#000, $urbane-bronze, 20%);
.element {
color: $urbane-bronze;
box-shadow: 0 0 0 2px rgba($urbane-bronze, 0.35);
}