Jet Black#000000
Rich Cerulean#004E5F
Cool Aqua#0099A9
Soft Azure#2BB8C4
Azure#60CFDC
Palette direction

Black Cyan Blue Color Palette

A sophisticated palette inspired by deep blacks and cool blues from the image, combining strong dark tones with refreshing aqua and cyan accents to evoke professionalism and calmness suitable for tech or creative brands.

MonochromaticTechblackcyanbluetech
palette-preview.example
Tech color direction

Black Cyan Blue Color Palette

A sophisticated palette inspired by deep blacks and cool blues from the image, combining strong dark tones with refreshing aqua and cyan accents to evoke professionalism and calmness suitable for tech or creative brands.

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 Jet Black #00000021.0:1 Excellent
Logo Jet Black #000000on Cool Aqua #0099A96.1:1 Strong
Logo Jet Black #000000on Pure White #FFFFFF21.0:1 Excellent
Logo Jet Black #000000on Azure #60CFDC11.5:1 Excellent
Icon color
BackgroundJet Black#000000TextPure White#FFFFFF
Primary Button21.00:1
AAA

Best for the main action users should notice first.

BackgroundRich Cerulean#004E5FTextPure White#FFFFFF
Secondary Button9.31:1
AAA

Useful for softer choices and secondary paths.

BackgroundAzure#60CFDCTextCool Aqua#0099A9
Outlined Button1.87:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundAzure#60CFDCTextRich Cerulean#004E5F
Text Button5.08:1
AA

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

Palette composition8 colorsMonochromatic color relationship
9:41Black Cyan Blue Color Palette Color role balance
Monochromatic 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.

CBlack Cyan Blue Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine black with deep cyan and cool blue hues creating a cohesive, calming, and trustworthy palette suitable for professional digital identities.

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.Jet Black #000000
HeadlineUsed for main titles and key messages.Rich Cerulean #004E5F
LinkUsed for links and interactive text.Rich Cerulean #004E5F

Buttons

Primary Button
BackgroundJet Black #000000
TextPure White #FFFFFF
Secondary Button
BackgroundRich Cerulean #004E5F
TextPure White #FFFFFF
Outlined Button
BackgroundJet Black #000000
TextCool Aqua #0099A9

Interface

TextDefault readable body text.Rich Black #1A1A1A
Bg LightLight page or section background.Azure #60CFDC
Bg DarkDark page or section background.Rich Black #1A1A1A
IconSmall interface icons and marks.Soft Azure #2BB8C4
BorderCards, inputs, and component borders.Soft Azure #2BB8C4
DividerSubtle separators between content.Soft Azure #2BB8C4
OutlineFocus rings and emphasis outlines.Soft Azure #2BB8C4

Palette Colors

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

Main (Brand) Colors

The main colors combine black with deep cyan and cool blue hues creating a cohesive, calming, and trustworthy palette suitable for professional digital identities.

PrimaryJet Black

RolesLogo, Btn Primary Bg, Btn Outlined Border

Offers a strong foundation and sophistication, emphasizing professionalism and boldness.

HEX#000000
RGB0, 0, 0
HSL0, 0, 0
CMYK0, 0, 0, 100
SecondaryRich Cerulean

RolesLink, Btn Secondary Bg, Headline

A deep cyan tone that adds depth, balance, and a sense of calm confidence.

HEX#004E5F
RGB0, 78, 95
HSL191, 100, 19
CMYK100, 18, 0, 63
TertiaryCool Aqua

RolesBtn Outlined Text

Brings a refreshing and vibrant highlight to support calls to action and links visually.

HEX#0099A9
RGB0, 153, 169
HSL186, 100, 33
CMYK100, 9, 0, 34

Support Colors

The support colors are lighter blues that extend and soften the main palette, enhancing usability and balance without overpowering the core colors.

Soft Azure

RolesIcon, Border, Divider, Outline

A softer aqua tone that complements the deeper blues, maintaining a calm and modern feel.

HEX#2BB8C4
RGB43, 184, 196
HSL185, 64, 47
CMYK78, 6, 0, 23
Azure

RolesBg Light

A pale cyan that provides a gentle, clean background to support content visibility.

HEX#60CFDC
RGB96, 207, 220
HSL186, 64, 62
CMYK56, 6, 0, 14

Neutral Colors

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

Pure White

RolesBtn Primary Text, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Near White
HEX#F1F5F8
RGB241, 245, 248
HSL206, 33, 96
CMYK3, 1, 0, 3
Rich Black

RolesBg Dark, Text

HEX#1A1A1A
RGB26, 26, 26
HSL0, 0, 10
CMYK0, 0, 0, 90

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-jet-black: #000000;
  --color-rich-cerulean: #004E5F;
  --color-cool-aqua: #0099A9;
  --color-soft-azure: #2BB8C4;
  --color-azure: #60CFDC;
  --color-pure-white: #FFFFFF;
  --color-near-white: #F1F5F8;
  --color-rich-black: #1A1A1A;
}

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: #000000;
  --role-btn-primary-bg: #000000;
  --role-btn-outlined-border: #000000;
  --role-link: #004E5F;
  --role-btn-secondary-bg: #004E5F;
  --role-headline: #004E5F;
  --role-btn-outlined-text: #0099A9;
  --role-icon: #2BB8C4;
  --role-border: #2BB8C4;
  --role-divider: #2BB8C4;
  --role-outline: #2BB8C4;
  --role-bg-light: #60CFDC;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #1A1A1A;
  --role-text: #1A1A1A;
}

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.
{
    "jet-black": "#000000",
    "rich-cerulean": "#004E5F",
    "cool-aqua": "#0099A9",
    "soft-azure": "#2BB8C4",
    "azure": "#60CFDC",
    "pure-white": "#FFFFFF",
    "near-white": "#F1F5F8",
    "rich-black": "#1A1A1A"
}
Press Space to load new palette