Dark Navy#0F2241
Bright Crimson#D60B52
Warm Coral#FC6A50
Soft Teal#409294
Slate Gray#556B6D
Palette direction

Teal Coral Cybersecurity Color Palette

This palette combines a strong dark navy with vibrant and warm coral shades to convey energetic professionalism suitable for tech and cybersecurity brands, balanced by muted teal and slate support colors that soften and structure the visual hierarchy, alongside crisp and deep neutrals for clear legibility and modern contrast.

Split ComplementaryTechtealcoralcybersecuritytech
palette-preview.example
Tech color direction

Teal Coral Cybersecurity Color Palette

This palette combines a strong dark navy with vibrant and warm coral shades to convey energetic professionalism suitable for tech and cybersecurity brands, balanced by muted teal and slate support colors that soften and structure the visual hierarchy, alongside crisp and deep neutrals for clear legibility and modern contrast.

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 White #FFFFFF
on Dark Navy #0F2241

15.8:1 Excellent

Logo Charcoal #222222
on Warm Coral #FC6A50

5.5:1 Strong

Logo White #FFFFFF
on Bright Crimson #D60B52

5.2:1 Strong

Logo Charcoal #222222
on White #FFFFFF

15.9: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 Teal Coral Cybersecurity Color Palette

The main colors combine a deep navy blue with complementary warm corals to create a vibrant yet grounded palette that stands out in tech and cybersecurity contexts.

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
Signals8Split Complementary
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.Dark Navy #0F2241
HeadlineUsed for main titles and key messages.Warm Coral #FC6A50
LinkUsed for links and interactive text.Bright Crimson #D60B52

Buttons

Primary Button
Contrast15.84:1AA
BackgroundDark Navy #0F2241
TextWhite #FFFFFF
Secondary Button
Contrast5.21:1AA
BackgroundBright Crimson #D60B52
TextWhite #FFFFFF
Outlined Button
Contrast5.21:1AA
BorderDark Navy #0F2241
TextBright Crimson #D60B52

Interface

TextDefault readable body text.Charcoal #222222
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Snow #F7F9F9
IconSmall interface icons and marks.Soft Teal #409294
BorderCards, inputs, and component borders.Soft Teal #409294
DividerSubtle separators between content.Soft Teal #409294
OutlineFocus rings and emphasis outlines.Slate Gray #556B6D

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
Dark NavyMain color - #0F2241
Calculated CMYK
Bright CrimsonMain color - #D60B52
Calculated CMYK
Warm CoralMain color - #FC6A50
Calculated CMYK
Soft TealSupport color - #409294
Calculated CMYK
Slate GraySupport color - #556B6D
Calculated CMYK
WhiteNeutral color - #FFFFFF
Calculated CMYK
SnowNeutral color - #F7F9F9
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 combine a deep navy blue with complementary warm corals to create a vibrant yet grounded palette that stands out in tech and cybersecurity contexts.

PrimaryDark Navy

RolesLogo, Btn Primary Bg, Btn Outlined Border

Dark Navy conveys trust, security, and professionalism, providing a solid foundation for brand identity.

HEX#0F2241
RGB15, 34, 65
HSL217, 63, 16
CMYK77, 48, 0, 75
SecondaryBright Crimson

RolesLink, Btn Secondary Bg, Btn Outlined Text

Bright Crimson energizes and commands attention for interactive elements with its vivid intensity.

HEX#D60B52
RGB214, 11, 82
HSL339, 90, 44
CMYK0, 95, 62, 16
TertiaryWarm Coral

RolesHeadline

Warm Coral adds a friendly, inviting warmth to headlines, highlighting key information effectively.

HEX#FC6A50
RGB252, 106, 80
HSL9, 97, 65
CMYK0, 58, 68, 1

Support Colors

Support colors introduce a muted teal and a balanced slate hue to soften the main colors and establish refined detail accents without competing for focus.

Soft Teal

RolesIcon, Border, Divider

Soft Teal complements Dark Navy by adding a calming, sophisticated tone to secondary visual elements.

HEX#409294
RGB64, 146, 148
HSL181, 40, 42
CMYK57, 1, 0, 42
Slate Gray

RolesOutline

Slate Gray delivers subtle structure and grounding to the palette, balancing vibrancy with neutrality.

HEX#556B6D
RGB85, 107, 109
HSL185, 12, 38
CMYK22, 2, 0, 57

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
Snow

RolesBg Dark

HEX#F7F9F9
RGB247, 249, 249
HSL180, 14, 97
CMYK1, 0, 0, 2
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-dark-navy: #0F2241;
  --color-bright-crimson: #D60B52;
  --color-warm-coral: #FC6A50;
  --color-soft-teal: #409294;
  --color-slate-gray: #556B6D;
  --color-white: #FFFFFF;
  --color-snow: #F7F9F9;
  --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: #0F2241;
  --role-btn-primary-bg: #0F2241;
  --role-btn-outlined-border: #0F2241;
  --role-link: #D60B52;
  --role-btn-secondary-bg: #D60B52;
  --role-btn-outlined-text: #D60B52;
  --role-headline: #FC6A50;
  --role-icon: #409294;
  --role-border: #409294;
  --role-divider: #409294;
  --role-outline: #556B6D;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F7F9F9;
  --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.
{
    "dark-navy": "#0F2241",
    "bright-crimson": "#D60B52",
    "warm-coral": "#FC6A50",
    "soft-teal": "#409294",
    "slate-gray": "#556B6D",
    "white": "#FFFFFF",
    "snow": "#F7F9F9",
    "charcoal": "#222222"
}
Press Space to load new palette