Figma color wheel
Want to find the perfect complementary or analogous colors to match slate?
Skip to main content
Everything you need to know about slate gray to inspire your next design.
Slate is a cool, neutral hue that blends shades of blue, gray, and a hint of green. Positioned between blue and gray on the color wheel, it is a sophisticated and versatile color with an understated elegance. Shades within the slate family range from dark, stormy blue-gray to lighter, softer gray.
Shades
Tints
Tones
Hues
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Monochromatic
Complementary
Adjacent
Slate is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #6D8196
- RGB value: 42.7% red, 50.6% green and 58.8% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
Here are some strategic ways to effectively incorporate slate into your UI designs:
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same muted and versatile spectrum as slate, consider:
To complement slate's understated tones, consider pairing it with:
Consider also integrating silver as an accent to elevate the sophistication, wood tones for warmth, and black for a classic appeal.
While slate is quite adaptable, it may clash with:
Slate embodies professionalism, reliability, and sophistication, offering a balanced and neutral feel. Its understated elegance links it to modernity and technology.
Its slight blue undertone brings tranquility and stability in color psychology, making it perfect for calming, secure spaces and products.
Slate provides a clean, uncluttered background for websites and applications that enhances readability and organization. It effectively conveys reliability and practicality, making it a strong choice for financial or e-commerce platforms. Despite its professional look, slate can also seem warm and approachable, especially with brighter accent colors.
The name "slate" comes from a natural rock known for its fine grain and typical grayish-blue appearance. Historically, builders have extensively used slate as a building material, especially for roofing, because of its durability and the ease of splitting it into flat, thin sheets. Its architectural use spans hundreds of years, making it a common sight in areas where the rock naturally occurs.
Today, slate is used in design as a sophisticated alternative to standard gray or blue, offering a sleek, professional look that fits well in corporate and technological environments.
Contrast 4.01
#6D8196
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Pass | Fail | |
Pass | Fail |
Contrast 5.23
#6D8196
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Fail | |
Pass | Pass | |
Pass | Pass |
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #6D8196, known as slate, has RGB values of R:109, G:129, B:150 and CMYK values of C:0.27, M:0.14, Y:0, K:0.41.
| VALUE | CSS | |
|---|---|---|
| HEX | 6D8196 | #6D8196 |
| RGB DECIMAL | 109, 129, 150 | rgb(109,129,150) |
| RGB PERCENTAGE | 42.7, 50.6, 58.8 | rgb(42.7%,50.6%,58.8%) |
| CMYK | 27, 14, 0, 41 | |
| HSL | 210.7°, 16.3, 50.8 | hsl(210.7,16.3%,50.8%) |
| HSV (OR HSB) | 210.7°, 27.3, 58.8 | |
| WEB SAFE | 669999 | #669999 |
| CIE-LAB | 53.117, -2.213, -13.666 | |
| XYZ | 19.661, 21.153, 31.9 | |
| xyY | 0.27, 0.291, 21.153 | |
| CIE-LCH | 53.117, 13.844, 260.801 | |
| CIE-LUV | 53.117, -11.098, -19.551 | |
| HUNTER-LAB | 45.993, -4.183, -8.928 | |
| BINARY | 01101101, 10000001, 10010110 | |
| iOS - SwiftUI | Color(red: 109/255, green: 129/255, blue: 150/255) | |
| iOS - UIKit | UIColor(red: 109/255.0, green: 129/255.0, blue: 150/255.0, alpha: 1.0) | |
| Android - Compose | Color(0xFF6D8196) |
Want to find the perfect complementary or analogous colors to match slate?
Learn about the color gunmetal gray.
Learn more about silver.