Back to palettes

Palette

Cogwheel Fantasy

A blend of warm metallics and aged tones, reminiscent of intricate machinery and Victorian futurism.

earthretro5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B87333#CD7F32#A9A9A9#696969#8B4513

Palette guide

How to use Cogwheel Fantasy

Overview

The Cogwheel Fantasy palette is a captivating blend of warm metallics and aged tones, reminiscent of intricate machinery and Victorian futurism. Featuring the rich #B87333 (copper), the deep #8B4513 (bronze), and balanced grays like #A9A9A9 and #696969, this palette exudes a distinct retro-futuristic mood. Designers can leverage these earthy, metallic shades to evoke a sense of vintage craftsmanship, industrial elegance, or steampunk fantasy. Developers will find these colors ideal for creating immersive game UIs, unique website themes, or compelling digital art that stands out with a sophisticated, aged charm.

Best used for

  • Steampunk-themed games and media
  • Vintage or antique product branding
  • Industrial design concepts
  • Retro-futuristic website interfaces
  • Craft and artisan workshop branding
  • Theatrical set design and props

Suggested color roles

primary

Use #B87333 or #8B4513 for dominant elements like headings, key brand colors, or primary UI components to establish a metallic, vintage feel.

secondary

Apply #CD7F32 for subheadings, secondary buttons, or larger content blocks, enhancing the warm metallic depth.

accent

Introduce #A9A9A9 or #696969 for subtle highlights, borders, or text, providing a cool, aged contrast to the warm metals.

background

The mid-dark #696969 offers a muted, industrial backdrop. For a lighter background, #A9A9A9 can be used with dark text.

text

Pair a dark color like #696969 or black with lighter metallic shades. For darker backgrounds, use white or light gray text.

Accessibility notes

  • Ensure sufficient contrast between the metallic browns and the grays for text readability.
  • Avoid pairing similar metallic shades (e.g., #B87333 and #CD7F32) for small text without strong contrast.
  • Use a dark gray or black for text on lighter grays like #A9A9A9.
  • Consider larger font sizes for text elements to enhance readability against the textured, aged aesthetic.

Recommended combinations

Aged Brass

Creates a classic steampunk look, ideal for branding or vintage-inspired interfaces.

#B87333 · #CD7F32 · #A9A9A9

Industrial Gear

Perfect for backgrounds and structural elements, offering a robust and elegant industrial feel.

#8B4513 · #696969 · #A9A9A9

Metallic Glimmer

Use for highlights and interactive elements, providing a striking contrast and metallic sheen.

#B87333 · #8B4513 · #696969

CSS variables

:root {
  --cogwheel-fantasy-1: #B87333;
  --cogwheel-fantasy-2: #CD7F32;
  --cogwheel-fantasy-3: #A9A9A9;
  --cogwheel-fantasy-4: #696969;
  --cogwheel-fantasy-5: #8B4513;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cogwheel-fantasy": {
        1: "#B87333",
        2: "#CD7F32",
        3: "#A9A9A9",
        4: "#696969",
        5: "#8B4513",
      }
    }
  }
}

Related searches

steampunk color palettevintage metallic colorsindustrial retro schemeaged brass tonesvictorian fantasy

Palette colors

Hex values

Color 1#B87333
·
Color 2#CD7F32
·
Color 3#A9A9A9
·
Color 4#696969
·
Color 5#8B4513
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
1.4:1Fail
1.9:1Fail
2
1.2:1Fail
1.3:1Fail
1.7:1Fail
2.3:1Fail
3
1.6:1Fail
1.3:1Fail
2.3:1Fail
3:1AA18
4
1.4:1Fail
1.7:1Fail
2.3:1Fail
1.3:1Fail
5
1.9:1Fail
2.3:1Fail
3:1AA18
1.3:1Fail

Similar palettes

More like Cogwheel Fantasy

View all earth