Gray Color Family

Slate Gray Color Hex Code, RGB & HSL Values

Browse all Gray Colors

What is the meaning of the Slate Gray color?

Slate Gray is a cool, medium-dark gray color with blue undertones. It represents industrial slate stone and stormy skies, offering a professional, modern neutral accent in web design.

How to use the Slate Gray color hex code in HTML & CSS?

To style elements with Slate Gray on a website, use the hex code #708090 in your HTML/CSS. Adding background-color: #708090; will render the color. In Tailwind CSS, you can apply this shade dynamically using classes like bg-[#708090] or configuring it as a color variable in your configuration file.

What are the RGB and HSL codes of Slate Gray?

In the digital sRGB spectrum, the Slate Gray color code is mapped to RGB values of Red: 112, Green: 128, and Blue: 144. In the HSL system, it registers at hue angle 210°, saturation 13%, and lightness index 50%. It represents a balanced medium tone characterized by a soft, understated pastel shade.

CMYK print profiles for Slate Gray color

To reproduce the named shade Slate Gray in print systems, the CMYK ink configuration requires 22% Cyan, 11% Magenta, 0% Yellow, and 44% black. In digital designs, blue coordinates like this are highly favored by technical and corporate platforms to foster user trust, stability, and clean readability.

Red Channel 112
Green Channel 128
Blue Channel 144
Luminance 0.209

Slate Gray Color Space Conversions

Click to copy format
HEX Color Code #708090
RGB (Red Green Blue) rgb(112, 128, 144)
HSL (Hue Sat Light) hsl(210°, 13%, 50%)
CMYK (Commercial Print) cmyk(22%, 11%, 0%, 44%)
HSV / HSB Values hsv(210°, 22%, 56%)
Decimal Color Code 7372944
CSS Custom Variable --color-hex: #708090;
Tailwind CSS Utility bg-[#708090]
CSS Named Color slategray

Contrast & Accessibility (WCAG 2.1) Check

White Text on Background

White text readability test with #708090

Small body copy preview

Black Text on Background

Black text readability test with #708090

Small body copy preview

Complementary & Analogous Harmonies

Computed dynamically

Shades & Tints Generator Matrix

Copy shade hex values instantly

Darker Shades (Adding Black)

Lighter Tints (Adding White)

{ } CSS Custom Properties (Variables)

Copy CSS Styles
/* CSS Custom Properties for Slate Gray */
--color-hex: #708090;
--color-rgb: rgb(112, 128, 144);
--color-hsl: hsl(210deg, 13%, 50%);
--color-name: slategray;

Aa Known Color Aliases

Slate Gray slategray (CSS Identifier) Slate GreyBlue GrayCool Gray

Slate Gray Color Meaning

As a notable shade in the gray spectrum, Slate Gray embodies the core psychological traits of the gray color family. The gray spectrum is the great equalizer of the color spectrum — neutral, impartial, and sophisticated. It carries connotations of maturity, reliability, and professional restraint. In design, gray provides visual breathing room, allowing accent colors to take center stage while creating an overall sense of sophistication. Dark charcoals communicate premium quality and authority, while light grays feel airy and modern. Technology companies favor gray for its associations with precision and innovation. Gray is psychologically calming precisely because it lacks the stimulation of chromatic colors. However, when overused without contrast, gray can feel cold, lifeless, and depressing — balance is essential to harness its sophistication.

Emotions & Associations

CalmMaturityNeutralityProfessionalism

Industries

AutomotiveArchitectureLuxury Fashion

Adjacent HEX Color Codes

Color Comparisons & Differences

🎨 Cohesive Color Combinations & Palettes

Copied!