Palette

Rusty Cogwheel Dawn

Industrial warmth of aged brass and copper at sunrise, perfect for a vintage, intricate design.

WarmRetro5 colors

More Warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rusty Cogwheel Dawn 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 Rusty Cogwheel Dawn.

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

Data visualization

#3A2B2A#6D4C41#A16E5A#D49A7D#F2CCA0

Palette guide

How to use Rusty Cogwheel Dawn

Overview

The Rusty Cogwheel Dawn palette brings together the warm, intricate tones of aged brass and copper at sunrise, ideal for steampunk, vintage, or industrial designs. Anchored by the deep, sepia-like #3A2B2A and complemented by the rich #6D4C41, it progresses through the warm #A16E5A and the glowing #D49A7D. The palette culminates in the soft, creamy #F2CCA0, evoking a sense of antique machinery catching the first light. This collection is perfect for designers and developers crafting experiences that blend historical charm with mechanical ingenuity, offering a sophisticated yet rugged aesthetic.

Best used for

Steampunk-themed websites and games
Vintage branding for artisan goods
Retro-futuristic product design
Coffee shop and brewery aesthetics
Historical fiction book covers
Intricate UI designs with a mechanical feel

Suggested color roles

primary

Establish #3A2B2A as the dominant dark color, providing a solid, industrial foundation for layout elements.

secondary

Utilize #6D4C41 for supporting panels, textural backgrounds, or secondary navigation, adding depth.

accent

Employ #D49A7D for key highlights, metallic details, or interactive elements that need to stand out with a warm glow.

background

Use #3A2B2A for a deep, immersive background, or #F2CCA0 for a light, airy canvas that allows darker elements to shine.

text

For dark backgrounds, #F2CCA0 offers excellent readability. For light backgrounds, #3A2B2A or a dark charcoal provides crisp text.

Accessibility notes

Ensure #F2CCA0 provides sufficient contrast when used as text on #3A2B2A and #6D4C41 backgrounds.
Be cautious with #A16E5A and #D49A7D for small text on similar mid-tones, as contrast may be insufficient.
Prioritize high contrast for critical UI elements, using the darkest and lightest colors for maximum legibility.
Check all text sizes and color pairings for WCAG AA compliance to ensure broad accessibility.

Recommended combinations

Steampunk Core

Ideal for a hero section: #3A2B2A background, #F2CCA0 for headlines, and #D49A7D for calls to action or key details.

#3A2B2A · #F2CCA0 · #D49A7D

Aged Mechanics

Creates a rich, layered effect for content cards or detailed diagrams, evoking worn metal and gears.

#6D4C41 · #A16E5A · #3A2B2A

Dawn Glow

Use #F2CCA0 as a clean background, #3A2B2A for primary text, and #D49A7D for vibrant accents or interactive elements.

#F2CCA0 · #3A2B2A · #D49A7D

CSS variables

:root {
  --rusty-cogwheel-dawn-1: #3A2B2A;
  --rusty-cogwheel-dawn-2: #6D4C41;
  --rusty-cogwheel-dawn-3: #A16E5A;
  --rusty-cogwheel-dawn-4: #D49A7D;
  --rusty-cogwheel-dawn-5: #F2CCA0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rusty-cogwheel-dawn": {
        1: "#3A2B2A",
        2: "#6D4C41",
        3: "#A16E5A",
        4: "#D49A7D",
        5: "#F2CCA0",
      }
    }
  }
}

Hex values

Color 1#3A2B2A

Color 2#6D4C41

Color 3#A16E5A

Color 4#D49A7D

Color 5#F2CCA0

Accessibility

Contrast checker

1.8:1Fail

3.1:1AA18

5.6:1AA

8.9:1AAA

1.8:1Fail

3.2:1AA18

5:1AA

3.1:1AA18

1.8:1Fail

2.8:1Fail

5.6:1AA

3.2:1AA18

1.8:1Fail

1.6:1Fail

8.9:1AAA

5:1AA

2.8:1Fail

1.6:1Fail

Similar palettes

More like Rusty Cogwheel Dawn

Rusty Cogwheel Dawn

See it in context.

Ready when you are.

Built with Rusty Cogwheel Dawn.

How to use Rusty Cogwheel Dawn

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Steampunk Core

Aged Mechanics

Dawn Glow

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Rusty Cogwheel Dawn