Palette

Gouache Stain

Muted yet rich red tones, like the velvety stain left by dry gouache paint on rough paper.

warmretro5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gouache Stain 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 Gouache Stain.

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

Data visualization

#A6402D#E06D5C#F0A397#F7D1CC#8C3425

Palette guide

How to use Gouache Stain

Overview

The Gouache Stain palette offers a collection of muted yet rich red tones, reminiscent of vintage art supplies. With #8C3425 as a deep anchor, progressing through #A6402D and #E06D5C, to the delicate #F0A397 and #F7D1CC, this palette evokes a warm, earthy, and slightly retro aesthetic. It's perfectly suited for designers seeking to convey authenticity, craftsmanship, or a comforting, handmade feel. These hex codes are versatile for branding that aims for a soft yet impactful presence, or for digital interfaces that benefit from a warm, inviting, and subtly sophisticated color scheme. Developers will appreciate its cohesive nature for consistent UI elements.

Best used for

Art and craft brand identities
Vintage-inspired websites
Boutique product packaging
Cozy blog designs
Editorial layouts with a soft touch
Handmade goods e-commerce

Suggested color roles

primary

Use #A6402D as a grounding primary color for headers, main content blocks, or key branding elements, providing a warm, earthy base.

secondary

Apply #E06D5C for supporting content, call-out boxes, or navigation elements, offering a softer yet vibrant complementary tone.

accent

Employ #F0A397 sparingly for delicate highlights, subtle interactive states, or decorative elements to add a touch of lightness.

background

Choose #F7D1CC for a soft, inviting background, providing ample contrast for darker text and elements.

text

Utilize #8C3425 for headings and main body text on lighter backgrounds like #F7D1CC, ensuring excellent readability and a cohesive feel.

Accessibility notes

Ensure sufficient contrast for text on backgrounds; #8C3425 on #F7D1CC offers good readability.
Verify that #F0A397 is not used for small text on #E06D5C, as contrast may be too low.
For interactive elements, use #A6402D or #8C3425 to ensure visibility against lighter backgrounds.
Avoid using #F7D1CC for text on #F0A397; choose a darker color for contrast.

Recommended combinations

Earthy Warmth

Excellent for website headers, blog post backgrounds, or product descriptions, providing a grounded yet soft aesthetic.

#8C3425 · #A6402D · #F7D1CC

Soft Gradient

Ideal for creating subtle gradients in hero sections, background patterns, or visual transitions that evoke a gentle flow.

#A6402D · #E06D5C · #F0A397

Vintage Accent

Perfect for call-to-action buttons, interactive elements, or subtle graphic details that need to pop with a muted vibrancy.

#E06D5C · #F7D1CC · #8C3425

CSS variables

:root {
  --gouache-stain-1: #A6402D;
  --gouache-stain-2: #E06D5C;
  --gouache-stain-3: #F0A397;
  --gouache-stain-4: #F7D1CC;
  --gouache-stain-5: #8C3425;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gouache-stain": {
        1: "#A6402D",
        2: "#E06D5C",
        3: "#F0A397",
        4: "#F7D1CC",
        5: "#8C3425",
      }
    }
  }
}

Hex values

Color 1#A6402D

Color 2#E06D5C

Color 3#F0A397

Color 4#F7D1CC

Color 5#8C3425

Accessibility

Contrast checker

1.9:1Fail

3.1:1AA18

4.4:1AA18

1.3:1Fail

1.9:1Fail

1.6:1Fail

2.3:1Fail

2.5:1Fail

3.1:1AA18

1.6:1Fail

1.4:1Fail

3.9:1AA18

4.4:1AA18

2.3:1Fail

1.4:1Fail

5.7:1AA

1.3:1Fail

2.5:1Fail

3.9:1AA18

5.7:1AA

Similar palettes

More like Gouache Stain

Abstract Expression Layer

Aged Copper Patina

Aged Saddle Stitch