Dark Slate Blue

Tints & Shades

Scale from white (50) through Dark Slate Blue (500) to black (900), interpolated in Lab color space.

Design Applications

Color Harmonies

Similar Colors

Color Meaning & Psychology

Blue is the world's most universally preferred color across cultures. It slows respiration, lowers blood pressure, and promotes calm — the physiological opposite of red. Blue's associations with sky and water make it feel limitless, trustworthy, and reliable. In corporate design, blue dominates banking, insurance, healthcare, and technology precisely because it communicates stability. Dark navy conveys authority and tradition; royal blues suggest quality and aspiration; sky blues feel open and optimistic; teal bridges trust with modernity. The primary limitation of blue is food — it suppresses appetite, with almost no naturally blue foods existing in nature. Its deeper, richer tone gives it gravitas and sophistication, making it well-suited for primary brand colors, typography, and contexts where authority matters.

Industry Usage

Common contexts and industries where Dark Slate Blue is applied in professional design.

• Banking, insurance, and financial institutions
• Healthcare and medical device companies
• Enterprise software and SaaS platforms
• Government and public sector organizations
• Airlines and aviation brands
• Communication and social networking apps
• Cybersecurity and data protection products
• Pharmaceutical companies and clinical products

Accessibility Considerations

CSS & Code Examples

Tailwind CSS Utilities

Use arbitrary value syntax in Tailwind CSS to apply Dark Slate Blue without a custom config.

Design Tokens

Ready-to-use Dark Slate Blue design token in CSS custom properties, SCSS, Tailwind v3/v4, and JSON formats.

:root {
  --color-dark-slate-blue: #483D8B;
  --color-dark-slate-blue-rgb: 72, 61, 139;
  --color-dark-slate-blue-hsl: 248, 39%, 39%;
}

$color-dark-slate-blue: #483D8B;
$color-dark-slate-blue-rgb: 72, 61, 139;
$color-dark-slate-blue-hsl: 248, 39%, 39%;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'dark-slate-blue': '#483D8B',
      },
    },
  },
};

/* tailwind.css */
@theme {
  --color-dark-slate-blue: #483D8B;
}

{
  "dark-slate-blue": {
    "value": "#483D8B",
    "type": "color",
    "description": "Dark Slate Blue — #483D8B"
  }
}

Accessibility & Design Guides

Frequently Asked Questions

What is the hex code for Dark Slate Blue?

▾

The hex code for Dark Slate Blue is #483D8B. Its RGB values are rgb(72, 61, 139) and its HSL values are hsl(248, 39%, 39%).

What does Dark Slate Blue mean in design?

▾

Blue is the world's most universally preferred color across cultures. It slows respiration, lowers blood pressure, and promotes calm — the physiological opposite of red. Blue's associations with sky and water make it feel limitless, trustworthy, and reliable. In corporate design, blue dominates banking, insurance, healthcare, and technology precisely because it communicates stability. Dark navy conveys authority and tradition; royal blues suggest quality and aspiration; sky blues feel open and optimistic; teal bridges trust with modernity. The primary limitation of blue is food — it suppresses appetite, with almost no naturally blue foods existing in nature. Its deeper, richer tone gives it gravitas and sophistication, making it well-suited for primary brand colors, typography, and contexts where authority matters.

Is Dark Slate Blue WCAG accessible?

▾

Dark Slate Blue (#483D8B) passes WCAG AAA on white with a 9.07:1 contrast ratio. Its overall accessibility score is 96/100.

What colors go well with Dark Slate Blue?

▾

Dark Slate Blue pairs well with its complementary color Army Green (#454B1B). Analogous colors like Cornflower Blue and Phthalo Blue also work harmoniously. Check the Color Harmonies section above for the full palette.

What is Dark Slate Blue used for?

▾

Dark Slate Blue is commonly used for: Banking, insurance, and financial institutions; Healthcare and medical device companies; Enterprise software and SaaS platforms; Government and public sector organizations; Airlines and aviation brands.

What are the CSS and Tailwind values for Dark Slate Blue?

▾

In CSS, use `color: #483D8B` or `background-color: #483D8B`. The CSS custom property is `--color-dark-slate-blue: #483D8B`. In Tailwind CSS, use the arbitrary value class `bg-[#483D8B]` for backgrounds or `text-[#483D8B]` for text.