Elegant Navy, Black, and White Luxury Color Palette for Fashion and A...

Navy Black White Color Palette

This palette is inspired by the elegant and classic black-and-white contrast of the logo, adding deep navy and softer, lighter blues to convey luxury, trust, and refinement. Supporting colors extend the main palette with subtle gray and a lighter cool blue tone to maintain sophistication and enhance visual balance. Neutrals provide crisp purity, soft brightness, and profound contrast for strong readability and modern aesthetics.

MonochromaticFashion Beautyluxuryelegantclassicnavy

Main (Brand) Colors

The main colors provide a refined and cohesive foundation combining classic black and white contrasts with varying navy blues to create a sophisticated, trustworthy aesthetic.

PrimaryBlack

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

Black offers timeless sophistication and strong visual contrast to anchor the brand's elegance.

HEX#000000

RGB0, 0, 0

HSL0, 0, 0

CMYK0, 0, 0, 100

SecondaryDark Navy

RolesHeadline, Btn Secondary Bg

Dark Navy conveys trust, depth, and luxury, enriching the palette with a dignified blue tone.

HEX#0A1F44

RGB10, 31, 68

HSL218, 74, 15

CMYK85, 54, 0, 73

TertiarySteel Blue

Steel Blue adds a softer yet professional nuance, pairing well with darker blues and black.

HEX#4B6C9E

RGB75, 108, 158

HSL216, 36, 46

CMYK53, 32, 0, 38

Support Colors

Supporting colors provide subtle tonal variety with softer gray and a lighter cool blue hue that complements the main navy tones without overpowering the classic black and white.

Cool Gray

RolesIcon, Border, Divider, Outline

Cool Gray offers understated refinement and balances the deep hues with neutral softness.

HEX#B0B8C1

RGB176, 184, 193

HSL212, 12, 72

CMYK9, 5, 0, 24

Pale Cornflower Blue

RolesBg Light

Pale Cornflower Blue is a lighter, softer blue background tone that enhances readability while maintaining cool elegance.

HEX#E6EDF8

RGB230, 237, 248

HSL217, 56, 94

CMYK7, 4, 0, 3

Neutral Colors

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

White

RolesBg Dark, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Ivory White

HEX#F3F4F7

RGB243, 244, 247

HSL225, 20, 96

CMYK2, 1, 0, 3

Charcoal Black

RolesText

HEX#1A1A1A

RGB26, 26, 26

HSL0, 0, 10

CMYK0, 0, 0, 90

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Black", "hex": "#000000", "role": "main", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 100, "source": "colorfly" } }, { "name": "Dark Navy", "hex": "#0A1F44", "role": "main", "cmyk": { "c": 85, "m": 54, "y": 0, "k": 73, "source": "colorfly" } }, { "name": "Steel Blue", "hex": "#4B6C9E", "role": "main", "cmyk": { "c": 53, "m": 32, "y": 0, "k": 38, "source": "colorfly" } }, { "name": "Cool Gray", "hex": "#B0B8C1", "role": "support", "cmyk": { "c": 9, "m": 5, "y": 0, "k": 24, "source": "colorfly" } }, { "name": "Pale Cornflower Blue", "hex": "#E6EDF8", "role": "support", "cmyk": { "c": 7, "m": 4, "y": 0, "k": 3, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory White", "hex": "#F3F4F7", "role": "neutral", "cmyk": { "c": 2, "m": 1, "y": 0, "k": 3, "source": "colorfly" } }, { "name": "Charcoal Black", "hex": "#1A1A1A", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 90, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-black: #000000; --color-dark-navy: #0A1F44; --color-steel-blue: #4B6C9E; --color-cool-gray: #B0B8C1; --color-pale-cornflower-blue: #E6EDF8; --color-white: #FFFFFF; --color-ivory-white: #F3F4F7; --color-charcoal-black: #1A1A1A; }

:root { --role-logo: #000000; --role-link: #000000; --role-btn-primary-bg: #000000; --role-btn-outlined-border: #000000; --role-btn-outlined-text: #000000; --role-headline: #0A1F44; --role-btn-secondary-bg: #0A1F44; --role-icon: #B0B8C1; --role-border: #B0B8C1; --role-divider: #B0B8C1; --role-outline: #B0B8C1; --role-bg-light: #E6EDF8; --role-bg-dark: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-text: #1A1A1A; }

{ "black": "#000000", "dark-navy": "#0A1F44", "steel-blue": "#4B6C9E", "cool-gray": "#B0B8C1", "pale-cornflower-blue": "#E6EDF8", "white": "#FFFFFF", "ivory-white": "#F3F4F7", "charcoal-black": "#1A1A1A" }

<div class="colorfly-moving-gradient-bg"> <span class="colorfly-gradient-spark" aria-hidden="true"></span> <div> <small>Motion gradient</small> <h2>Gradient background</h2> <p>A moving brand gradient built from your palette.</p> </div> </div> <style> .colorfly-moving-gradient-bg { --gradient-anchor: #000000; --gradient-partner: #737373; --gradient-accent: #B0B8C1; --gradient-text: #FFFFFF; position: relative; display: grid; place-items: center; min-height: 340px; overflow: hidden; padding: 42px; color: var(--gradient-text); border-radius: 28px; background: radial-gradient(circle at 20% 82%, color-mix(in srgb, var(--gradient-accent) 48%, transparent) 0 14%, transparent 42%), radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--gradient-partner) 52%, transparent) 0 16%, transparent 46%), linear-gradient(135deg, var(--gradient-anchor), color-mix(in srgb, var(--gradient-anchor) 72%, black 18%), var(--gradient-partner), var(--gradient-anchor)); background-size: 160% 160%, 180% 180%, 240% 240%; animation: colorfly-gradient-bg 10.5s cubic-bezier(.72, 0, .22, 1) infinite; } .colorfly-moving-gradient-bg > div { position: relative; z-index: 1; max-width: 640px; text-align: center; } .colorfly-moving-gradient-bg::before, .colorfly-moving-gradient-bg::after, .colorfly-gradient-spark { content: ""; position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; } .colorfly-moving-gradient-bg::before { left: -10%; top: -18%; width: min(520px, 72%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-partner) 88%, white 8%) 0%, transparent 66%), radial-gradient(circle at 68% 32%, color-mix(in srgb, var(--gradient-accent) 58%, white 10%) 0%, transparent 38%); opacity: .86; animation: colorfly-gradient-orb-one 11s cubic-bezier(.65, 0, .22, 1) infinite; } .colorfly-moving-gradient-bg::after { right: -12%; bottom: -24%; width: min(620px, 82%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-accent) 86%, white 6%) 0%, transparent 68%), radial-gradient(circle at 28% 72%, color-mix(in srgb, var(--gradient-partner) 62%, white 8%) 0%, transparent 42%); opacity: .78; animation: colorfly-gradient-orb-two 12.8s cubic-bezier(.56, 0, .25, 1) infinite; } .colorfly-gradient-spark { left: 42%; top: 44%; width: min(360px, 54%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-anchor) 64%, white 12%) 0%, transparent 62%); opacity: .46; animation: colorfly-gradient-spark 9.2s cubic-bezier(.62, 0, .2, 1) infinite; } @keyframes colorfly-gradient-bg { 0%, 100% { background-position: 0% 46%, 100% 24%, 0% 50%; } 18% { background-position: 44% 88%, 58% 12%, 34% 22%; } 39% { background-position: 86% 38%, 18% 74%, 86% 64%; } 63% { background-position: 26% 16%, 84% 92%, 42% 100%; } 82% { background-position: 68% 68%, 32% 30%, 100% 34%; } } @keyframes colorfly-gradient-orb-one { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 22% { transform: translate3d(78%, 22%, 0) scale(1.12); } 47% { transform: translate3d(44%, 86%, 0) scale(.92); } 72% { transform: translate3d(112%, 56%, 0) scale(1.2); } } @keyframes colorfly-gradient-orb-two { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); } 19% { transform: translate3d(-48%, -18%, 0) scale(.9); } 53% { transform: translate3d(-92%, -62%, 0) scale(1.14); } 79% { transform: translate3d(-22%, -86%, 0) scale(.98); } } @keyframes colorfly-gradient-spark { 0%, 100% { transform: translate3d(-12%, -8%, 0) scale(.84); } 28% { transform: translate3d(52%, -34%, 0) scale(1.08); } 58% { transform: translate3d(-44%, 38%, 0) scale(.96); } 84% { transform: translate3d(20%, 28%, 0) scale(1.18); } } </style>

<div class="colorfly-gradient-text-card"> <small>Gradient type</small> <h2>Gradient on text</h2> <p>A moving text gradient built from your palette.</p> </div> <style> .colorfly-gradient-text-card { --gradient-text-a: #000000; --gradient-text-b: #737373; --gradient-text-c: #5F6368; position: relative; display: grid; place-items: center; min-height: 310px; overflow: hidden; padding: 42px; text-align: center; border-radius: 28px; background: radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--gradient-text-a) 8%, transparent), transparent 28%), linear-gradient(135deg, #fff, #fbfbfd); } .colorfly-gradient-text-card::before, .colorfly-gradient-text-card::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(2px); } .colorfly-gradient-text-card::before { left: 9%; top: 15%; width: min(330px, 48%); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-a) 20%, transparent) 0%, transparent 68%); animation: colorfly-gradient-text-glow-one 8s cubic-bezier(.62, 0, .2, 1) infinite; } .colorfly-gradient-text-card::after { right: 7%; bottom: 6%; width: min(360px, 52%); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-c) 18%, transparent) 0%, transparent 70%); animation: colorfly-gradient-text-glow-two 9.5s cubic-bezier(.56, 0, .25, 1) infinite; } .colorfly-gradient-text-card small, .colorfly-gradient-text-card p { position: relative; z-index: 1; color: #65616d; } .colorfly-gradient-text-card h2 { position: relative; z-index: 1; margin: 10px 0 12px; color: transparent; font-size: clamp(42px, 8vw, 96px); line-height: .92; background: radial-gradient(circle at 18% 50%, var(--gradient-text-b) 0 12%, transparent 38%), radial-gradient(circle at 82% 44%, var(--gradient-text-c) 0 14%, transparent 40%), linear-gradient(100deg, var(--gradient-text-a), var(--gradient-text-b), var(--gradient-text-c), var(--gradient-text-a)); background-size: 220% 220%, 240% 240%, 280% 100%; -webkit-background-clip: text; background-clip: text; animation: colorfly-gradient-text-shift 6.2s cubic-bezier(.68, 0, .22, 1) infinite; } @keyframes colorfly-gradient-text-shift { 0%, 100% { background-position: 8% 52%, 92% 42%, 0% 50%; } 27% { background-position: 78% 18%, 28% 82%, 42% 50%; } 61% { background-position: 36% 92%, 86% 24%, 100% 50%; } 84% { background-position: 92% 48%, 18% 40%, 58% 50%; } } @keyframes colorfly-gradient-text-glow-one { 0%, 100% { transform: translate3d(0, 0, 0) scale(.92); } 42% { transform: translate3d(80%, 32%, 0) scale(1.12); } 72% { transform: translate3d(28%, 86%, 0) scale(.98); } } @keyframes colorfly-gradient-text-glow-two { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 36% { transform: translate3d(-62%, -18%, 0) scale(.9); } 76% { transform: translate3d(-36%, -78%, 0) scale(1.12); } } </style>

Navy Black White Color Palette

Navy Black White Color Palette

Gradients

Color Roles and Usage Map

Brand identity

Buttons

Interface

Print Color Values

Palette Colors

Main (Brand) Colors

Support Colors

Neutral Colors

Export and Handoff

Export logo in seconds

Color tokens

Role tokens

JSON

Moving gradient background

Moving gradient text

Build your first color system

Palette workspace

Navy Black White Color Palette

Gradients

Color Roles and Usage Map

Brand identity

Buttons

Interface

Print Color Values

Palette Colors

Main (Brand) Colors

Support Colors

Neutral Colors

Export and Handoff

Export logo in seconds

Color tokens

Role tokens

JSON

Moving gradient background

Moving gradient text

Build your first color system