Sun-Drenched Coastal & Tropical Energy Category: Seasonal 24,200/mo searches

Summer Color Palette — HEX Codes, Swatches & UI Palette

Captures the vivid energy of tropical waters, bright sunshine, and juicy citrus. Crisp ocean turquoise balances vibrant coral and radiant gold to inject immediate warmth and high-spirited optimism into creative campaigns.

Vibrant CTA

Coral Pink

#FF6B6B

Energetic Highlight

Sunny Gold

#FFD93D

Cool Contrast

Ocean Turquoise

#4ECDC4

Authoritative Dark

Deep Marine

#1A535C

Clean Surface Light

Warm Sand

#F7FFF7

Open in Web Studio Color Wheel Tint & Shade Scale

Color Swatches & Technical Specifications

Exact color codes, luminance values, and WCAG contrast ratings for each swatch in the Summer Color Palette.

Coral Pink

Vibrant CTA

HEX #FF6B6B

RGB rgb(255, 107, 107)

HSL hsl(0deg, 100%, 71%)

vs White: 2.77:1 (Fail) vs Black: 7.57:1 (AAA)

Sunny Gold

Energetic Highlight

HEX #FFD93D

RGB rgb(255, 217, 61)

HSL hsl(48deg, 100%, 62%)

vs White: 1.38:1 (Fail) vs Black: 15.24:1 (AAA)

Ocean Turquoise

Cool Contrast

HEX #4ECDC4

RGB rgb(78, 205, 196)

HSL hsl(176deg, 56%, 55%)

vs White: 1.93:1 (Fail) vs Black: 10.85:1 (AAA)

Deep Marine

Authoritative Dark

HEX #1A535C

RGB rgb(26, 83, 92)

HSL hsl(188deg, 56%, 23%)

vs White: 8.62:1 (AAA) vs Black: 2.44:1 (Fail)

Warm Sand

Clean Surface Light

HEX #F7FFF7

RGB rgb(247, 255, 247)

HSL hsl(120deg, 100%, 98%)

vs White: 1.02:1 (Fail) vs Black: 20.6:1 (AAA)

UI Design & Color Hierarchy Guide

Pair bright turquoise with coral pink for high-energy promotional banners, social graphics, and mobile apps. Keep backgrounds clean and airy to avoid visual fatigue.

60% Dominant Base

Use the primary neutral/light swatch (Warm Sand) for canvas backgrounds and card surfaces.

30% Structural Secondary

Apply midtones for navigation bars, card headers, borders, and secondary buttons.

10% Accent Callout

Reserve high-saturation focal colors for CTAs, conversion badges, and active state highlights.

WCAG 2.1 Accessibility & Contrast Matrix

Legibility ratings between palette elements and key backgrounds (Lightest: Warm Sand | Darkest: Deep Marine):

Swatch	Contrast vs Light Canvas	Contrast vs Dark Canvas
Coral Pink (#FF6B6B)	2.72:1 Fail	3.11:1 AA Large
Sunny Gold (#FFD93D)	1.35:1 Fail	6.26:1 AA
Ocean Turquoise (#4ECDC4)	1.9:1 Fail	4.46:1 AA Large
Deep Marine (#1A535C)	8.46:1 AAA	1.0:1 Fail
Warm Sand (#F7FFF7)	1.0:1 Fail	8.46:1 AAA

CSS Custom Properties & Design Tokens

Copy and paste production-ready tokens directly into your CSS stylesheet or Tailwind CSS configuration:

CSS Variables

:root {
  --color-1: #FF6B6B; /* Coral Pink - Vibrant CTA */
  --color-2: #FFD93D; /* Sunny Gold - Energetic Highlight */
  --color-3: #4ECDC4; /* Ocean Turquoise - Cool Contrast */
  --color-4: #1A535C; /* Deep Marine - Authoritative Dark */
  --color-5: #F7FFF7; /* Warm Sand - Clean Surface Light */
}

Tailwind CSS Config

{
  colors: {
    'palette-1': '#FF6B6B',
    'palette-2': '#FFD93D',
    'palette-3': '#4ECDC4',
    'palette-4': '#1A535C',
    'palette-5': '#F7FFF7'
  }
}

Explore More Curated Color Palettes

Browse seasonal palettes, retro aesthetic color schemes, nature tones, and dark mode themes.

All Color Palettes Named Color Dictionary Interactive Color Wheel