Royal Blue#2C6EB2
Dark Blue#1B4F72
Teal Green#3B9A6D
Soft Sky Blue#A6C8D2
Muted Green#7EBE8D
Palette direction

Blue Green Leaf Color Palette

This palette features fresh, vibrant blues complemented by soft greens and calm neutrals, evoking a natural, trustworthy, and serene brand identity inspired by the leaf motif in the logo. The strong blues establish recognition and energy, while the greens extend the brand's natural theme with subtle emphasis. Neutrals balance the palette with clean backgrounds and readable text.

AnalogousHealth Wellnessbluegreenleafnature
palette-preview.example
Health Wellness color direction

Blue Green Leaf Color Palette

This palette features fresh, vibrant blues complemented by soft greens and calm neutrals, evoking a natural, trustworthy, and serene brand identity inspired by the leaf motif in the logo. The strong blues establish recognition and energy, while the greens extend the brand's natural theme with subtle emphasis. Neutrals balance the palette with clean backgrounds and readable text.

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 Dark Blue #1B4F728.7:1 Excellent
Logo White #FFFFFFon Royal Blue #2C6EB25.3:1 Strong
Logo Charcoal #1A2026on Teal Green #3B9A6D4.7:1 Strong
Logo Charcoal #1A2026on White #FFFFFF16.4:1 Excellent
Icon color
BackgroundRoyal Blue#2C6EB2TextWhite#FFFFFF
Primary Button5.28:1
AA

Best for the main action users should notice first.

BackgroundDark Blue#1B4F72TextWhite#FFFFFF
Secondary Button8.72:1
AAA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextTeal Green#3B9A6D
Outlined Button3.48:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextRoyal Blue#2C6EB2
Text Button5.28:1
AA

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

Palette composition8 colorsAnalogous color relationship
9:41Blue Green Leaf Color Palette Color role balance
Analogous 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.

CBlue Green Leaf Color PaletteHealth Wellness brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine medium and dark blues with a calming teal green to reflect vitality, trust, and natural balance, creating a harmonious and recognizable brand presence.

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.Royal Blue #2C6EB2
HeadlineUsed for main titles and key messages.Dark Blue #1B4F72
LinkUsed for links and interactive text.Royal Blue #2C6EB2

Buttons

Primary Button
BackgroundRoyal Blue #2C6EB2
TextWhite #FFFFFF
Secondary Button
BackgroundDark Blue #1B4F72
TextWhite #FFFFFF
Outlined Button
BackgroundTeal Green #3B9A6D
TextTeal Green #3B9A6D

Interface

TextDefault readable body text.Charcoal #1A2026
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Alabaster #F4F6F8
IconSmall interface icons and marks.Soft Sky Blue #A6C8D2
BorderCards, inputs, and component borders.Soft Sky Blue #A6C8D2
DividerSubtle separators between content.Soft Sky Blue #A6C8D2
OutlineFocus rings and emphasis outlines.Soft Sky Blue #A6C8D2

Palette Colors

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

Main (Brand) Colors

The main colors combine medium and dark blues with a calming teal green to reflect vitality, trust, and natural balance, creating a harmonious and recognizable brand presence.

PrimaryRoyal Blue

RolesLogo, Link, Btn Primary Bg

Royal Blue conveys trust and professionalism with vibrant energy.

HEX#2C6EB2
RGB44, 110, 178
HSL210, 60, 44
CMYK75, 38, 0, 30
SecondaryDark Blue

RolesBtn Secondary Bg, Headline

Dark Blue adds depth and stability, supporting confidence and seriousness.

HEX#1B4F72
RGB27, 79, 114
HSL204, 62, 28
CMYK76, 31, 0, 55
TertiaryTeal Green

RolesBtn Outlined Border, Btn Outlined Text

Teal Green introduces natural freshness and balance, reinforcing growth and harmony.

HEX#3B9A6D
RGB59, 154, 109
HSL152, 45, 42
CMYK62, 0, 29, 40

Support Colors

The support colors provide softer tonal variations of green and blue, enhancing usability without overpowering the main palette, enriching the brand’s natural and trustworthy feel.

Soft Sky Blue

RolesIcon, Border, Divider, Outline

Soft Sky Blue gently complements the blues, softening the palette with light, airy undertones.

HEX#A6C8D2
RGB166, 200, 210
HSL194, 33, 74
CMYK21, 5, 0, 18
Muted Green

Muted Green balances the strong greens with subdued tones, supporting a calm overall impression.

HEX#7EBE8D
RGB126, 190, 141
HSL134, 33, 62
CMYK34, 0, 26, 25

Neutral Colors

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

White

RolesBg Light, Btn Primary Text, Btn Secondary Text

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

RolesBg Dark

HEX#F4F6F8
RGB244, 246, 248
HSL210, 22, 96
CMYK2, 1, 0, 3
Charcoal

RolesText

HEX#1A2026
RGB26, 32, 38
HSL210, 19, 13
CMYK32, 16, 0, 85

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-royal-blue: #2C6EB2;
  --color-dark-blue: #1B4F72;
  --color-teal-green: #3B9A6D;
  --color-soft-sky-blue: #A6C8D2;
  --color-muted-green: #7EBE8D;
  --color-white: #FFFFFF;
  --color-alabaster: #F4F6F8;
  --color-charcoal: #1A2026;
}

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: #2C6EB2;
  --role-link: #2C6EB2;
  --role-btn-primary-bg: #2C6EB2;
  --role-btn-secondary-bg: #1B4F72;
  --role-headline: #1B4F72;
  --role-btn-outlined-border: #3B9A6D;
  --role-btn-outlined-text: #3B9A6D;
  --role-icon: #A6C8D2;
  --role-border: #A6C8D2;
  --role-divider: #A6C8D2;
  --role-outline: #A6C8D2;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F4F6F8;
  --role-text: #1A2026;
}

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.
{
    "royal-blue": "#2C6EB2",
    "dark-blue": "#1B4F72",
    "teal-green": "#3B9A6D",
    "soft-sky-blue": "#A6C8D2",
    "muted-green": "#7EBE8D",
    "white": "#FFFFFF",
    "alabaster": "#F4F6F8",
    "charcoal": "#1A2026"
}
Press Space to load new palette