Back to palettes

Palette

Indigo Dye House

A deep, rich palette reflecting the saturated blues of an ancient indigo dye workshop, calming yet profound.

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

#2E4C6D#4A698A#7AA1C9#1A3755#618FB4

Palette guide

How to use Indigo Dye House

Overview

The 'Indigo Dye House' palette presents a rich and calming array of blues, reminiscent of traditional indigo textile processes. This collection, featuring the profound #2E4C6D, the balanced #4A698A, and the vibrant #7AA1C9, alongside the foundational #1A3755 and the versatile #618FB4, offers a harmonious gradient. Designers can leverage these deep, saturated blues to evoke a sense of heritage and tranquility, making it perfect for projects requiring depth without overwhelming intensity. Developers will find these hues easy to integrate for cohesive, visually appealing interfaces that convey stability and craftsmanship, ensuring a profound user experience.

Best used for

  • Brand identity for artisanal or heritage businesses
  • Serene website designs for wellness or craft sites
  • Packaging for luxury or handcrafted goods
  • Educational platforms focusing on history or nature
  • Mobile app interfaces requiring a calming, professional feel
  • Interior design schemes for libraries or studies

Suggested color roles

primary

Utilize #1A3755 as the foundational dark blue for robust headers, footers, or primary navigation, grounding the design.

secondary

Employ #2E4C6D for key content areas, subheadings, or prominent buttons, providing a strong, elegant presence.

accent

Apply #7AA1C9 sparingly for interactive elements, calls-to-action, or highlight states, offering a bright, inviting contrast.

background

A very light grey or off-white works best. Alternatively, a soft, desaturated version of #618FB4 could provide a subtle, themed background.

text

For dark backgrounds, use white or a very light grey. On light backgrounds, #1A3755 or #2E4C6D ensures excellent readability.

Accessibility notes

  • Ensure #1A3755 or #2E4C6D provides sufficient contrast against white or light backgrounds for body text.
  • The lighter #7AA1C9 should primarily be used as an accent on darker blues; avoid using it for small text on mid-tones.
  • Test contrast between all text and background pairings, especially when using #618FB4.
  • Consider using a slightly desaturated white for text on #1A3755 to reduce eye strain in large blocks.

Recommended combinations

Deep Serenity

Ideal for creating a sense of depth and calm in hero sections or prominent banners.

#1A3755 · #2E4C6D · #4A698A

Vibrant Highlight

Perfect for drawing attention to key information or interactive elements against a darker base.

#2E4C6D · #618FB4 · #7AA1C9

Subtle Gradient

Use for smooth transitions in backgrounds or UI components, creating a flowing visual experience.

#1A3755 · #4A698A · #618FB4

CSS variables

:root {
  --indigo-dye-house-3-1: #2E4C6D;
  --indigo-dye-house-3-2: #4A698A;
  --indigo-dye-house-3-3: #7AA1C9;
  --indigo-dye-house-3-4: #1A3755;
  --indigo-dye-house-3-5: #618FB4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "indigo-dye-house-3": {
        1: "#2E4C6D",
        2: "#4A698A",
        3: "#7AA1C9",
        4: "#1A3755",
        5: "#618FB4",
      }
    }
  }
}

Related searches

deep indigo blue palettecalming blue color schemesheritage craft colorssaturated blue web designtraditional indigo tones

Palette colors

Hex values

Color 1#2E4C6D
·
Color 2#4A698A
·
Color 3#7AA1C9
·
Color 4#1A3755
·
Color 5#618FB4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.3:1AA18
1.4:1Fail
2.6:1Fail
2
1.6:1Fail
2.1:1Fail
2.1:1Fail
1.7:1Fail
3
3.3:1AA18
2.1:1Fail
4.5:1AA
1.3:1Fail
4
1.4:1Fail
2.1:1Fail
4.5:1AA
3.5:1AA18
5
2.6:1Fail
1.7:1Fail
1.3:1Fail
3.5:1AA18

Similar palettes

More like Indigo Dye House

View all cool