Back to palettes

Palette

Indigo Dye House

A profound journey through indigo blues, like fresh textiles soaking in a traditional dye house.

CoolCalm5 colors
More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Indigo Dye House reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Indigo Dye House.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#1A237E#283593#3949AB#5C6BC0#7986CB

Palette guide

How to use Indigo Dye House

Overview

The 'Indigo Dye House' palette offers a profound and serene journey through a spectrum of rich indigo blues, capturing the essence of freshly dyed textiles. This collection, featuring the foundational #1A237E, the robust #283593, and the vibrant #3949AB, alongside the softer #5C6BC0 and the gentle #7986CB, provides a cohesive and calming gradient. Designers can leverage these deep, saturated blues to evoke trustworthiness, stability, and a sense of refined craftsmanship. Developers will find this palette excellent for creating sophisticated user interfaces and branding that requires a deep, yet approachable, cool-toned aesthetic.

Best used for

  • Corporate branding for tech or finance companies
  • Educational website designs or e-learning platforms
  • Mobile app interfaces for productivity or meditation
  • Luxury product packaging with a sophisticated feel
  • Editorial layouts for art or design publications
  • User dashboards requiring clarity and professionalism

Suggested color roles

primary

Designate #1A237E as the dominant dark blue for foundational elements like headers, footers, or large content blocks, conveying authority.

secondary

Utilize #283593 for secondary navigation, subheadings, or important content panels, maintaining a strong, cohesive visual.

accent

Deploy #5C6BC0 or #7986CB for interactive elements, calls-to-action, or highlight states, providing a lighter, engaging contrast.

background

A very light grey or crisp white is ideal to allow the deep indigos to stand out. Alternatively, a subtle pattern with #7986CB could work.

text

For optimal readability on light backgrounds, use #1A237E or #283593. On darker backgrounds, pure white or a very light grey ensures clarity.

Accessibility notes

  • Ensure #1A237E and #283593 have sufficient contrast against white or light grey backgrounds for body text.
  • The lighter #5C6BC0 and #7986CB should be used with caution for small text on mid-tone blues; always check contrast.
  • Consider using a slightly off-white for text on the darkest blues to prevent excessive luminance contrast.
  • For interactive elements using #7986CB, ensure they have sufficient visual distinction from non-interactive content.

Recommended combinations

Deep Foundation

Excellent for creating a strong, authoritative base in corporate or educational branding.

#1A237E · #283593 · #3949AB

Calm Contrast

Ideal for differentiating content sections or creating a gentle visual hierarchy in interfaces.

#3949AB · #5C6BC0 · #7986CB

Vibrant Accent

Use the lighter blues as accents against the deep primary for dynamic calls-to-action or highlights.

#1A237E · #5C6BC0 · #7986CB

CSS variables

:root {
  --indigo-dye-house-4-1: #1A237E;
  --indigo-dye-house-4-2: #283593;
  --indigo-dye-house-4-3: #3949AB;
  --indigo-dye-house-4-4: #5C6BC0;
  --indigo-dye-house-4-5: #7986CB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "indigo-dye-house-4": {
        1: "#1A237E",
        2: "#283593",
        3: "#3949AB",
        4: "#5C6BC0",
        5: "#7986CB",
      }
    }
  }
}

Related searches

deep indigo color palettecalm blue UI designcorporate indigo brandingblue color gradient websophisticated blue aesthetic

Palette colors

Hex values

Color 1#1A237E
·
Color 2#283593
·
Color 3#3949AB
·
Color 4#5C6BC0
·
Color 5#7986CB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.7:1Fail
2.7:1Fail
3.8:1AA18
2
1.3:1Fail
1.3:1Fail
2.1:1Fail
3:1AA18
3
1.7:1Fail
1.3:1Fail
1.6:1Fail
2.2:1Fail
4
2.7:1Fail
2.1:1Fail
1.6:1Fail
1.4:1Fail
5
3.8:1AA18
3:1AA18
2.2:1Fail
1.4:1Fail

Similar palettes

More like Indigo Dye House

View all Cool
Ancient Indigo Dye
Indigo Ocean Depth
Celestial Ocean Twilight
Enchanted Riverbed
Faded Denim Wash
Ocean Dreamscape