色名 · #3B484F
Midnight Hour
Midnight Hourは#3B484F：rgb(59 72 79)、hsl(201 14% 27%)、oklch(0.393 0.021 231.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Midnight Hour color name →
#3B484F
oklch(0.393 0.021 231.5)
カラー変換
- HEX
- #3b484f
- RGB
- rgb(59 72 79)
- HSL
- hsl(201 14% 27%)
- HWB
- hwb(201 23% 69%)
- OKLCH
- oklch(0.393 0.021 231.5)
- OKLab
- oklab(0.393 -0.013 -0.016)
- CIE Lab
- lab(29.65 -4.03 -6.03)
- LCH
- lch(29.65 7.25 236.3)
- CMYK
- cmyk(25% 9% 0% 69%)
ティント · シェード · トーン
ティント
- 4C585F
- 5E696F
- 717B80
- 848C91
- 979FA3
- ABB1B4
- C0C4C7
- D4D7D9
- E9EBEC
シェード
- 323D44
- 293338
- 21292E
- 191F23
- 111619
- 090D10
- 040607
- 010202
- 000000
トーン
- 424D54
- 485359
- 4F585D
- 565E62
- 5D6367
- 64696C
- 6B6F71
- 727476
- 797A7B
カラーハーモニー
補色 +180°
- 3B484F
Midnight Hour
- 4F433C
≈ Dark Granite
類似色 -30° +30°
- 3B484F
Midnight Hour
- 39494A
≈ Panda Black
- 404651
≈ Bank Blue
トライアド +120° +240°
- 3B484F
Midnight Hour
- 4F4147
≈ Plum Brown
- 46473A
≈ Ripe Olive
スプリットコンプリメンタリー +150° +210°
- 3B484F
Midnight Hour
- 504241
≈ Mulch
- 4B453A
≈ Space Shuttle
テトラード +90° +180° +270°
- 3B484F
Midnight Hour
- 4B424D
≈ Plum Orbit
- 4F433C
≈ Dark Granite
- 40493E
≈ Laurel Woods
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 9.43:1 · APCA Lc 92
Ag
Fail黒の上
WCAG 2.22:1 · APCA Lc 11
最適な文字色: #FFFFFF
WCAG 9.43:1 (AAA) · APCA Lc 92
Contrast pairs
コードスニペット
CSS
:root {
--midnight-hour: #3b484f;
--midnight-hour-rgb: 59 72 79;
--midnight-hour-oklch: oklch(0.393 0.021 231.5);
}
.element {
color: var(--midnight-hour);
background-color: hsl(201 14% 27%);
border-color: oklch(0.393 0.021 231.5);
}Tailwind CSS v4
@theme {
--color-midnight-hour: #3b484f;
--color-midnight-hour-50: #f0f6fa;
--color-midnight-hour-100: #e2e9ee;
--color-midnight-hour-200: #ccd6dc;
--color-midnight-hour-300: #aeb9c0;
--color-midnight-hour-400: #93a1a9;
--color-midnight-hour-500: #798992;
--color-midnight-hour-600: #67747b;
--color-midnight-hour-700: #525d63;
--color-midnight-hour-800: #3b4448;
--color-midnight-hour-900: #292f32;
--color-midnight-hour-950: #171b1e;
}SCSS
$midnight-hour: #3b484f;
$midnight-hour-rgb: 59, 72, 79;
$midnight-hour-light: mix(#fff, $midnight-hour, 20%);
$midnight-hour-dark: mix(#000, $midnight-hour, 20%);
.element {
color: $midnight-hour;
box-shadow: 0 0 0 2px rgba($midnight-hour, 0.35);
}