Palette

Jukebox Teal Twist

Capturing the spirited essence of a vintage diner with vibrant teal and a pop of cherry red against creamy neutrals.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Jukebox Teal Twist 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 Jukebox Teal Twist.

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

Data visualization

#206A5D#EF476F#FFE4C4#A8DADC#5B5B5B

Palette guide

How to use Jukebox Teal Twist

Overview

The Jukebox Teal Twist palette captures the spirited essence of a vintage diner with a sophisticated twist. It features a deep teal (#206A5D), a vibrant coral red (#EF476F), a creamy beige (#FFE4C4), a light teal (#A8DADC), and a versatile medium dark gray (#5B5B5B). This collection is perfect for designers and developers aiming to create projects that feel retro yet refined, with a playful energy. These colors work harmoniously to evoke a sense of nostalgia, warmth, and modern flair, ideal for unique branding or engaging digital interfaces that stand out.

Best used for

Retro café or restaurant branding
Vintage fashion lines or boutiques
Creative agency websites or portfolios
Album art or music event promotions
Unique event design and invitations
Sophisticated retro graphic design

Suggested color roles

primary

Utilize #206A5D (deep teal) as a sophisticated primary color for brand identity or main content areas.

secondary

Employ #EF476F (coral red) for energetic secondary elements, call-to-action buttons, or vibrant accents.

accent

Apply #A8DADC (light teal) for subtle highlights, background textures, or to add an airy feel.

background

Use #FFE4C4 (creamy beige) as a warm, inviting vintage backdrop that provides excellent contrast for darker colors.

text

For optimal readability, use #5B5B5B (medium dark gray) for primary body text and #206A5D for headlines.

Accessibility notes

The creamy #FFE4C4 background provides good contrast for darker colors like #206A5D, #EF476F, and #5B5B5B.
Be cautious with #A8DADC for small text on light backgrounds; ensure sufficient contrast for readability.
Always use #5B5B5B or #206A5D for body text on #FFE4C4 to ensure high readability.
Verify contrast ratios for all interactive elements to ensure WCAG compliance.

Recommended combinations

Vintage Charm

Ideal for main branding, menu designs, and hero sections for a distinct retro appeal.

#206A5D · #EF476F · #FFE4C4

Soft Retro

Excellent for backgrounds, subtle patterns, and readable secondary text areas.

#A8DADC · #FFE4C4 · #5B5B5B

Energetic Pop

Effective for call-to-actions, highlights, and graphic elements that need to stand out.

#EF476F · #206A5D · #5B5B5B

CSS variables

:root {
  --jukebox-teal-twist-1: #206A5D;
  --jukebox-teal-twist-2: #EF476F;
  --jukebox-teal-twist-3: #FFE4C4;
  --jukebox-teal-twist-4: #A8DADC;
  --jukebox-teal-twist-5: #5B5B5B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "jukebox-teal-twist": {
        1: "#206A5D",
        2: "#EF476F",
        3: "#FFE4C4",
        4: "#A8DADC",
        5: "#5B5B5B",
      }
    }
  }
}

Hex values

Color 1#206A5D

Color 2#EF476F

Color 3#FFE4C4

Color 4#A8DADC

Color 5#5B5B5B

Accessibility

Contrast checker

1.8:1Fail

5.2:1AA

4.2:1AA18

1.1:1Fail

1.8:1Fail

3:1Fail

2.4:1Fail

1.9:1Fail

5.2:1AA

3:1Fail

1.2:1Fail

5.5:1AA