Palette

Retro Surf Shack

Bold and cheerful, like a vintage surf poster with sun-drenched beaches and ocean waves.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Retro Surf Shack 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 Surf Shack.

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

Data visualization

#FF5A5F#FFC857#4BCDCB#4F98CA#8D3B73

Palette guide

How to use Retro Surf Shack

Overview

The Retro Surf Shack palette is bold and cheerful, reminiscent of a vintage surf poster with sun-drenched beaches and ocean waves, perfect for designers and developers targeting a playful, summer vibe. It features a vibrant coral red (#FF5A5F), a sunny yellow (#FFC857), a refreshing teal green (#4BCDCB), a sky blue (#4F98CA), and a rich raspberry pink (#8D3B73). This selection is ideal for creating designs that are lively, colorful, and full of vintage charm. Use #FF5A5F for inviting focal points and #4F98CA for a cool, calming contrast to evoke coastal moods.

Best used for

Beach-themed restaurant branding and menus
Vintage travel advertising and brochures
Summer event promotions and festival graphics
Children's fashion or toy design
Lifestyle blogs and social media content for summer themes
Packaging for artisanal food products with a playful twist

Suggested color roles

primary

Use #FF5A5F as a warm, inviting, and energetic focal point for prominent design elements.

secondary

Employ #4F98CA as a cool, calming contrast, effectively representing ocean and sky.

accent

Apply #FFC857 as a bright, sunny highlight, perfect for cheerful details and calls to action.

background

Utilize #4BCDCB as a fresh, muted cool base, creating balanced and appealing compositions.

text

Consider #8D3B73 for rich, distinctive headlines, or black/charcoal for general body text readability.

Accessibility notes

Ensure sufficient contrast when using #FFC857 as text against #4BCDCB or #4F98CA for readability.
#8D3B73 offers good contrast for text on #FFC857 or #4BCDCB, making it a strong choice.
Avoid using #FF5A5F for small text on #FFC857 due to potential readability issues for some users.
For optimal accessibility, use a dark neutral color like black or deep charcoal for body text on lighter backgrounds.

Recommended combinations

Ocean Sunset

Warm sunset tones against a cool ocean blue, ideal for scenic designs, backgrounds, or illustrations.

#FF5A5F · #FFC857 · #4F98CA

Tropical Pop

Fresh teal with sunny yellow and a raspberry accent, perfect for lively graphics and playful branding.

#4BCDCB · #FFC857 · #8D3B73

Vintage Beach

A blue base with warm, inviting highlights, creating a classic beach feel for designs.

#4F98CA · #FF5A5F · #FFC857

CSS variables

:root {
  --retro-surf-shack-1: #FF5A5F;
  --retro-surf-shack-2: #FFC857;
  --retro-surf-shack-3: #4BCDCB;
  --retro-surf-shack-4: #4F98CA;
  --retro-surf-shack-5: #8D3B73;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-surf-shack": {
        1: "#FF5A5F",
        2: "#FFC857",
        3: "#4BCDCB",
        4: "#4F98CA",
        5: "#8D3B73",
      }
    }
  }
}

Hex values

Color 1#FF5A5F

Color 2#FFC857

Color 3#4BCDCB

Color 4#4F98CA

Color 5#8D3B73

Accessibility

Contrast checker

2:1Fail

1.6:1Fail

1:1Fail

2.3:1Fail

2:1Fail

1.3:1Fail

2:1Fail

4.5:1AA

1.6:1Fail

1.3:1Fail

1.6:1Fail

3.6:1AA18

1:1Fail

2:1Fail

1.6:1Fail

2.2:1Fail

2.3:1Fail

4.5:1AA

3.6:1AA18

2.2:1Fail

Similar palettes

More like Retro Surf Shack

Retro Surf Shack

See it in context.

Ready when you are.

Built with Retro Surf Shack.

How to use Retro Surf Shack

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Ocean Sunset

Tropical Pop

Vintage Beach

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Retro Surf Shack