Back to palettes

Palette

Indigo Dye House

Deep blues and muted greens inspired by the rich, varying tones of traditional indigo dye.

coolelegant5 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

#082032#2C394B#334756#5F7161#7B886F

Palette guide

How to use Indigo Dye House

Overview

The 'Indigo Dye House' palette offers a sophisticated blend of deep blues and muted greens, evoking the rich, natural tones of traditional textile dyeing. This elegant collection, featuring colors like the profound #082032, the deep blue-grey #2C394B, and the intriguing #334756, alongside the earthy #5F7161 and soft #7B886F, is ideal for projects requiring depth and natural serenity. Designers will find these hues versatile for creating compelling visual narratives, while developers can leverage their cohesive nature for robust, themed interfaces. The palette's balance of cool and subtle warm tones ensures a timeless appeal, perfect for conveying authenticity and refined craftsmanship.

Best used for

  • Brand identity for artisan crafts or sustainable fashion
  • Elegant website designs with a natural, muted aesthetic
  • Interior design mood boards for tranquil living spaces
  • Packaging for organic or handcrafted products
  • Editorial design for nature or heritage publications
  • User interfaces requiring a sophisticated, calming theme

Suggested color roles

primary

Use #082032 as the dominant dark anchor for headers, footers, or large sections, establishing a sense of depth and stability.

secondary

Employ #2C394B for key navigational elements, secondary headings, or panels, providing a strong contrast to the primary while maintaining cohesion.

accent

Apply #5F7161 or #7B886F sparingly for calls-to-action, interactive elements, or subtle graphic details, adding a touch of natural warmth.

background

Opt for a very light off-white or cream, or a soft variant of #7B886F, to ensure readability and a serene backdrop without overwhelming the darker shades.

text

For body text, use #082032 or #2C394B on light backgrounds. For text on darker backgrounds, use pure white or a light shade like #7B886F for optimal contrast.

Accessibility notes

  • Ensure sufficient contrast between #082032 and light text (e.g., white) for WCAG AA compliance.
  • Avoid placing #5F7161 or #7B886F directly against #334756 for text, as contrast may be insufficient.
  • Utilize a contrast checker for all text-to-background combinations, especially with the mid-tones like #334756.
  • Reserve the lighter #7B886F for larger text or as a background for dark text to maximize readability.

Recommended combinations

Deep & Earthy

Excellent for sophisticated brand logos or section dividers, offering a grounded yet elegant feel.

#082032 · #5F7161 · #7B886F

Muted Contrast

Ideal for content blocks or card backgrounds where hierarchy needs subtle differentiation without harsh contrasts.

#2C394B · #334756 · #7B886F

Subtle Depth

Perfect for creating gradients or layered effects in UI elements, providing a smooth visual transition.

#082032 · #334756 · #5F7161

CSS variables

:root {
  --indigo-dye-house-2-1: #082032;
  --indigo-dye-house-2-2: #2C394B;
  --indigo-dye-house-2-3: #334756;
  --indigo-dye-house-2-4: #5F7161;
  --indigo-dye-house-2-5: #7B886F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "indigo-dye-house-2": {
        1: "#082032",
        2: "#2C394B",
        3: "#334756",
        4: "#5F7161",
        5: "#7B886F",
      }
    }
  }
}

Related searches

indigo and green color schememuted blue green paletteearthy indigo colorsnatural dye inspired palettesophisticated blue green design

Palette colors

Hex values

Color 1#082032
·
Color 2#2C394B
·
Color 3#334756
·
Color 4#5F7161
·
Color 5#7B886F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.7:1Fail
3.2:1AA18
4.4:1AA18
2
1.4:1Fail
1.2:1Fail
2.2:1Fail
3.1:1AA18
3
1.7:1Fail
1.2:1Fail
1.8:1Fail
2.6:1Fail
4
3.2:1AA18
2.2:1Fail
1.8:1Fail
1.4:1Fail
5
4.4:1AA18
3.1:1AA18
2.6:1Fail
1.4:1Fail

Similar palettes

More like Indigo Dye House

View all cool