色名 · #4D5051
Black Ice
Black Iceは#4D5051：rgb(77 80 81)、hsl(195 3% 31%)、oklch(0.429 0.004 219.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Black Ice color name →
#4D5051
oklch(0.429 0.004 219.6)
カラー変換
- HEX
- #4d5051
- RGB
- rgb(77 80 81)
- HSL
- hsl(195 3% 31%)
- HWB
- hwb(195 30% 68%)
- OKLCH
- oklch(0.429 0.004 219.6)
- OKLab
- oklab(0.429 -0.003 -0.003)
- CIE Lab
- lab(33.78 -1.09 -1.04)
- LCH
- lch(33.78 1.5 223.5)
- CMYK
- cmyk(5% 1% 0% 68%)
ティント · シェード · トーン
ティント
- 5D6061
- 6D7071
- 7E8181
- 909292
- A1A3A4
- B3B5B5
- C6C7C7
- D9D9DA
- ECECEC
シェード
- 424445
- 37393A
- 2C2E2F
- 222424
- 181A1A
- 0F1010
- 070707
- 020202
- 000000
トーン
- 525556
- 57595A
- 5C5E5F
- 616363
- 666868
- 6B6C6D
- 707172
- 757676
- 7B7B7B
カラーハーモニー
補色 +180°
- 4D5051
Black Ice
- 524F4E
≈ Keshizumi Cinder
類似色 -30° +30°
- 4D5051
Black Ice
- 4D5050
≈ Black Ice
- 4E5052
≈ Muskeg Grey
トライアド +120° +240°
- 4D5051
Black Ice
- 514F50
≈ Briquette Grey
- 504F4D
≈ Black Oak
スプリットコンプリメンタリー +150° +210°
- 4D5051
Black Ice
- 524E4F
≈ Keshizumi Cinder
- 514F4D
≈ Blackjack
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 8.13:1 · APCA Lc 88
Ag
Fail黒の上
WCAG 2.58:1 · APCA Lc 14
最適な文字色: #FFFFFF
WCAG 8.13:1 (AAA) · APCA Lc 88
Contrast pairs
コードスニペット
CSS
:root {
--black-ice: #4d5051;
--black-ice-rgb: 77 80 81;
--black-ice-oklch: oklch(0.429 0.004 219.6);
}
.element {
color: var(--black-ice);
background-color: hsl(195 3% 31%);
border-color: oklch(0.429 0.004 219.6);
}Tailwind CSS v4
@theme {
--color-black-ice: #4d5051;
--color-black-ice-50: #f4f5f6;
--color-black-ice-100: #e6e8e9;
--color-black-ice-200: #d2d5d5;
--color-black-ice-300: #b5b8b9;
--color-black-ice-400: #9c9fa0;
--color-black-ice-500: #838788;
--color-black-ice-600: #6f7273;
--color-black-ice-700: #595b5c;
--color-black-ice-800: #414343;
--color-black-ice-900: #2d2e2e;
--color-black-ice-950: #1a1b1b;
}SCSS
$black-ice: #4d5051;
$black-ice-rgb: 77, 80, 81;
$black-ice-light: mix(#fff, $black-ice, 20%);
$black-ice-dark: mix(#000, $black-ice, 20%);
.element {
color: $black-ice;
box-shadow: 0 0 0 2px rgba($black-ice, 0.35);
}