CSS Color: SlateGray
Named CSS color SlateGray — #708090 in HEX, rgb(112, 128, 144) in RGB, hsl(210, 13%, 50%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | SlateGray | color: SlateGray; |
| HEX | #708090 | color: #708090; |
| RGB | rgb(112, 128, 144) | color: rgb(112, 128, 144); |
| HSL | hsl(210, 13%, 50%) | color: hsl(210, 13%, 50%); |
About SlateGray
SlateGray is a cool gray with a subtle blue undertone. At hex `#708090`, it has slightly different RGB values (112, 128, 144) unlike pure grays. The blue channel is highest, giving it a cool, sophisticated feel. In HSL, it sits at 210 degrees with 13% saturation.
In web design, SlateGray is one of the most popular grays because its blue undertone aligns with the blue-heavy color schemes common in technology products. It works well for secondary text, borders, icons, and subdued UI elements in professional interfaces.
For accessibility, SlateGray against white achieves approximately 4.0:1 contrast, passing WCAG AA for large text. For body text, use DarkSlateGray or a darker shade. The subtle blue tint makes text feel more polished than pure gray.
SlateGray pairs naturally with blue-based designs and cool color schemes. It works with white, navy, sky blue, and warm accents like coral. In Tailwind CSS, `slate-500` is an excellent match for this popular cool gray.
FAQ
What is the hex code for SlateGray?
The CSS named color SlateGray has the hex code #708090. You can use it in CSS as color: #708090; or simply color: SlateGray;.
What is SlateGray in RGB?
In RGB notation, SlateGray is rgb(112, 128, 144). Use it in CSS as color: rgb(112, 128, 144);.
What is SlateGray in HSL?
In HSL notation, SlateGray is hsl(210, 13%, 50%). Use it in CSS as color: hsl(210, 13%, 50%);.
What color category is SlateGray?
SlateGray belongs to the Gray color family in the CSS named colors specification.
Can I use the name "SlateGray" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: SlateGray; or background-color: SlateGray; directly in your stylesheet. Named colors are case-insensitive.
Try in Color Converter
Convert SlateGray to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →