Dark Slate Blue

HEX: #483D8B | Modern Palette

On White
9.07:1
PASS
On Black
2.32:1
FAIL

Color Specifications

HEX
#483D8B
RGB
72, 61, 139
HSL
248°, 56% ,54%
CMYK
48.2, 56.12, 0, 45.49

About Dark Slate Blue

Dark Slate Blue (#483D8B) is a color with RGB(72, 61, 139) and HSL(248.46°, 56.12%, 54.51%). In design, it fits Cool styles and is suitable for Text, Button, Logo. Its complementary color is #808B3D, which creates strong contrast. Its triadic palette includes #8B483D and #3D8B48. The name comes from Dark Slate Blue (English).

  • HEX: #483D8B
  • RGB: 72, 61, 139
  • HSL: 248.46°, 56.12%, 54.51%
  • Style: Cool
  • Use case: Text, Button, Logo
  • Complementary color: #808B3D
  • Triadic colors: #8B483D, #3D8B48
  • The name comes from Dark 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 #483D8B from deepest shade to lightest tint.

Color Characteristics

Mood
Style
Cool
Use case
Text Button Logo

Accessibility Simulation

Deuteranopia #40408B
Protanopia #3E3E8B
Tritanopia #364D4D
Achromatopsia #494949

Frequently Asked Questions

Dark Slate Blue (#483D8B) is a color with RGB(72, 61, 139) and HSL(248.46°, 56.12%, 54.51%).

#483D8B pairs strongly with #808B3D as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#483D8B is suitable for Text, Button, Logo and works well with Cool styles.

The name Dark Slate Blue is linked to Dark Slate Blue from English, meaning A dark shade of blue with a hint of grey, reminiscent of slate rock..

Name, History & Etymology

Origin Word Dark Slate Blue
Meaning A dark shade of blue with a hint of grey, reminiscent of slate rock.
Language English
First Recorded Use Late 20th Century

History

The color name 'Dark Slate Blue' is part of the extended X11 color naming scheme, which became standardized in the late 1980s and early 1990s for computer displays. These names were designed to provide a more descriptive and human-readable way to refer to specific RGB color values beyond the basic primary and secondary colors. 'Slate Blue' itself refers to the bluish-grey color of natural slate rock, and 'Dark' simply indicates a deeper, less saturated version of that hue. It's a common color in web design and graphic interfaces due to its inclusion in standard color palettes.

First Recorded Use

Circa 1987 (with X11 color naming)

Cultural Associations

In modern digital culture, 'Dark Slate Blue' is often perceived as a sophisticated, stable, and somewhat conservative color. It's frequently used in corporate branding, user interfaces, and professional websites to convey reliability and seriousness. It can also evoke a sense of calm and depth, similar to other dark blues. While not as iconic as 'Navy Blue,' it holds a similar gravitas in digital contexts.

Similar Named Colors
Blue-magenta Violet #553592 ΔE 4.20
Blue (pigment) #333399 ΔE 5.15
Regalia #522D80 ΔE 5.97
Cyber Grape #58427C ΔE 6.00

Code Snippets

/* Background */
.element {
    background-color: #483D8B;
}

/* Text */
.element {
    color: #483D8B;
}

/* Border */
.element {
    border: 1px solid #483D8B;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #483D8B,
        #BACC4A
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #483D8B,
        #BACC4A
    );
}

// SCSS variable
$dark-slate-blue: #483D8B;

// With RGB channels (useful for rgba() usage)
$dark-slate-blue-r: 72;
$dark-slate-blue-g: 61;
$dark-slate-blue-b: 139;

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