Coral Red#FF3B30
Ocean Blue#1F5E8A
Sandy Brown#C88A5A
Sea Glass Gray#6E7F86
Driftwood Beige#D9C7AE
Palette direction

Sunset Citrus Beach Color Palette

This palette channels sun-faded beach tones with a vivid citrus-red focal point for a relaxed but energetic brand system. The warm accent, coastal blue, and sandy neutrals create a recognizable balance that feels playful, grounded, and easy to use across digital touchpoints.

Split ComplementaryHospitality Eventsbeachcitruscoastalsunset
palette-preview.example
Hospitality Events color direction

Sunset Citrus Beach Color Palette

This palette channels sun-faded beach tones with a vivid citrus-red focal point for a relaxed but energetic brand system. The warm accent, coastal blue, and sandy neutrals create a recognizable balance that feels playful, grounded, and easy to use across digital touchpoints.

Explore the color system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo White #FFFFFFon Ocean Blue #1F5E8A6.9:1 Strong
Logo Charcoal #171717on Sandy Brown #C88A5A6.2:1 Strong
Logo Charcoal #171717on Coral Red #FF3B305.1:1 Strong
Logo Charcoal #171717on White #FFFFFF17.9:1 Excellent
Icon color
BackgroundCoral Red#FF3B30TextCharcoal#171717
Primary Button5.05:1
AA

Best for the main action users should notice first.

BackgroundOcean Blue#1F5E8ATextWhite#FFFFFF
Secondary Button6.94:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextSandy Brown#C88A5A
Outlined Button2.90:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextOcean Blue#1F5E8A
Text Button6.94:1
AA

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsSplit Complementary color relationship
9:41Sunset Citrus Beach Color Palette Color role balance
Split Complementary system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CSunset Citrus Beach Color PaletteHospitality Events brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors pair a bright citrus red with a deep coastal blue, creating a clear contrast that feels both lively and grounded. Together they evoke a beachside moment with enough visual tension to keep the system memorable and usable.

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Coral Red #FF3B30
HeadlineUsed for main titles and key messages.Sandy Brown #C88A5A
LinkUsed for links and interactive text.Ocean Blue #1F5E8A

Buttons

Primary Button
BackgroundCoral Red #FF3B30
TextCharcoal #171717
Secondary Button
BackgroundOcean Blue #1F5E8A
TextWhite #FFFFFF
Outlined Button
BackgroundSandy Brown #C88A5A
TextSandy Brown #C88A5A

Interface

TextDefault readable body text.Charcoal #171717
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Charcoal #171717
IconSmall interface icons and marks.Sea Glass Gray #6E7F86
BorderCards, inputs, and component borders.Driftwood Beige #D9C7AE
DividerSubtle separators between content.Driftwood Beige #D9C7AE
OutlineFocus rings and emphasis outlines.Sea Glass Gray #6E7F86

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

The main colors pair a bright citrus red with a deep coastal blue, creating a clear contrast that feels both lively and grounded. Together they evoke a beachside moment with enough visual tension to keep the system memorable and usable.

PrimaryCoral Red

RolesLogo, Btn Primary Bg

Coral Red delivers the energetic focal point and gives the brand a warm, immediate presence.

HEX#FF3B30
RGB255, 59, 48
HSL3, 100, 59
CMYK0, 77, 81, 0
SecondaryOcean Blue

RolesLink, Btn Secondary Bg

Ocean Blue adds structure and trust while echoing the horizon and water in the reference image.

HEX#1F5E8A
RGB31, 94, 138
HSL205, 63, 33
CMYK78, 32, 0, 46
TertiarySandy Brown

RolesHeadline, Btn Outlined Border, Btn Outlined Text

Sandy Brown softens the contrast and ties the accent colors back to the beach setting.

HEX#C88A5A
RGB200, 138, 90
HSL26, 50, 57
CMYK0, 31, 55, 22

Support Colors

The support colors extend the coastal mood with quiet, natural undertones that keep the brighter hues balanced. They add depth and usability without competing with the primary red and blue relationship.

Sea Glass Gray

RolesIcon, Outline

Sea Glass Gray is a cool, muted bridge between the ocean and sand that works well for UI structure.

HEX#6E7F86
RGB110, 127, 134
HSL198, 10, 48
CMYK18, 5, 0, 47
Driftwood Beige

RolesBorder, Divider

Driftwood Beige reinforces the sun-warmed shore feeling while staying subtle enough for utility roles.

HEX#D9C7AE
RGB217, 199, 174
HSL35, 36, 77
CMYK0, 8, 20, 15

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

White

RolesBg Light, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory
HEX#F4F1EB
RGB244, 241, 235
HSL40, 29, 94
CMYK0, 1, 4, 4
Charcoal

RolesBg Dark, Text, Btn Primary Text

HEX#171717
RGB23, 23, 23
HSL0, 0, 9
CMYK0, 0, 0, 91

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.

Use when: you need the actual colors.
:root {
  --color-coral-red: #FF3B30;
  --color-ocean-blue: #1F5E8A;
  --color-sandy-brown: #C88A5A;
  --color-sea-glass-gray: #6E7F86;
  --color-driftwood-beige: #D9C7AE;
  --color-white: #FFFFFF;
  --color-ivory: #F4F1EB;
  --color-charcoal: #171717;
}

Role tokens

Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.

Use when: you need UI roles, not just swatches.
:root {
  --role-logo: #FF3B30;
  --role-btn-primary-bg: #FF3B30;
  --role-link: #1F5E8A;
  --role-btn-secondary-bg: #1F5E8A;
  --role-headline: #C88A5A;
  --role-btn-outlined-border: #C88A5A;
  --role-btn-outlined-text: #C88A5A;
  --role-icon: #6E7F86;
  --role-outline: #6E7F86;
  --role-border: #D9C7AE;
  --role-divider: #D9C7AE;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #171717;
  --role-text: #171717;
  --role-btn-primary-text: #171717;
}

JSON

Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.

Use when: a developer or app needs data.
{
    "coral-red": "#FF3B30",
    "ocean-blue": "#1F5E8A",
    "sandy-brown": "#C88A5A",
    "sea-glass-gray": "#6E7F86",
    "driftwood-beige": "#D9C7AE",
    "white": "#FFFFFF",
    "ivory": "#F4F1EB",
    "charcoal": "#171717"
}
Press Space to load new palette