Exact color reference
#36393F Color
A very dark, low-saturation blue-gray. Copy its exact color values, compare readable foregrounds and explore lighter or darker variations for interfaces, backgrounds and design tokens.
#36393FsRGB
#36393F color values
HEX
#36393FRGB
rgb(54, 57, 63)HSL
hsl(220, 8%, 23%)OKLCH
oklch(34.401% 0.011 264.4)Tints
Mixed toward white
#5E6165
20% white
#86888C
40% white
#AFB0B2
60% white
#D7D7D9
80% white
Shades
Mixed toward black
#2B2E32
20% black
#202226
40% black
#161719
60% black
#0B0B0D
80% black
Text contrast on #36393F
White is the stronger of the two standard text choices for this background.
Black text on #36393F
1.81:1
WCAG AA: Fail · WCAG AAA: Fail
White text on #36393F
11.58:1
WCAG AA: Pass · WCAG AAA: Pass
Use #36393F in CSS
The low lightness of #36393F makes it useful for dark surfaces and interface backgrounds. White provides substantially stronger text contrast than black, but every final foreground and background pair should still be checked in its actual design context.
CSS
:root {
--color-36393f: #36393F;
}
.color-36393f {
color: #36393F;
}
.bg-36393f {
background-color: #36393F;
color: #FFFFFF;
}
Frequently Asked Questions
- What color is #36393F?
- #36393F is a very dark, low-saturation blue-gray made from red 54, green 57 and blue 63. The swatch on this page is rendered from that exact sRGB value.
- What are the RGB and HSL values for #36393F?
- #36393F converts to rgb(54, 57, 63) and approximately hsl(220, 8%, 23%). The page also provides a copyable OKLCH value.
- Should I use black or white text on #36393F?
- White provides substantially stronger contrast on #36393F and passes WCAG AA and AAA for normal text. Black does not reach the AA threshold.
- How do I use #36393F in CSS?
- Use declarations such as background-color: #36393F or store the value in a custom property such as --color-surface-dark: #36393F.