色名 · #5E6063
Sheet Metal
Sheet Metalは#5E6063：rgb(94 96 99)、hsl(216 3% 38%)、oklch(0.488 0.005 258.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Sheet Metal color name →
#5E6063
oklch(0.488 0.005 258.3)
カラー変換
- HEX
- #5e6063
- RGB
- rgb(94 96 99)
- HSL
- hsl(216 3% 38%)
- HWB
- hwb(216 37% 61%)
- OKLCH
- oklch(0.488 0.005 258.3)
- OKLab
- oklab(0.488 -0.001 -0.005)
- CIE Lab
- lab(40.63 -0.33 -2)
- LCH
- lch(40.63 2.03 260.6)
- CMYK
- cmyk(5% 3% 0% 61%)
ティント · シェード · トーン
ティント
- 6D6F71
- 7C7D80
- 8B8D8F
- 9B9C9E
- ABACAE
- BBBCBD
- CCCCCE
- DDDDDE
- EEEEEE
シェード
- 515255
- 444547
- 37383A
- 2B2C2E
- 1F2021
- 141516
- 0A0A0B
- 030303
- 000000
トーン
- 616366
- 656669
- 68696C
- 6B6D6E
- 6F7071
- 727374
- 767677
- 79797A
- 7D7D7D
カラーハーモニー
補色 +180°
- 5E6063
Sheet Metal
- 62605D
≈ Grey Werewolf
類似色 -30° +30°
- 5E6063
Sheet Metal
- 5D6162
≈ Blackish Green
- 605F63
≈ Cloak Grey
トライアド +120° +240°
- 5E6063
Sheet Metal
- 635F5F
≈ Shades On
- 5E615E
≈ Hematite
スプリットコンプリメンタリー +150° +210°
- 5E6063
Sheet Metal
- 635F5D
≈ Grey Werewolf
- 60605D
≈ Charcoal Smudge
テトラード +90° +180° +270°
- 5E6063
Sheet Metal
- 625F60
≈ Shades On
- 62605D
≈ Grey Werewolf
- 5D615F
≈ Hematite
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 6.30:1 · APCA Lc 81
Ag
Fail黒の上
WCAG 3.32:1 · APCA Lc 20
最適な文字色: #FFFFFF
WCAG 6.30:1 (AA) · APCA Lc 81
Contrast pairs
コードスニペット
CSS
:root {
--sheet-metal: #5e6063;
--sheet-metal-rgb: 94 96 99;
--sheet-metal-oklch: oklch(0.488 0.005 258.3);
}
.element {
color: var(--sheet-metal);
background-color: hsl(216 3% 38%);
border-color: oklch(0.488 0.005 258.3);
}Tailwind CSS v4
@theme {
--color-sheet-metal: #5e6063;
--color-sheet-metal-50: #f4f5f7;
--color-sheet-metal-100: #e7e8ea;
--color-sheet-metal-200: #d3d4d6;
--color-sheet-metal-300: #b6b7ba;
--color-sheet-metal-400: #9c9ea2;
--color-sheet-metal-500: #84868a;
--color-sheet-metal-600: #707275;
--color-sheet-metal-700: #595b5d;
--color-sheet-metal-800: #414244;
--color-sheet-metal-900: #2d2e2f;
--color-sheet-metal-950: #1a1b1c;
}SCSS
$sheet-metal: #5e6063;
$sheet-metal-rgb: 94, 96, 99;
$sheet-metal-light: mix(#fff, $sheet-metal, 20%);
$sheet-metal-dark: mix(#000, $sheet-metal, 20%);
.element {
color: $sheet-metal;
box-shadow: 0 0 0 2px rgba($sheet-metal, 0.35);
}