Palette

Faded Circus Poster

Evokes the charming, slightly melancholic feel of old circus posters, weathered by time and sun.

retroretro5 colors

More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Faded Circus Poster 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 Faded Circus Poster.

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

Data visualization

#DC143C#FFD700#4682B4#8B4513#F5DEB3

Palette guide

How to use Faded Circus Poster

Overview

The "Faded Circus Poster" palette vividly evokes the charming, slightly melancholic feel of old, weathered circus posters, imbued with a retro spirit. This dynamic collection features a bold crimson red (#DC143C), a vibrant golden yellow (#FFD700), a sturdy steel blue (#4682B4), a rich saddle brown (#8B4513), and a soft creamy white (#F5DEB3). Designers and developers can utilize these striking yet aged colors to create branding, web interfaces, or illustrations that demand attention while maintaining a nostalgic, vintage appeal. It’s perfect for projects seeking a playful, dramatic, and uniquely retro aesthetic with a touch of bygone era charm.

Best used for

Retro-themed event promotions
Vintage arcade game UI
Themed restaurant or bar branding
Creative agency websites with a bold style
Packaging for nostalgic products
Art prints or illustration projects

Suggested color roles

primary

#F5DEB3 (Creamy White) - An excellent warm, light background, providing a neutral yet aged canvas that allows the bolder, faded colors to truly pop.

secondary

#DC143C (Crimson Red) - A powerful choice for headlines, key calls-to-action, or feature banners, immediately grabbing attention with its retro flair.

accent

#FFD700 (Golden Yellow) - Use for highlights, interactive elements, or decorative borders to add a cheerful, energetic, and distinctively circus-like touch.

background

#F5DEB3 (Creamy White) - Offers a soft, slightly aged base that provides good contrast for the bolder primary and secondary colors.

text

Use #8B4513 (Saddle Brown) for body text on #F5DEB3 for a truly vintage feel, or a standard black for maximum readability. #4682B4 can also work for headlines.

Accessibility notes

#8B4513 and #4682B4 provide good contrast against #F5DEB3 for body text; always verify WCAG AA standards.
#DC143C and #FFD700 can be used for larger headings on #F5DEB3, but may require careful contrast checking for small text.
Avoid placing #FFD700 directly on #F5DEB3 for crucial information due to insufficient contrast.
Ensure all interactive elements have clear focus states that meet accessibility requirements.

Recommended combinations

Bold Retro

Create high-impact banners or posters with #F5DEB3 as background, #DC143C for titles, and #FFD700 for accents.

#F5DEB3 · #DC143C · #FFD700

Aged & Grounded

Excellent for body content: #F5DEB3 background, #8B4513 for text, and #4682B4 for subheadings or links.

#F5DEB3 · #8B4513 · #4682B4

Dynamic Pop

Combine #4682B4 as a background for sections, with #FFD700 for highlights and #DC143C for strong calls to action.

#4682B4 · #FFD700 · #DC143C

CSS variables

:root {
  --faded-circus-poster-1: #DC143C;
  --faded-circus-poster-2: #FFD700;
  --faded-circus-poster-3: #4682B4;
  --faded-circus-poster-4: #8B4513;
  --faded-circus-poster-5: #F5DEB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "faded-circus-poster": {
        1: "#DC143C",
        2: "#FFD700",
        3: "#4682B4",
        4: "#8B4513",
        5: "#F5DEB3",
      }
    }
  }
}

Hex values

Color 1#DC143C

Color 2#FFD700

Color 3#4682B4

Color 4#8B4513

Color 5#F5DEB3

Accessibility

Contrast checker

3.6:1AA18

1.2:1Fail

1.4:1Fail

3.8:1AA18