Navy#001F3F
Crimson#8B0000
Slate#708090
Lavender#B497BD
Ivory#F5F0EB
Palette direction

Navy Crimson Slate Color Palette

This luxury minimalist palette combines deep Navy, rich Crimson, and elegant Slate as main colors, supported by soft Lavender and warm Ivory accents, balanced with pure White, light Ivory, and Charcoal neutrals to provide clear contrast and refined sophistication.

ComplementaryFashion Beautyluxuryminimalhair accessoriesnavy
palette-preview.example
Fashion Beauty color direction

Navy Crimson Slate Color Palette

This luxury minimalist palette combines deep Navy, rich Crimson, and elegant Slate as main colors, supported by soft Lavender and warm Ivory accents, balanced with pure White, light Ivory, and Charcoal neutrals to provide clear contrast and refined sophistication.

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 Navy #001F3F16.6:1 Excellent
Logo Navy #001F3Fon White #FFFFFF16.6:1 Excellent
Logo Navy #001F3Fon Lavender #B497BD6.4:1 Strong
Icon color
BackgroundNavy#001F3FTextWhite#FFFFFF
Primary Button16.56:1
AAA

Best for the main action users should notice first.

BackgroundCrimson#8B0000TextWhite#FFFFFF
Secondary Button10.01:1
AAA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextCrimson#8B0000
Outlined Button10.01:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextNavy#001F3F
Text Button16.56:1
AAA

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

Palette composition8 colorsComplementary color relationship
9:41Navy Crimson Slate 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.

CNavy Crimson Slate Color PaletteFashion Beauty brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors Navy, Crimson, and Slate form a triadic harmony that is distinctive and balanced, providing strong recognition and versatility for a luxury minimalist hair brand.

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.Navy #001F3F
HeadlineUsed for main titles and key messages.Slate #708090
LinkUsed for links and interactive text.Navy #001F3F

Buttons

Primary Button
BackgroundNavy #001F3F
TextWhite #FFFFFF
Secondary Button
BackgroundCrimson #8B0000
TextWhite #FFFFFF
Outlined Button
BackgroundCrimson #8B0000
TextCrimson #8B0000

Interface

TextDefault readable body text.Charcoal #333333
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Light Ivory #F2F0EC
IconSmall interface icons and marks.Lavender #B497BD
BorderCards, inputs, and component borders.Lavender #B497BD
DividerSubtle separators between content.Lavender #B497BD
OutlineFocus rings and emphasis outlines.Lavender #B497BD

Palette Colors

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

Main (Brand) Colors

The main colors Navy, Crimson, and Slate form a triadic harmony that is distinctive and balanced, providing strong recognition and versatility for a luxury minimalist hair brand.

PrimaryNavy

RolesLogo, Btn Primary Bg, Link

Navy conveys trust, sophistication, and timeless luxury, anchoring the brand with depth and elegance.

HEX#001F3F
RGB0, 31, 63
HSL210, 100, 12
CMYK100, 51, 0, 75
SecondaryCrimson

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Crimson adds a passionate, confident accent that energizes the palette while maintaining refinement.

HEX#8B0000
RGB139, 0, 0
HSL0, 100, 27
CMYK0, 100, 100, 45
TertiarySlate

RolesHeadline

Slate offers a cool, understated tone that complements Navy and Crimson with a modern, sleek edge.

HEX#708090
RGB112, 128, 144
HSL210, 13, 50
CMYK22, 11, 0, 44

Support Colors

The support colors Lavender and Ivory provide subtle, harmonious contrasts that enhance the luxurious, minimal aesthetic without overpowering the main colors.

Lavender

RolesIcon, Border, Divider, Outline

Lavender softly balances the strong hues with a gentle, cool accent that adds refinement and visual interest.

HEX#B497BD
RGB180, 151, 189
HSL286, 22, 67
CMYK5, 20, 0, 26
Ivory

Ivory introduces warmth and lightness as a supportive neutral tone, amplifying the premium feel of the palette.

HEX#F5F0EB
RGB245, 240, 235
HSL30, 33, 94
CMYK0, 2, 4, 4

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
Light Ivory

RolesBg Dark

HEX#F2F0EC
RGB242, 240, 236
HSL40, 19, 94
CMYK0, 1, 2, 5
Charcoal

RolesText

HEX#333333
RGB51, 51, 51
HSL0, 0, 20
CMYK0, 0, 0, 80

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-navy: #001F3F;
  --color-crimson: #8B0000;
  --color-slate: #708090;
  --color-lavender: #B497BD;
  --color-ivory: #F5F0EB;
  --color-white: #FFFFFF;
  --color-light-ivory: #F2F0EC;
  --color-charcoal: #333333;
}

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: #001F3F;
  --role-btn-primary-bg: #001F3F;
  --role-link: #001F3F;
  --role-btn-secondary-bg: #8B0000;
  --role-btn-outlined-border: #8B0000;
  --role-btn-outlined-text: #8B0000;
  --role-headline: #708090;
  --role-icon: #B497BD;
  --role-border: #B497BD;
  --role-divider: #B497BD;
  --role-outline: #B497BD;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F2F0EC;
  --role-text: #333333;
}

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.
{
    "navy": "#001F3F",
    "crimson": "#8B0000",
    "slate": "#708090",
    "lavender": "#B497BD",
    "ivory": "#F5F0EB",
    "white": "#FFFFFF",
    "light-ivory": "#F2F0EC",
    "charcoal": "#333333"
}
Press Space to load new palette