CSS Color: SlateBlue
Named CSS color SlateBlue — #6A5ACD in HEX, rgb(106, 90, 205) in RGB, hsl(248, 53%, 58%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | SlateBlue | color: SlateBlue; |
| HEX | #6A5ACD | color: #6A5ACD; |
| RGB | rgb(106, 90, 205) | color: rgb(106, 90, 205); |
| HSL | hsl(248, 53%, 58%) | color: hsl(248, 53%, 58%); |
About SlateBlue
SlateBlue is a muted blue-violet that combines the authority of blue with the creativity of purple. At hex `#6A5ACD`, it sits at 248 degrees with 53% saturation and 58% lightness. Its moderate saturation gives it a more refined, less flashy character than brighter purples.
In web design, SlateBlue works well for interactive elements, creative tooling, and modern SaaS products. Its muted quality makes it easier to pair with other colors than more saturated purples. It is a particularly good choice for designs that want purple energy without purple's association with luxury or royalty.
For accessibility, SlateBlue against white achieves approximately 4.0:1 contrast, passing WCAG AA for large text. Against dark backgrounds, it provides good readability with a distinctive, creative feel.
SlateBlue is more blue than MediumPurple and more purple than SteelBlue, occupying a unique position between the two. It pairs well with white, light gray, soft pink, and warm gold. In Tailwind CSS, `indigo-500` or `violet-500` are approximate matches.
FAQ
What is the hex code for SlateBlue?
The CSS named color SlateBlue has the hex code #6A5ACD. You can use it in CSS as color: #6A5ACD; or simply color: SlateBlue;.
What is SlateBlue in RGB?
In RGB notation, SlateBlue is rgb(106, 90, 205). Use it in CSS as color: rgb(106, 90, 205);.
What is SlateBlue in HSL?
In HSL notation, SlateBlue is hsl(248, 53%, 58%). Use it in CSS as color: hsl(248, 53%, 58%);.
What color category is SlateBlue?
SlateBlue belongs to the Purple color family in the CSS named colors specification.
Can I use the name "SlateBlue" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: SlateBlue; or background-color: SlateBlue; directly in your stylesheet. Named colors are case-insensitive.
Related Colors
Try in Color Converter
Convert SlateBlue to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →