Royal Blue#1E3A8A
Teal Blue#256D85
Cornflower Blue#3B82F6
Muted Aqua#5CA9B8
Soft Slate#7FB3C9
Palette direction

Trusty Blue Teal Color Palette

This palette combines trustworthy blue hues with supportive teal accents and grounded neutrals, creating a modern and approachable identity suitable for a seamless digital marketplace focused on human connection and reliability.

AnalogousEcommercetrustmoderndigital marketplacehuman-centered
palette-preview.example
Ecommerce color direction

Trusty Blue Teal Color Palette

This palette combines trustworthy blue hues with supportive teal accents and grounded neutrals, creating a modern and approachable identity suitable for a seamless digital marketplace focused on human connection and reliability.

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 Pure White #FFFFFFon Royal Blue #1E3A8A10.4:1 Excellent
Logo Pure White #FFFFFFon Teal Blue #256D855.8:1 Strong
Logo Charcoal #111827on Cornflower Blue #3B82F64.8:1 Strong
Logo Charcoal #111827on Pure White #FFFFFF17.7:1 Excellent
Icon color
BackgroundRoyal Blue#1E3A8ATextPure White#FFFFFF
Primary Button10.36:1
AAA

Best for the main action users should notice first.

BackgroundTeal Blue#256D85TextPure White#FFFFFF
Secondary Button5.83:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextTeal Blue#256D85
Outlined Button5.83:1
AA

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextRoyal Blue#1E3A8A
Text Button10.36:1
AAA

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

Palette composition8 colorsAnalogous color relationship
9:41Trusty Blue Teal 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.

CTrusty Blue Teal Color PaletteEcommerce brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main blues and teals are closely related hues that evoke trust, calmness, and openness, forming a cohesive and recognizable brand color system that appeals to diverse users.

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 #1E3A8A
HeadlineUsed for main titles and key messages.Teal Blue #256D85
LinkUsed for links and interactive text.Royal Blue #1E3A8A

Buttons

Primary Button
BackgroundRoyal Blue #1E3A8A
TextPure White #FFFFFF
Secondary Button
BackgroundTeal Blue #256D85
TextPure White #FFFFFF
Outlined Button
BackgroundRoyal Blue #1E3A8A
TextTeal Blue #256D85

Interface

TextDefault readable body text.Charcoal #111827
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Off White #F9FAFB
IconSmall interface icons and marks.Muted Aqua #5CA9B8
BorderCards, inputs, and component borders.Muted Aqua #5CA9B8
DividerSubtle separators between content.Muted Aqua #5CA9B8
OutlineFocus rings and emphasis outlines.Muted Aqua #5CA9B8

Palette Colors

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

Main (Brand) Colors

The main blues and teals are closely related hues that evoke trust, calmness, and openness, forming a cohesive and recognizable brand color system that appeals to diverse users.

PrimaryRoyal Blue

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border

Royal Blue conveys reliability and professionalism, establishing trust as the brand's foundation.

HEX#1E3A8A
RGB30, 58, 138
HSL224, 64, 33
CMYK78, 58, 0, 46
SecondaryTeal Blue

RolesBtn Secondary Bg, Headline, Btn Outlined Text

Teal Blue adds a modern and calming touch that enhances the approachable and human-centered nature of the marketplace.

HEX#256D85
RGB37, 109, 133
HSL195, 56, 33
CMYK72, 18, 0, 48
TertiaryCornflower Blue

Cornflower Blue provides a lighter accent that contrasts well with deeper blues, adding brightness and visual interest without overwhelming.

HEX#3B82F6
RGB59, 130, 246
HSL217, 91, 60
CMYK76, 47, 0, 4

Support Colors

Support colors extend the main palette with softer blue-greens and muted aquas that harmonize visually and emphasize clarity and accessibility without competing for attention.

Muted Aqua

RolesIcon, Border, Divider, Outline

Muted Aqua complements the strong blues by adding subtle depth and softness to interface elements, maintaining a tranquil and clean look.

HEX#5CA9B8
RGB92, 169, 184
HSL190, 39, 54
CMYK50, 8, 0, 28
Soft Slate

Soft Slate reinforces readability and balance by providing a gentle contrast that supports main color elements without distraction.

HEX#7FB3C9
RGB127, 179, 201
HSL198, 41, 64
CMYK37, 11, 0, 21

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Off White

RolesBg Dark

HEX#F9FAFB
RGB249, 250, 251
HSL210, 20, 98
CMYK1, 0, 0, 2
Charcoal

RolesText

HEX#111827
RGB17, 24, 39
HSL221, 39, 11
CMYK56, 38, 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: #1E3A8A;
  --color-teal-blue: #256D85;
  --color-cornflower-blue: #3B82F6;
  --color-muted-aqua: #5CA9B8;
  --color-soft-slate: #7FB3C9;
  --color-pure-white: #FFFFFF;
  --color-off-white: #F9FAFB;
  --color-charcoal: #111827;
}

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: #1E3A8A;
  --role-link: #1E3A8A;
  --role-btn-primary-bg: #1E3A8A;
  --role-btn-outlined-border: #1E3A8A;
  --role-btn-secondary-bg: #256D85;
  --role-headline: #256D85;
  --role-btn-outlined-text: #256D85;
  --role-icon: #5CA9B8;
  --role-border: #5CA9B8;
  --role-divider: #5CA9B8;
  --role-outline: #5CA9B8;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F9FAFB;
  --role-text: #111827;
}

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": "#1E3A8A",
    "teal-blue": "#256D85",
    "cornflower-blue": "#3B82F6",
    "muted-aqua": "#5CA9B8",
    "soft-slate": "#7FB3C9",
    "pure-white": "#FFFFFF",
    "off-white": "#F9FAFB",
    "charcoal": "#111827"
}
Press Space to load new palette