Caramel#C3763C
Sandy Beige#EFE4CF
Sky Blue#8EC4E6
Warm Taupe#B9966C
Soft Mist#D9E8F5
Palette direction

Caramel Blue Sand Color Palette

This palette combines warm caramel and sandy beige tones with a cool sky blue, balanced by neutral shades to represent a serene beachside ambiance. It reflects both warmth and tranquility for a memorable brand identity.

ComplementaryHospitality Eventscaramelbluesandbeach
palette-preview.example
Hospitality Events color direction

Caramel Blue Sand Color Palette

This palette combines warm caramel and sandy beige tones with a cool sky blue, balanced by neutral shades to represent a serene beachside ambiance. It reflects both warmth and tranquility for a memorable brand identity.

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 Charcoal #2E2E2Eon Sandy Beige #EFE4CF10.8:1 Excellent
Logo Charcoal #2E2E2Eon Sky Blue #8EC4E67.2:1 Excellent
Logo Charcoal #2E2E2Eon White #FFFFFF13.6:1 Excellent
Logo White #FFFFFFon Charcoal #2E2E2E13.6:1 Excellent
Icon color
BackgroundCaramel#C3763CTextCharcoal#2E2E2E
Primary Button3.87:1
Large text

Best for the main action users should notice first.

BackgroundSandy Beige#EFE4CFTextCharcoal#2E2E2E
Secondary Button10.78:1
AAA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextSky Blue#8EC4E6
Outlined Button1.88:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextCaramel#C3763C
Text Button3.51:1
Large text

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

Palette composition8 colorsComplementary color relationship
9:41Caramel Blue Sand Color Palette Color role balance
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.

CCaramel Blue Sand Color PaletteHospitality Events brand direction ColorFly.design
Strategic palette preview

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.Caramel #C3763C
HeadlineUsed for main titles and key messages.Caramel #C3763C
LinkUsed for links and interactive text.Caramel #C3763C

Buttons

Primary Button
BackgroundCaramel #C3763C
TextCharcoal #2E2E2E
Secondary Button
BackgroundSandy Beige #EFE4CF
TextCharcoal #2E2E2E
Outlined Button
BackgroundSandy Beige #EFE4CF
TextSky Blue #8EC4E6

Interface

TextDefault readable body text.Charcoal #2E2E2E
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Ivory #F7F3EC
IconSmall interface icons and marks.Warm Taupe #B9966C
BorderCards, inputs, and component borders.Warm Taupe #B9966C
DividerSubtle separators between content.Warm Taupe #B9966C
OutlineFocus rings and emphasis outlines.Warm Taupe #B9966C

Palette Colors

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

Main (Brand) Colors

The main colors offer a harmonious triadic system with warm caramel, creamy beige, and soothing sky blue that evoke relaxation and inviting warmth.

PrimaryCaramel

RolesLogo, Link, Btn Primary Bg, Headline

Caramel adds inviting warmth and earthiness, perfect for branding that seeks to convey approachability and comfort.

HEX#C3763C
RGB195, 118, 60
HSL26, 53, 50
CMYK0, 39, 69, 24
SecondarySandy Beige

RolesBtn Secondary Bg, Btn Outlined Border

Sandy Beige provides a soft, neutral contrast that balances warmth with softness, ideal for backgrounds and secondary elements.

HEX#EFE4CF
RGB239, 228, 207
HSL39, 50, 87
CMYK0, 5, 13, 6
TertiarySky Blue

RolesBtn Outlined Text

Sky Blue introduces a calming and spacious feeling, complementing and refreshing the warmer hues.

HEX#8EC4E6
RGB142, 196, 230
HSL203, 64, 73
CMYK38, 15, 0, 10

Support Colors

Supporting colors extend the main palette with muted tones that enrich the palette’s usability and add subtle depth without overpowering.

Warm Taupe

RolesIcon, Border, Divider, Outline

Warm Taupe complements caramel by adding a subdued, grounded tone suitable for interface elements.

HEX#B9966C
RGB185, 150, 108
HSL33, 35, 57
CMYK0, 19, 42, 27
Soft Mist

Soft Mist is a light, muted blue that supports sky blue by softening edges and enhancing readability.

HEX#D9E8F5
RGB217, 232, 245
HSL208, 58, 91
CMYK11, 5, 0, 4

Neutral Colors

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

White

RolesBg Light

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory

RolesBg Dark

HEX#F7F3EC
RGB247, 243, 236
HSL38, 41, 95
CMYK0, 2, 4, 3
Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#2E2E2E
RGB46, 46, 46
HSL0, 0, 18
CMYK0, 0, 0, 82

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-caramel: #C3763C;
  --color-sandy-beige: #EFE4CF;
  --color-sky-blue: #8EC4E6;
  --color-warm-taupe: #B9966C;
  --color-soft-mist: #D9E8F5;
  --color-white: #FFFFFF;
  --color-ivory: #F7F3EC;
  --color-charcoal: #2E2E2E;
}

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: #C3763C;
  --role-link: #C3763C;
  --role-btn-primary-bg: #C3763C;
  --role-headline: #C3763C;
  --role-btn-secondary-bg: #EFE4CF;
  --role-btn-outlined-border: #EFE4CF;
  --role-btn-outlined-text: #8EC4E6;
  --role-icon: #B9966C;
  --role-border: #B9966C;
  --role-divider: #B9966C;
  --role-outline: #B9966C;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #F7F3EC;
  --role-text: #2E2E2E;
  --role-btn-primary-text: #2E2E2E;
  --role-btn-secondary-text: #2E2E2E;
}

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.
{
    "caramel": "#C3763C",
    "sandy-beige": "#EFE4CF",
    "sky-blue": "#8EC4E6",
    "warm-taupe": "#B9966C",
    "soft-mist": "#D9E8F5",
    "white": "#FFFFFF",
    "ivory": "#F7F3EC",
    "charcoal": "#2E2E2E"
}
Press Space to load new palette