Airy Blue#7899B3
Dusty Rose#B36F6F
Soft Ivory#E3E3E0
Lavender Gray#A598B3
Warm Taupe#C3B49B
Palette direction

Soft Muted Abstract Color Palette

This palette is inspired by the gentle and muted tones of the image's abstract shapes and subtle shading. The main colors feature soft blues and muted reds that establish a calm yet approachable brand tone. Support colors include complementary soft lavenders and muted warm tones to balance and extend usability. Neutrals range from a pure clean white to soft greys and a deep charcoal, supporting clean readability and visual hierarchy.

ComplementaryCreativesoft bluemuted redlavendercharcoal
palette-preview.example
Creative color direction

Soft Muted Abstract Color Palette

This palette is inspired by the gentle and muted tones of the image's abstract shapes and subtle shading. The main colors feature soft blues and muted reds that establish a calm yet approachable brand tone. Support colors include complementary soft lavenders and muted warm tones to balance and extend usability. Neutrals range from a pure clean white to soft greys and a deep charcoal, supporting clean readability and visual hierarchy.

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 #2F2F2Fon Soft Ivory #E3E3E010.4:1 Excellent
Logo Charcoal #2F2F2Fon Pure White #FFFFFF13.4:1 Excellent
Logo Pure White #FFFFFFon Charcoal #2F2F2F13.4:1 Excellent
Logo Charcoal #2F2F2Fon Warm Taupe #C3B49B6.6:1 Strong
Icon color
BackgroundAiry Blue#7899B3TextCharcoal#2F2F2F
Primary Button4.47:1
Large text

Best for the main action users should notice first.

BackgroundDusty Rose#B36F6FTextPure White#FFFFFF
Secondary Button3.87:1
Large text

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextDusty Rose#B36F6F
Outlined Button3.87:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextAiry Blue#7899B3
Text Button3.00:1
Low

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

Palette composition8 colorsComplementary color relationship
9:41Soft Muted Abstract 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.

CSoft Muted Abstract Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine a calming muted blue, a soft muted red, and a balanced off-white to form a distinctive and approachable brand system that draws from the image's abstract geometric style.

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.Airy Blue #7899B3
HeadlineUsed for main titles and key messages.Soft Ivory #E3E3E0
LinkUsed for links and interactive text.Airy Blue #7899B3

Buttons

Primary Button
BackgroundAiry Blue #7899B3
TextCharcoal #2F2F2F
Secondary Button
BackgroundDusty Rose #B36F6F
TextPure White #FFFFFF
Outlined Button
BackgroundDusty Rose #B36F6F
TextDusty Rose #B36F6F

Interface

TextDefault readable body text.Charcoal #2F2F2F
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Soft Grey #F6F6F6
IconSmall interface icons and marks.Lavender Gray #A598B3
BorderCards, inputs, and component borders.Lavender Gray #A598B3
DividerSubtle separators between content.Lavender Gray #A598B3
OutlineFocus rings and emphasis outlines.Lavender Gray #A598B3

Palette Colors

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

Main (Brand) Colors

The main colors combine a calming muted blue, a soft muted red, and a balanced off-white to form a distinctive and approachable brand system that draws from the image's abstract geometric style.

PrimaryAiry Blue

RolesLogo, Btn Primary Bg, Link

Airy Blue conveys calmness and reliability, offering a professional yet approachable presence.

HEX#7899B3
RGB120, 153, 179
HSL206, 28, 59
CMYK33, 15, 0, 30
SecondaryDusty Rose

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Dusty Rose adds warmth and subtle energy without overwhelming, complementing the blue with a soft contrast.

HEX#B36F6F
RGB179, 111, 111
HSL0, 31, 57
CMYK0, 38, 38, 30
TertiarySoft Ivory

RolesHeadline

Soft Ivory lightens the main palette and provides gentle highlight and typography balance.

HEX#E3E3E0
RGB227, 227, 224
HSL60, 5, 88
CMYK0, 0, 1, 11

Support Colors

Support colors provide gentle accents with muted lavender and warm beige that harmonize with the main colors, reinforcing the palette without competing for attention.

Lavender Gray

RolesIcon, Border, Divider, Outline

Lavender Gray supports the palette by adding subtle purple undertones that complement the blue and red hues.

HEX#A598B3
RGB165, 152, 179
HSL269, 15, 65
CMYK8, 15, 0, 30
Warm Taupe

Warm Taupe introduces a grounded warmth, balancing the coolness of Airy Blue and the softness of Dusty Rose.

HEX#C3B49B
RGB195, 180, 155
HSL38, 25, 69
CMYK0, 8, 21, 24

Neutral Colors

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

Pure White

RolesBg Light, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Soft Grey

RolesBg Dark

HEX#F6F6F6
RGB246, 246, 246
HSL0, 0, 96
CMYK0, 0, 0, 4
Charcoal

RolesText, Btn Primary Text

HEX#2F2F2F
RGB47, 47, 47
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-airy-blue: #7899B3;
  --color-dusty-rose: #B36F6F;
  --color-soft-ivory: #E3E3E0;
  --color-lavender-gray: #A598B3;
  --color-warm-taupe: #C3B49B;
  --color-pure-white: #FFFFFF;
  --color-soft-grey: #F6F6F6;
  --color-charcoal: #2F2F2F;
}

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: #7899B3;
  --role-btn-primary-bg: #7899B3;
  --role-link: #7899B3;
  --role-btn-secondary-bg: #B36F6F;
  --role-btn-outlined-border: #B36F6F;
  --role-btn-outlined-text: #B36F6F;
  --role-headline: #E3E3E0;
  --role-icon: #A598B3;
  --role-border: #A598B3;
  --role-divider: #A598B3;
  --role-outline: #A598B3;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F6F6F6;
  --role-text: #2F2F2F;
  --role-btn-primary-text: #2F2F2F;
}

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.
{
    "airy-blue": "#7899B3",
    "dusty-rose": "#B36F6F",
    "soft-ivory": "#E3E3E0",
    "lavender-gray": "#A598B3",
    "warm-taupe": "#C3B49B",
    "pure-white": "#FFFFFF",
    "soft-grey": "#F6F6F6",
    "charcoal": "#2F2F2F"
}
Press Space to load new palette