Figma color wheel
Want to find the perfect complementary or analogous colors to match slate?
Slate Blue is a sophisticated, muted color that exhibits refined shades of gray and blue. Positioned on the blue section of the color wheel, this hue leans towards gray, offering a softer alternative to more stark shades of blue. It's similar to the color of a stormy sea or the smooth surface of a slate rock, hence the name. Slate Blue brings to mind feelings of calm and stability, but also carries an undercurrent of strength. This enables it to add depth and complexity to designs while maintaining a sense of tranquility. Whether used in fashion, interior design, or graphic design, Slate Blue manages to bring an elegant touch of distinction. It seamlessly balances between being understated and noteworthy, making it a highly versatile color.
Color variations
Shades
Tints
Tones
Hues
Color Harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom Palettes
Steel Serenity
Mountain Mist
Seaside Harmony
For variations within the same spectrum as slate blue, consider:
- Pewter (#909eae): This color shares a mix of blue and gray tones, offering a more muted, cool vibe that aligns with the understated elegance of Slate Blue.
- Cadet Blue (#5F9EA0): With its balance of blue and green undertones, this hue exudes a calm and relaxed quality that resonates with the subdued depth of Slate Blue.
- Glaucous (#678dc6): Similar in its blend of blue and gray, this shade delivers a tranquil and sophisticated tone that echoes the quiet charm of Slate Blue.
- Slate Gray (#6d8196): Although slightly darker, this color mirrors the muted and balanced nature of Slate Blue with its comparable mix of blue and gray elements.
To complement slate blue, consider pairing it with:
- Orange (#FFA500): This warm, vibrant hue contrasts slate blue's cool tones, creating a balanced and lively color palette.
- Peach (#FFD3AC): A soft, inviting shade that adds warmth, enhancing slate blue's calming and soothing qualities in interior design.
- Coral (#FF8559): With its energetic and cheerful vibe, coral injects a playful touch, making slate blue pop in any setting.
- Olive Green (#636B2F): This earthy tone creates a natural, harmonious balance with slate blue's cool tones, adding depth to your design.
- Lavender (#D3D3FF): A soft, pastel shade that complements slate blue's tranquil aura, offering an artistic inspiration for serene spaces.
Other colors worth considering include chartreuse for a striking contrast and mustard yellow for a warm, cozy atmosphere.
While slate blue is a calm and timeless shade that often evokes tranquility, some color choices may conflict with its muted charm:
- Orange (#FFA500): This bold hue sits opposite on the color wheel, creating a stark contrast with slate blue that can be too vibrant for cohesive design.
- Neon Green (#2CFF05): This intense, bright shade overpowers the subtle nature of slate blue, creating a visually jarring effect that may not complement a balanced color palette.
- Scarlet (#ED2100): Scarlet’s warm intensity can clash with slate blue’s cool tones, causing tension rather than harmony in design settings.
- Hot Pink (#FF46A2): The energetic vibe of hot pink competes directly with slate blue's subdued presence, resulting in a high-energy pairing that lacks visual cohesion.
- Marigold (#EAA221): This warm, golden tone may clash with the soft hues of slate blue, leading to a contrast that might feel unbalanced and disjointed in interior design or artistic inspiration.
Contrast 4.44
- Large Text
#557C99
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Pass | Fail | |
Pass | Fail |
Contrast 4.73
- Large Text
#557C99
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Fail | |
Pass | Pass | |
Pass | Pass |
Color simulations
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 | 0047AB | #0047AB |
| RGB DECIMAL | (0, 71, 171) | rgb(0, 71, 171) |
| RGB PERCENTAGE | (0%, 27.84%, 67.06%) | rgb(0%, 27.84%, 67.06%) |
| CMYK | 100, 58, 0, 33 | |
| HSL | 218.13, 100%, 33.53% | hsl(218.13, 100%, 33.53%) |
| HSV (OR HSB) | 218.13, 100%, 33.53% | |
| WEB SAFE | 0066CC | #0066CC |
| CIE-LAB | 32.9, 18.1, -65.3 | |
| XYZ | 10.332, 8.663, 33.682 | |
| xyY | 0.143, 0.084, 8.664 | |
| CIE-LCH | 218.13, 69.82, 306.92 | |
| CIE-LUV | -14.68, -40.73, -83.24 | |
| HUNTER-LAB | 32.9, 27.1, 244.5 | |
| BINARY | 00000000, 01000111, 10101011 | |
| iOS - SwiftUI | Color(0.000, 0.278, 0.671) | |
| iOS - UIKit | UIColor(red: 0.000, green: 0.278, blue: 0.671, alpha: 1.0) | |
| Android - Compose | Color(0xFF0047AB) |
