Crimson#DC143C
Mint Green#3CBC8D
Rico Blue#4776AB
Slate#8B9A9F
Sage#A3B18A
Palette direction

Crimson Mint Blue Color Palette

This palette features a harmonious triadic relationship among its main colors, combining a vibrant Crimson, a calming Rico Blue, and a fresh Mint Green, creating an energetic yet balanced brand identity. The support colors subtly reinforce the main colors with gentle Slate and Sage green tones, maintaining a cohesive and soft visual harmony. The neutrals provide clear contrast for text and backgrounds with Ivory, Light Mist, and Charcoal, ensuring strong readability and interface clarity.

Split ComplementaryCreativecrimsonmintbluetriadic
palette-preview.example
Creative color direction

Crimson Mint Blue Color Palette

This palette features a harmonious triadic relationship among its main colors, combining a vibrant Crimson, a calming Rico Blue, and a fresh Mint Green, creating an energetic yet balanced brand identity. The support colors subtly reinforce the main colors with gentle Slate and Sage green tones, maintaining a cohesive and soft visual harmony. The neutrals provide clear contrast for text and backgrounds with Ivory, Light Mist, and Charcoal, ensuring strong readability and interface clarity.

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 #363636on Mint Green #3CBC8D5.0:1 Strong
Logo Ivory #FFFFFFon Crimson #DC143C5.0:1 Strong
Logo Ivory #FFFFFFon Rico Blue #4776AB4.7:1 Strong
Logo Charcoal #363636on Ivory #FFFFFF12.1:1 Excellent
Icon color
BackgroundCrimson#DC143CTextIvory#FFFFFF
Primary Button4.99:1
AA

Best for the main action users should notice first.

BackgroundMint Green#3CBC8DTextCharcoal#363636
Secondary Button5.05:1
AA

Useful for softer choices and secondary paths.

BackgroundIvory#FFFFFFTextCrimson#DC143C
Outlined Button4.99:1
AA

Good for lower-emphasis actions on light surfaces.

BackgroundIvory#FFFFFFTextCrimson#DC143C
Text Button4.99:1
AA

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

Palette composition8 colorsSplit Complementary color relationship
9:41Crimson Mint Blue Color Palette Color role balance
Split 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.

CCrimson Mint Blue Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The triadic combination of vibrant Crimson, refreshing Mint Green, and cool Rico Blue creates a distinctive and balanced visual identity that is lively and recognizable across digital and print applications.

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.Crimson #DC143C
HeadlineUsed for main titles and key messages.Rico Blue #4776AB
LinkUsed for links and interactive text.Crimson #DC143C

Buttons

Primary Button
BackgroundCrimson #DC143C
TextIvory #FFFFFF
Secondary Button
BackgroundMint Green #3CBC8D
TextCharcoal #363636
Outlined Button
BackgroundCrimson #DC143C
TextCrimson #DC143C

Interface

TextDefault readable body text.Charcoal #363636
Bg LightLight page or section background.Ivory #FFFFFF
Bg DarkDark page or section background.Light Mist #C7CCC8
IconSmall interface icons and marks.Slate #8B9A9F
BorderCards, inputs, and component borders.Slate #8B9A9F
DividerSubtle separators between content.Slate #8B9A9F
OutlineFocus rings and emphasis outlines.Slate #8B9A9F

Palette Colors

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

Main (Brand) Colors

The triadic combination of vibrant Crimson, refreshing Mint Green, and cool Rico Blue creates a distinctive and balanced visual identity that is lively and recognizable across digital and print applications.

PrimaryCrimson

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text

Crimson injects energy and passion, making the brand bold and memorable while commanding attention for key interactive elements.

HEX#DC143C
RGB220, 20, 60
HSL348, 83, 47
CMYK0, 91, 73, 14
SecondaryMint Green

RolesBtn Secondary Bg

Mint Green provides a fresh, approachable contrast to Crimson, promoting clarity and calmness in secondary actions.

HEX#3CBC8D
RGB60, 188, 141
HSL158, 52, 49
CMYK68, 0, 25, 26
TertiaryRico Blue

RolesHeadline

Rico Blue offers a trustworthy and serene tone suitable for headlines, balancing warmth and professionalism.

HEX#4776AB
RGB71, 118, 171
HSL212, 41, 47
CMYK58, 31, 0, 33

Support Colors

The support colors Slate and Sage gently complement and balance the vibrancy of the main colors, providing subtle accents and visual softness without overpowering the primary palette.

Slate

RolesIcon, Border, Divider, Outline

Slate serves as a muted blue-gray that anchors the palette with neutrality and refinement, harmonizing with all main colors.

HEX#8B9A9F
RGB139, 154, 159
HSL195, 9, 58
CMYK13, 3, 0, 38
Sage

Sage introduces a soft, earthy green accent that supports Mint Green's freshness while adding natural warmth and depth.

HEX#A3B18A
RGB163, 177, 138
HSL82, 20, 62
CMYK8, 0, 22, 31

Neutral Colors

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

Ivory

RolesBg Light, Btn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Light Mist

RolesBg Dark

HEX#C7CCC8
RGB199, 204, 200
HSL132, 5, 79
CMYK2, 0, 2, 20
Charcoal

RolesText, Btn Secondary Text

HEX#363636
RGB54, 54, 54
HSL0, 0, 21
CMYK0, 0, 0, 79

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-crimson: #DC143C;
  --color-mint-green: #3CBC8D;
  --color-rico-blue: #4776AB;
  --color-slate: #8B9A9F;
  --color-sage: #A3B18A;
  --color-ivory: #FFFFFF;
  --color-light-mist: #C7CCC8;
  --color-charcoal: #363636;
}

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: #DC143C;
  --role-link: #DC143C;
  --role-btn-primary-bg: #DC143C;
  --role-btn-outlined-border: #DC143C;
  --role-btn-outlined-text: #DC143C;
  --role-btn-secondary-bg: #3CBC8D;
  --role-headline: #4776AB;
  --role-icon: #8B9A9F;
  --role-border: #8B9A9F;
  --role-divider: #8B9A9F;
  --role-outline: #8B9A9F;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #C7CCC8;
  --role-text: #363636;
  --role-btn-secondary-text: #363636;
}

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.
{
    "crimson": "#DC143C",
    "mint-green": "#3CBC8D",
    "rico-blue": "#4776AB",
    "slate": "#8B9A9F",
    "sage": "#A3B18A",
    "ivory": "#FFFFFF",
    "light-mist": "#C7CCC8",
    "charcoal": "#363636"
}
Press Space to load new palette