Slate Blue

HEX: #6A5ACD | Modern Palette

On White
5.31:1
PASS
On Black
3.96:1
FAIL

Color Specifications

HEX
#6A5ACD
RGB
106, 90, 205
HSL
248°, 56% ,80%
CMYK
48.29, 56.1, 0, 19.61

About Slate Blue

Slate Blue (#6A5ACD) is a color with RGB(106, 90, 205) and HSL(248.35°, 56.1%, 80.39%). In design, it fits Cool styles and is suitable for Text, Button, Background. Its complementary color is #BDCD5A, which creates strong contrast. Its triadic palette includes #CD6A5A and #5ACD6A. The name comes from Slate Blue (English).

  • HEX: #6A5ACD
  • RGB: 106, 90, 205
  • HSL: 248.35°, 56.1%, 80.39%
  • Style: Cool
  • Use case: Text, Button, Background
  • Complementary color: #BDCD5A
  • Triadic colors: #CD6A5A, #5ACD6A
  • The name comes from Slate Blue (English).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.

Color Harmonies

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

Shades & Tints

A seamless scale of #6A5ACD from deepest shade to lightest tint.

Color Characteristics

Mood
Style
Cool

Accessibility Simulation

Deuteranopia #5F5FCD
Protanopia #5C5CCD
Tritanopia #4E7171
Achromatopsia #6B6B6B

Frequently Asked Questions

Slate Blue (#6A5ACD) is a color with RGB(106, 90, 205) and HSL(248.35°, 56.1%, 80.39%).

#6A5ACD pairs strongly with #BDCD5A as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#6A5ACD is suitable for Text, Button, Background and works well with Cool styles.

The name Slate Blue is linked to Slate Blue from English, meaning A color resembling the bluish-grey color of slate rock..

Name, History & Etymology

Origin Word Slate Blue
Meaning A color resembling the bluish-grey color of slate rock.
Language English
First Recorded Use Late 17th - Early 18th Century

History

Slate is a fine-grained, foliated, homogeneous metamorphic rock derived from an original shale-type sedimentary rock composed of clay or volcanic ash through low-grade regional metamorphism. It is known for its ability to be split into thin, durable sheets, making it popular for roofing, flooring, and writing tablets. The natural color of slate varies, but often includes shades of grey, blue-grey, dark grey, and sometimes purple-grey or green-grey. The specific 'slate blue' color refers to the bluer end of this spectrum, a muted, somewhat desaturated blue with a significant grey component. Its popularity as a color name likely grew with the increasing use and familiarity of slate as a material in everyday life.

First Recorded Use

The term 'slate' for the rock itself has been around much longer, but its use as a specific color descriptor, particularly with 'blue' appended, became more common in written records and fashion/dyeing contexts from the late 17th century onwards. Earlier references might describe 'bluish grey' or 'greyish blue' without the direct 'slate blue' compound.

Cultural Associations

Slate blue is often associated with sophistication, calmness, and stability due to its muted and natural tone. It's a versatile color, frequently used in interior design, fashion, and graphic design for its ability to act as a neutral while still providing a hint of color. It can evoke feelings of tranquility and seriousness. It's less vibrant than a true blue, making it feel more grounded and mature.

Similar Named Colors

Majorelle Blue #6050DC ΔE 3.70
Iris #5A4FCF ΔE 3.98
Toolbox #746CC0 ΔE 6.52
Medium Slate Blue #7B68EE ΔE 7.10

Code Snippets

/* Background */
.element {
    background-color: #6A5ACD;
}

/* Text */
.element {
    color: #6A5ACD;
}

/* Border */
.element {
    border: 1px solid #6A5ACD;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #6A5ACD,
        #E1E9B1
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #6A5ACD,
        #E1E9B1
    );
}

// SCSS variable
$slate-blue: #6A5ACD;

// With RGB channels (useful for rgba() usage)
$slate-blue-r: 106;
$slate-blue-g: 90;
$slate-blue-b: 205;

// Usage
.element {
    background-color: $slate-blue;
    color: rgba($slate-blue-r, $slate-blue-g, $slate-blue-b, 0.8);
}