Named color · #46474A
Midnight Magic
Midnight Magic is #46474A: rgb(70 71 74), hsl(225 3% 28%), oklch(0.398 0.005 271.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Midnight Magic color name →
#46474A
oklch(0.398 0.005 271.3)
Color conversions
- HEX
- #46474a
- RGB
- rgb(70 71 74)
- HSL
- hsl(225 3% 28%)
- HWB
- hwb(225 27% 71%)
- OKLCH
- oklch(0.398 0.005 271.3)
- OKLab
- oklab(0.398 0 -0.005)
- CIE Lab
- lab(30.14 0.08 -1.96)
- LCH
- lch(30.14 1.96 272.3)
- CMYK
- cmyk(5% 4% 0% 71%)
Tints · Shades · Tones
Tints
- 56575A
- 67686B
- 797A7C
- 8B8C8E
- 9D9EA0
- B0B1B2
- C3C4C5
- D7D7D8
- EBEBEB
Shades
- 3C3D3F
- 323235
- 28282A
- 1E1F20
- 151617
- 0D0D0E
- 050606
- 020202
- 000000
Tones
- 4C4C4F
- 515254
- 57575A
- 5C5D5F
- 626364
- 68696A
- 6E6E6F
- 747475
- 7A7A7A
Color harmonies
Complementary +180°
- 46474A
Midnight Magic
- 484744
≈ Black Mocha
Analogous -30° +30°
- 46474A
Midnight Magic
- 45484A
≈ Black Boudoir
- 47464A
≈ Midnight Magic
Triadic +120° +240°
- 46474A
Midnight Magic
- 4A4645
≈ Dampened Black
- 454846
≈ Brattle Spruce
Split-complementary +150° +210°
- 46474A
Midnight Magic
- 494744
≈ Black Mocha
- 474845
≈ Brattle Spruce
Tetradic +90° +180° +270°
- 46474A
Midnight Magic
- 4A4647
≈ Dampened Black
- 484744
≈ Black Mocha
- 444847
≈ Black Boudoir
Contrast & accessibility
Ag
AAAOn white
WCAG 9.28:1 · APCA Lc 91
Ag
FailOn black
WCAG 2.26:1 · APCA Lc 11
Best text color: #FFFFFF
WCAG 9.28:1 (AAA) · APCA Lc 91
Contrast pairs
Code snippets
CSS
:root {
--midnight-magic: #46474a;
--midnight-magic-rgb: 70 71 74;
--midnight-magic-oklch: oklch(0.398 0.005 271.3);
}
.element {
color: var(--midnight-magic);
background-color: hsl(225 3% 28%);
border-color: oklch(0.398 0.005 271.3);
}Tailwind CSS v4
@theme {
--color-midnight-magic: #46474a;
--color-midnight-magic-50: #f4f5f7;
--color-midnight-magic-100: #e7e8ea;
--color-midnight-magic-200: #d3d4d6;
--color-midnight-magic-300: #b6b7ba;
--color-midnight-magic-400: #9d9ea1;
--color-midnight-magic-500: #85868a;
--color-midnight-magic-600: #707174;
--color-midnight-magic-700: #5a5b5d;
--color-midnight-magic-800: #424244;
--color-midnight-magic-900: #2d2e2f;
--color-midnight-magic-950: #1a1b1c;
}SCSS
$midnight-magic: #46474a;
$midnight-magic-rgb: 70, 71, 74;
$midnight-magic-light: mix(#fff, $midnight-magic, 20%);
$midnight-magic-dark: mix(#000, $midnight-magic, 20%);
.element {
color: $midnight-magic;
box-shadow: 0 0 0 2px rgba($midnight-magic, 0.35);
}