Palette

Retro Space Race

Bold blues, vibrant yellows, and fiery reds evoke the iconic, adventurous spirit of the retro space age.

VibrantRetro5 colors

More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Retro Space Race 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 Retro Space Race.

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

Data visualization

#00008B#B0C4DE#FFD700#FF4500#696969

Palette guide

How to use Retro Space Race

Overview

The Retro Space Race palette captures the iconic, adventurous spirit of the mid-century space age with bold and impactful colors. It features a deep Dark Blue #00008B, a serene Light Steel Blue #B0C4DE, a radiant Gold #FFD700, a fiery Orange Red #FF4500, and a grounding Dim Gray #696969. This collection is perfect for designs that evoke exploration, innovation, and a sense of historical grandeur. Designers can leverage these hues for powerful branding, thematic UI, or compelling editorial content. Developers will find these hex codes ideal for creating visually striking and historically resonant digital experiences.

Best used for

Museum exhibition graphics (space/history)
Documentary branding and websites
Educational content related to space
Vintage travel posters (space tourism)
Apparel design with a historical theme
Video game UIs for strategy or simulation games

Suggested color roles

primary

The deep Dark Blue, #00008B, serves as a strong, authoritative primary color, ideal for main headers, navigation, or foundational branding elements.

secondary

The fiery Orange Red, #FF4500, acts as a dynamic secondary color, perfect for calls to action, alerts, or elements requiring high visibility.

accent

The radiant Gold, #FFD700, provides a touch of prestige and highlight for icons, subtle decorative elements, or awards.

background

The serene Light Steel Blue, #B0C4DE, offers a clean and expansive background, reminiscent of the sky, allowing other colors to stand out clearly.

text

For text on lighter backgrounds like #B0C4DE, use a dark, legible color such as #00008B or #696969. White text (#FFFFFF) is highly effective on #00008B, #FF4500, and #696969.

Accessibility notes

Ensure sufficient contrast when using #FFD700 as text on #B0C4DE; it will likely require large font sizes and bold weights or a darker background.
White text (#FFFFFF) on #00008B, #FF4500, and #696969 will generally meet WCAG AA contrast standards.
Avoid using #B0C4DE as text on #696969 without careful contrast checking; their relative lightness might cause issues.
Always test all color combinations for contrast ratios, especially for critical information and interactive elements, to ensure universal accessibility.

Recommended combinations

Bold Mission

Creates a powerful, adventurous aesthetic, ideal for strong branding, impactful headers, or dynamic calls to action.

#00008B · #FF4500 · #B0C4DE

Medal & Sky

Perfect for adding a touch of prestige and historical context, suitable for awards, timelines, or subtle background accents.

#FFD700 · #B0C4DE · #696969

Deep Contrast

Effective for creating strong visual hierarchy, distinguishing content blocks, or for striking, memorable design elements.

#696969 · #00008B · #FFD700

CSS variables

:root {
  --retro-space-race-1: #00008B;
  --retro-space-race-2: #B0C4DE;
  --retro-space-race-3: #FFD700;
  --retro-space-race-4: #FF4500;
  --retro-space-race-5: #696969;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-space-race": {
        1: "#00008B",
        2: "#B0C4DE",
        3: "#FFD700",
        4: "#FF4500",
        5: "#696969",
      }
    }
  }
}

Hex values

Color 1#00008B

Color 2#B0C4DE

Color 3#FFD700

Color 4#FF4500

Color 5#696969

Accessibility

Contrast checker

8.6:1AAA

10.9:1AAA

4.4:1AA18

2.8:1Fail

8.6:1AAA

1.3:1Fail

1.9:1Fail

3.1:1AA18