Cobalt Blue#0047AB
Black#000000
Jet Black#1A1A1A
Steel Gray#708090
Soft Cyan#A7C7E7
Palette direction

Cobalt Blue Black Color Palette

This palette combines bold Cobalt Blue with deep black as main colors to create a modern and confident identity. The additional Steel Gray and Soft Cyan support colors offer subtle accents that balance and soften the strong main colors. A neutral trio of Ivory, Light Gray, and Charcoal provides versatile backgrounds and readable text, ensuring clarity and contrast throughout the brand experience.

MonochromaticTechcobaltblueblackmodern
palette-preview.example
Tech color direction

Cobalt Blue Black Color Palette

This palette combines bold Cobalt Blue with deep black as main colors to create a modern and confident identity. The additional Steel Gray and Soft Cyan support colors offer subtle accents that balance and soften the strong main colors. A neutral trio of Ivory, Light Gray, and Charcoal provides versatile backgrounds and readable text, ensuring clarity and contrast throughout the brand experience.

Explore the color system8 colors mapped to roles
Logo contrast guide

Logo color pairings

Each column shows a usable logo color on a palette background, with contrast checked for clarity.

Logo Ivory #FFFFFF
on Black #000000

21.0:1 Excellent

Logo Black #000000
on Ivory #FFFFFF

21.0:1 Excellent

Logo Black #000000
on Light Gray #D3D3D3

14.0:1 Excellent

Logo Black #000000
on Soft Cyan #A7C7E7

12.0:1 Excellent
Business card

Printed materials without guessing.

A neutral card system with the logo color, contact text, and a restrained palette accent.

Avery Stone Palette designer avery@example.com colorfly.design
Mobile website

The palette has to survive the small screen.

A mobile landing page preview with logo, navigation, headline, CTA, content card, and chart color usage.

Tech Cobalt Blue Black Color Palette

The main colors revolve around the striking contrast of deep black and vivid cobalt blue, establishing a strong and recognizable brand presence with a versatile blue tone that conveys trust and technology.

Analytics system

Dashboards need more than one pretty color.

Numbers, pie charts, bars, stacked bars, and lines reveal whether the palette can support real product interfaces.

Revenue$84.2k+18.4%
Retention72%Stable
Signals8Monochromatic
Audience split
Monthly growth
Trend line

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 #0047AB
HeadlineUsed for main titles and key messages.Black #000000
LinkUsed for links and interactive text.Cobalt Blue #0047AB

Buttons

Primary Button
Contrast21.00:1AA
BackgroundBlack #000000
TextIvory #FFFFFF
Secondary Button
Contrast8.44:1AA
BackgroundCobalt Blue #0047AB
TextIvory #FFFFFF
Outlined Button
Contrast8.44:1AA
BorderCobalt Blue #0047AB
TextCobalt Blue #0047AB

Interface

TextDefault readable body text.Charcoal #222222
Bg LightLight page or section background.Ivory #FFFFFF
Bg DarkDark page or section background.Light Gray #D3D3D3
IconSmall interface icons and marks.Steel Gray #708090
BorderCards, inputs, and component borders.Steel Gray #708090
DividerSubtle separators between content.Steel Gray #708090
OutlineFocus rings and emphasis outlines.Steel Gray #708090

Print Color Values

CMYK values are calculated from HEX by default. Adjust them only when preparing print materials.

Screen colors stay unchanged.Manual CMYK edits are used in exports and handoff.
Calculated CMYK
Cobalt BlueMain color - #0047AB
Calculated CMYK
BlackMain color - #000000
Calculated CMYK
Jet BlackMain color - #1A1A1A
Calculated CMYK
Steel GraySupport color - #708090
Calculated CMYK
Soft CyanSupport color - #A7C7E7
Calculated CMYK
IvoryNeutral color - #FFFFFF
Calculated CMYK
Light GrayNeutral color - #D3D3D3
Calculated CMYK
CharcoalNeutral color - #222222

Palette Colors

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

Main (Brand) Colors

The main colors revolve around the striking contrast of deep black and vivid cobalt blue, establishing a strong and recognizable brand presence with a versatile blue tone that conveys trust and technology.

PrimaryCobalt Blue

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

Cobalt Blue adds vibrancy and technological sophistication, attracting attention while maintaining professionalism.

HEX#0047AB
RGB0, 71, 171
HSL215, 100, 34
CMYK100, 58, 0, 33
SecondaryBlack

RolesBtn Primary Bg, Headline

Black grounds the palette with strength and elegance that promotes clarity and impact in key brand elements.

HEX#000000
RGB0, 0, 0
HSL0, 0, 0
CMYK0, 0, 0, 100
TertiaryJet Black

Jet Black provides a softer black tone that differentiates secondary text elements without losing contrast.

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

Support Colors

Supporting colors soften and extend the core palette by introducing subtle gray and cyan tones that complement the bold main colors without competing for attention.

Steel Gray

RolesIcon, Border, Divider, Outline

Steel Gray harmonizes with Cobalt Blue and Black, offering a balanced neutral accent that supports interface elements.

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

Soft Cyan provides a gentle contrast and adds subtle brightness, enhancing headlines and visual interest while remaining supportive.

HEX#A7C7E7
RGB167, 199, 231
HSL210, 57, 78
CMYK28, 14, 0, 9

Neutral Colors

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

Ivory

RolesBg Light, Btn Primary Text, Btn Secondary Text

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

RolesBg Dark

HEX#D3D3D3
RGB211, 211, 211
HSL0, 0, 83
CMYK0, 0, 0, 17
Charcoal

RolesText

HEX#222222
RGB34, 34, 34
HSL0, 0, 13
CMYK0, 0, 0, 87

Export and Handoff

Copy palette values for design systems, websites, and client handoff. You can also copy this palette for Logo Export on myLogo.review, so your colors are ready there in one click.

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: #0047AB;
  --color-black: #000000;
  --color-jet-black: #1A1A1A;
  --color-steel-gray: #708090;
  --color-soft-cyan: #A7C7E7;
  --color-ivory: #FFFFFF;
  --color-light-gray: #D3D3D3;
  --color-charcoal: #222222;
}

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: #0047AB;
  --role-link: #0047AB;
  --role-btn-secondary-bg: #0047AB;
  --role-btn-outlined-border: #0047AB;
  --role-btn-outlined-text: #0047AB;
  --role-btn-primary-bg: #000000;
  --role-headline: #000000;
  --role-icon: #708090;
  --role-border: #708090;
  --role-divider: #708090;
  --role-outline: #708090;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #D3D3D3;
  --role-text: #222222;
}

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": "#0047AB",
    "black": "#000000",
    "jet-black": "#1A1A1A",
    "steel-gray": "#708090",
    "soft-cyan": "#A7C7E7",
    "ivory": "#FFFFFF",
    "light-gray": "#D3D3D3",
    "charcoal": "#222222"
}
Press Space to load new palette