Cobalt Blue#1E5BFF
Royal Violet#6A2CFF
Crimson#E53935
Sea Green#4D8F8A
Thistle#C7C2D6
Palette direction

Brian Johnson Inspired Color Palette

This palette channels Brian Johnson’s high-energy, performance-first presence through a bold electric blue, a focused violet, and a sharp signal red. Together they create a confident system that feels ambitious, modern, and attention-grabbing without losing usability.

CustomNoneBrian Johnsoninspiredperformanceenergy
palette-preview.example
None color direction

Brian Johnson Inspired Color Palette

This palette channels Brian Johnson’s high-energy, performance-first presence through a bold electric blue, a focused violet, and a sharp signal red. Together they create a confident system that feels ambitious, modern, and attention-grabbing without losing usability.

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 Royal Violet #6A2CFF6.1:1 Strong
Logo White #FFFFFFon Cobalt Blue #1E5BFF5.3:1 Strong
Logo Charcoal #111111on White #FFFFFF18.9:1 Excellent
Logo White #FFFFFFon Charcoal #11111118.9:1 Excellent
Icon color
BackgroundCobalt Blue#1E5BFFTextWhite#FFFFFF
Primary Button5.26:1
AA

Best for the main action users should notice first.

BackgroundCrimson#E53935TextCharcoal#111111
Secondary Button4.47:1
Large text

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextRoyal Violet#6A2CFF
Outlined Button6.15:1
AA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextCobalt Blue#1E5BFF
Text Button5.26:1
AA

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

Palette composition8 colorsCustom color relationship
9:41Brian Johnson Inspired Color Palette Color role balance
Custom 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.

CBrian Johnson Inspired Color PaletteNone brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors form a high-energy triadic relationship that feels vivid and assertive, giving the brand a recognizable system with strong visual momentum. Blue leads the identity, violet adds depth and intensity, and red injects urgency and impact.

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.Cobalt Blue #1E5BFF
HeadlineUsed for main titles and key messages.Royal Violet #6A2CFF
LinkUsed for links and interactive text.Cobalt Blue #1E5BFF

Buttons

Primary Button
BackgroundCobalt Blue #1E5BFF
TextWhite #FFFFFF
Secondary Button
BackgroundCrimson #E53935
TextCharcoal #111111
Outlined Button
BackgroundRoyal Violet #6A2CFF
TextRoyal Violet #6A2CFF

Interface

TextDefault readable body text.Charcoal #111111
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Charcoal #111111
IconSmall interface icons and marks.Sea Green #4D8F8A
BorderCards, inputs, and component borders.Sea Green #4D8F8A
DividerSubtle separators between content.Thistle #C7C2D6
OutlineFocus rings and emphasis outlines.Thistle #C7C2D6

Palette Colors

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

Main (Brand) Colors

The main colors form a high-energy triadic relationship that feels vivid and assertive, giving the brand a recognizable system with strong visual momentum. Blue leads the identity, violet adds depth and intensity, and red injects urgency and impact.

PrimaryCobalt Blue

RolesLogo, Link, Btn Primary Bg

Cobalt Blue establishes the core identity with a direct, confident tone that reads as fast and authoritative.

HEX#1E5BFF
RGB30, 91, 255
HSL224, 100, 56
CMYK88, 64, 0, 0
SecondaryRoyal Violet

RolesHeadline, Btn Outlined Border, Btn Outlined Text

Royal Violet adds cerebral intensity and a more electric edge, giving headlines and outline actions a sharper signature.

HEX#6A2CFF
RGB106, 44, 255
HSL258, 100, 59
CMYK58, 83, 0, 0
TertiaryCrimson

RolesBtn Secondary Bg

Crimson brings urgency and energy, creating a strong secondary action color that feels powerful and unmistakable.

HEX#E53935
RGB229, 57, 53
HSL1, 77, 55
CMYK0, 75, 77, 10

Support Colors

The support colors soften and extend the main palette with muted tonal bridges that keep the system usable across interfaces. They stay restrained so the vivid core colors remain the brand’s primary signal.

Sea Green

RolesIcon, Border

Sea Green cools the intensity of the main hues and works well for supporting UI details without competing for attention.

HEX#4D8F8A
RGB77, 143, 138
HSL175, 30, 43
CMYK46, 0, 3, 44
Thistle

RolesDivider, Outline

Thistle provides a quiet structural accent that separates content cleanly while staying visually subordinate to the active colors.

HEX#C7C2D6
RGB199, 194, 214
HSL255, 20, 80
CMYK7, 9, 0, 16

Neutral Colors

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

White

RolesBg Light, Btn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Alice Blue
HEX#F4F5F7
RGB244, 245, 247
HSL220, 16, 96
CMYK1, 1, 0, 3
Charcoal

RolesBg Dark, Text, Btn Secondary Text

HEX#111111
RGB17, 17, 17
HSL0, 0, 7
CMYK0, 0, 0, 93

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-cobalt-blue: #1E5BFF;
  --color-royal-violet: #6A2CFF;
  --color-crimson: #E53935;
  --color-sea-green: #4D8F8A;
  --color-thistle: #C7C2D6;
  --color-white: #FFFFFF;
  --color-alice-blue: #F4F5F7;
  --color-charcoal: #111111;
}

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: #1E5BFF;
  --role-link: #1E5BFF;
  --role-btn-primary-bg: #1E5BFF;
  --role-headline: #6A2CFF;
  --role-btn-outlined-border: #6A2CFF;
  --role-btn-outlined-text: #6A2CFF;
  --role-btn-secondary-bg: #E53935;
  --role-icon: #4D8F8A;
  --role-border: #4D8F8A;
  --role-divider: #C7C2D6;
  --role-outline: #C7C2D6;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #111111;
  --role-text: #111111;
  --role-btn-secondary-text: #111111;
}

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.
{
    "cobalt-blue": "#1E5BFF",
    "royal-violet": "#6A2CFF",
    "crimson": "#E53935",
    "sea-green": "#4D8F8A",
    "thistle": "#C7C2D6",
    "white": "#FFFFFF",
    "alice-blue": "#F4F5F7",
    "charcoal": "#111111"
}
Press Space to load new palette