Back to palettes

Palette

Retro Mod Orange

Bold and playful oranges reminiscent of mid-century modern design and psychedelic art.

vibrantretro5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Retro Mod Orange 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 Mod Orange.

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

Data visualization

#FFE8C7#FFC480#FF9933#CC6600#993300

Palette guide

How to use Retro Mod Orange

Overview

The "Retro Mod Orange" palette is a captivating journey through the warm, earthy spectrum of oranges, echoing the iconic designs of the 1960s and 70s. This monochromatic-leaning scheme offers a harmonious gradient, from the soft, creamy #FFE8C7 to the rich, deep #993300. Designers can leverage #FF9933 (a classic bright orange) for primary calls-to-action, while #FFC480 (a lighter, cheerful orange) provides excellent secondary emphasis. The darker tones like #CC6600 and #993300 offer sophisticated depth, perfect for backgrounds or strong typographic elements. This palette ensures a cohesive, inviting, and distinctly retro aesthetic across any digital or print application, providing a warm, approachable feel.

Best used for

  • Mid-century modern decor sites
  • 60s/70s inspired fashion or music branding
  • Autumnal or harvest-themed designs
  • Food and beverage packaging (especially coffee/spices)
  • Editorial design for vintage lifestyle blogs
  • Warm, inviting user interfaces

Suggested color roles

primary

#FF9933 (A vibrant, classic orange that's energetic and inviting, ideal for key interactive elements.)

secondary

#FFC480 (A softer, cheerful orange, perfect for secondary actions, illustrations, or content separators.)

accent

#FFE8C7 (A creamy, near-white orange, excellent for subtle highlights, delicate text, or soft backgrounds.)

background

#CC6600 (A rich, deep orange that provides a warm, stable, and visually interesting foundation.)

text

Use dark brown or black on #FFE8C7, #FFC480, #FF9933. Use white or a very light cream on #CC6600 and #993300.

Accessibility notes

  • High contrast is crucial for text on #FFE8C7, requiring dark brown or black.
  • #FFC480 and #FF9933 will generally require dark text, though larger headings might allow for white.
  • For #CC6600 and #993300, white or a very light cream text is essential for readability.
  • Be cautious with color-blind users when using only shades of orange to convey different states; use additional icons or text.

Recommended combinations

Sunny Mod

Creates a bright, optimistic feel, great for headers and primary content areas.

#FF9933 · #FFE8C7 · #CC6600

Deep Retro

Offers a sophisticated, earthy depth with a pop of brightness, suitable for luxury retro branding.

#993300 · #FFC480 · #FF9933

Warm Gradient

Excellent for visual transitions or layered elements, providing a smooth, harmonious flow.

#FFE8C7 · #FF9933 · #CC6600

CSS variables

:root {
  --retro-mod-orange-1: #FFE8C7;
  --retro-mod-orange-2: #FFC480;
  --retro-mod-orange-3: #FF9933;
  --retro-mod-orange-4: #CC6600;
  --retro-mod-orange-5: #993300;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-mod-orange": {
        1: "#FFE8C7",
        2: "#FFC480",
        3: "#FF9933",
        4: "#CC6600",
        5: "#993300",
      }
    }
  }
}

Related searches

60s orange color palettemid-century modern orangeretro monochromatic orangewarm vintage color schemepsychedelic orange palette

Palette colors

Hex values

Color 1#FFE8C7
·
Color 2#FFC480
·
Color 3#FF9933
·
Color 4#CC6600
·
Color 5#993300
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
3.2:1AA18
6.2:1AA
2
1.3:1Fail
1.4:1Fail
2.5:1Fail
4.8:1AA
3
1.8:1Fail
1.4:1Fail
1.8:1Fail
3.5:1AA18
4
3.2:1AA18
2.5:1Fail
1.8:1Fail
1.9:1Fail
5
6.2:1AA
4.8:1AA
3.5:1AA18
1.9:1Fail

Similar palettes

More like Retro Mod Orange

View all vibrant