Nearest named color · #142104
#142104
Nearest named color: Midnight Pines
#142104 (rgb(20 33 4), hsl(87 78% 7%), oklch(0.228 0.053 129.8)) is closest to the named color Midnight Pines. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#142104
oklch(0.228 0.053 129.8)
Color conversions
- HEX
- #142104
- RGB
- rgb(20 33 4)
- HSL
- hsl(87 78% 7%)
- HWB
- hwb(87 2% 87%)
- OKLCH
- oklch(0.228 0.053 129.8)
- OKLab
- oklab(0.228 -0.034 0.041)
- CIE Lab
- lab(10.94 -10.55 14.26)
- LCH
- lch(10.94 17.74 126.5)
- CMYK
- cmyk(39% 0% 88% 87%)
Tints · Shades · Tones
Tints
- 273419
- 3C482F
- 515C46
- 68725E
- 7F8877
- 979F91
- B0B6AB
- CACEC7
- E4E6E2
Shades
- 101B03
- 0C1602
- 081001
- 050B01
- 030601
- 010300
- 010100
- 000000
- 000000
Tones
- 1D2A10
- 27331B
- 313C27
- 3C4533
- 474E3F
- 52584C
- 5D6258
- 686C65
- 747673
Color harmonies
Complementary +180°
- 142104
Midnight Pines
- 24142F
≈ Blacklist
Analogous -30° +30°
- 142104
Midnight Pines
- 221D00
≈ Liquorice Root
- 002314
≈ Clock Chimes Thirteen
Triadic +120° +240°
- 142104
Midnight Pines
- 061D34
≈ Cyanophobia
- 301017
≈ Dark Danger
Split-complementary +150° +210°
- 142104
Midnight Pines
- 181934
≈ Dark Knight
- 2C1124
≈ Black Cherry
Tetradic +90° +180° +270°
- 142104
Midnight Pines
- 00212A
≈ Midnight Dreams
- 24142F
≈ Blacklist
- 301208
≈ Darkout
Contrast & accessibility
Ag
AAAOn white
WCAG 16.81:1 · APCA Lc 104
Ag
FailOn black
WCAG 1.24:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 16.81:1 (AAA) · APCA Lc 104
Contrast pairs
Code snippets
CSS
:root {
--midnight-pines: #142104;
--midnight-pines-rgb: 20 33 4;
--midnight-pines-oklch: oklch(0.228 0.053 129.8);
}
.element {
color: var(--midnight-pines);
background-color: hsl(87 78% 7%);
border-color: oklch(0.228 0.053 129.8);
}Tailwind CSS v4
@theme {
--color-midnight-pines: #142104;
--color-midnight-pines-50: #f0f9e9;
--color-midnight-pines-100: #e1ecda;
--color-midnight-pines-200: #ccd9c2;
--color-midnight-pines-300: #aebda2;
--color-midnight-pines-400: #94a584;
--color-midnight-pines-500: #7b8e68;
--color-midnight-pines-600: #687859;
--color-midnight-pines-700: #536047;
--color-midnight-pines-800: #3d4632;
--color-midnight-pines-900: #2a3022;
--color-midnight-pines-950: #181d11;
}SCSS
$midnight-pines: #142104;
$midnight-pines-rgb: 20, 33, 4;
$midnight-pines-light: mix(#fff, $midnight-pines, 20%);
$midnight-pines-dark: mix(#000, $midnight-pines, 20%);
.element {
color: $midnight-pines;
box-shadow: 0 0 0 2px rgba($midnight-pines, 0.35);
}