Airbnb Coral#FF5A5F
Sunrise Coral#FF7A73
Blush Terracotta#F4A39A
Apricot Accent#F28C6F
Clay Accent#D96B67
Palette direction

Airbnb Inspired Coral Color Palette

A warm, hospitality-led palette anchored by Airbnb’s signature coral red and softened by airy blush and sunset tones. The system feels welcoming and recognizable while staying usable across booking flows, calls to action, and lifestyle imagery.

MonochromaticHospitality Eventsairbnb-inspiredhospitalitytravelcoral
palette-preview.example
Hospitality Events color direction

Airbnb Inspired Coral Color Palette

A warm, hospitality-led palette anchored by Airbnb’s signature coral red and softened by airy blush and sunset tones. The system feels welcoming and recognizable while staying usable across booking flows, calls to action, and lifestyle imagery.

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 Ink #1C1C1Con Blush Terracotta #F4A39A8.6:1 Excellent
Logo Charcoal Ink #1C1C1Con Sunrise Coral #FF7A736.7:1 Strong
Logo Charcoal Ink #1C1C1Con Airbnb Coral #FF5A5F5.6:1 Strong
Logo Charcoal Ink #1C1C1Con Pure White #FFFFFF17.0:1 Excellent
Icon color
BackgroundAirbnb Coral#FF5A5FTextCharcoal Ink#1C1C1C
Primary Button5.58:1
AA

Best for the main action users should notice first.

BackgroundSunrise Coral#FF7A73TextCharcoal Ink#1C1C1C
Secondary Button6.72:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextBlush Terracotta#F4A39A
Outlined Button1.99:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextSunrise Coral#FF7A73
Text Button2.54:1
Low

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

Palette composition8 colorsMonochromatic color relationship
9:41Airbnb Inspired Coral Color Palette Color role balance
Monochromatic 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.

CAirbnb Inspired Coral Color PaletteHospitality Events brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors center on Airbnb’s exact signature coral and two closely related warm companions, creating a recognizable hospitality system with enough variation for hierarchy and storytelling. The palette stays cohesive and brand-forward,

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.Airbnb Coral #FF5A5F
HeadlineUsed for main titles and key messages.Airbnb Coral #FF5A5F
LinkUsed for links and interactive text.Sunrise Coral #FF7A73

Buttons

Primary Button
BackgroundAirbnb Coral #FF5A5F
TextCharcoal Ink #1C1C1C
Secondary Button
BackgroundSunrise Coral #FF7A73
TextCharcoal Ink #1C1C1C
Outlined Button
BackgroundBlush Terracotta #F4A39A
TextBlush Terracotta #F4A39A

Interface

TextDefault readable body text.Charcoal Ink #1C1C1C
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Charcoal Ink #1C1C1C
IconSmall interface icons and marks.Apricot Accent #F28C6F
BorderCards, inputs, and component borders.Clay Accent #D96B67
DividerSubtle separators between content.Clay Accent #D96B67
OutlineFocus rings and emphasis outlines.Apricot Accent #F28C6F

Palette Colors

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

Main (Brand) Colors

The main colors center on Airbnb’s exact signature coral and two closely related warm companions, creating a recognizable hospitality system with enough variation for hierarchy and storytelling. The palette stays cohesive and brand-forward,

PrimaryAirbnb Coral

RolesLogo, Btn Primary Bg, Headline

The exact signature coral delivers immediate brand recognition and a friendly, energetic hospitality feel.

HEX#FF5A5F
RGB255, 90, 95
HSL358, 100, 68
CMYK0, 65, 63, 0
SecondarySunrise Coral

RolesLink, Btn Secondary Bg

A lighter coral step that keeps interactions warm while distinguishing secondary actions from the main brand mark.

HEX#FF7A73
RGB255, 122, 115
HSL3, 100, 73
CMYK0, 52, 55, 0
TertiaryBlush Terracotta

RolesBtn Outlined Border, Btn Outlined Text

A muted warm accent that supports outlines and subtle emphasis without competing with the primary coral.

HEX#F4A39A
RGB244, 163, 154
HSL6, 80, 78
CMYK0, 33, 37, 4

Support Colors

These accents extend the coral system with quiet warmth and a touch of depth, keeping the interface friendly while improving usability across states and content sections.

Apricot Accent

RolesIcon, Outline

Adds a sunlit mid-tone that works well for icons and soft framing without overpowering the primary coral.

HEX#F28C6F
RGB242, 140, 111
HSL13, 83, 69
CMYK0, 42, 54, 5
Clay Accent

RolesBorder, Divider

Provides a slightly deeper warm separator for structure, staying visually subordinate to the main coral.

HEX#D96B67
RGB217, 107, 103
HSL2, 60, 63
CMYK0, 51, 53, 15

Neutral Colors

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

Pure White

RolesBg Light

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Warm Mist
HEX#F7F5F2
RGB247, 245, 242
HSL36, 24, 96
CMYK0, 1, 2, 3
Charcoal Ink

RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text

HEX#1C1C1C
RGB28, 28, 28
HSL0, 0, 11
CMYK0, 0, 0, 89

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-airbnb-coral: #FF5A5F;
  --color-sunrise-coral: #FF7A73;
  --color-blush-terracotta: #F4A39A;
  --color-apricot-accent: #F28C6F;
  --color-clay-accent: #D96B67;
  --color-pure-white: #FFFFFF;
  --color-warm-mist: #F7F5F2;
  --color-charcoal-ink: #1C1C1C;
}

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: #FF5A5F;
  --role-btn-primary-bg: #FF5A5F;
  --role-headline: #FF5A5F;
  --role-link: #FF7A73;
  --role-btn-secondary-bg: #FF7A73;
  --role-btn-outlined-border: #F4A39A;
  --role-btn-outlined-text: #F4A39A;
  --role-icon: #F28C6F;
  --role-outline: #F28C6F;
  --role-border: #D96B67;
  --role-divider: #D96B67;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #1C1C1C;
  --role-text: #1C1C1C;
  --role-btn-primary-text: #1C1C1C;
  --role-btn-secondary-text: #1C1C1C;
}

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.
{
    "airbnb-coral": "#FF5A5F",
    "sunrise-coral": "#FF7A73",
    "blush-terracotta": "#F4A39A",
    "apricot-accent": "#F28C6F",
    "clay-accent": "#D96B67",
    "pure-white": "#FFFFFF",
    "warm-mist": "#F7F5F2",
    "charcoal-ink": "#1C1C1C"
}
Press Space to load new palette