Skip to content

Color Palette

Color is how COVALIDA feels before a single word is read: calm, premium, and unmistakably teal. The palette is deliberately narrow — five core colors carry the entire brand. Restraint is the point. A wide, whitespace-rich canvas with one confident teal reads as sovereign and modern, not loud.

HEX is the source of truth

Every value below is authoritative as HEX. COVALIDA is a 100% digital brand, so there is no CMYK and no Pantone — screen color only. RGB and HSL are provided for convenience on the Design Tokens page. Never convert these colors for print; there is no print.

The core five

Deep Teal
#008080
Primary — brand color, key surfaces, primary emphasis
Light Teal
#20B2AA
Accent — lines, highlights, data-viz (not small text on white)
Deep Petrol
#155D5B
Deep — button backgrounds, icon circles, gradient end
Deep Slate Gray
#2F4F4F
Text — body copy and the wordmark
Light Mint
#CDE9E6
Surface — section backgrounds, calm fills

Each color's role

Deep Teal — #008080

#008080 · rgb(0, 128, 128) · hsl(180, 100%, 25%)

The primary brand color and the anchor of everything. Deep Teal is the color a viewer should remember. Use it for the strongest single point of emphasis on a screen — a primary action, an active state, a key figure — and for the brand's core surfaces. It is dark enough to carry white text at large sizes and passes contrast for body text on white and mint. When in doubt, this is "the COVALIDA color."

Light Teal — #20B2AA

#20B2AA · rgb(32, 178, 170) · hsl(177, 70%, 41%)

The accent. Light Teal adds life and lift — hairline rules, chart series, hover highlights, decorative underlines, and the lighter end of gradients. It is bright and low-contrast against white, so treat it as a graphic accent, not a text color on white (small Light Teal type on white fails contrast). Reserve it for the 10% accent role — a little goes a long way.

Deep Petrol — #155D5B

#155D5B · rgb(21, 93, 91) · hsl(178, 63%, 22%)

The deep, grounding teal. Deep Petrol is where teal goes to feel solid: button backgrounds, filled icon circles, footers, and the dark end of the signature gradient. It carries white text comfortably at any size and gives the palette weight without going fully black. Pair it with Light Mint or white for a composed, premium contrast.

Deep Slate Gray — #2F4F4F

#2F4F4F · rgb(47, 79, 79) · hsl(180, 25%, 25%)

The text color and the wordmark color. Deep Slate Gray is a teal-tinted near-charcoal — never a pure, cold #000. Using a warm-teal gray for body copy keeps long text calm and on-brand while staying highly legible. This is the default for headings and paragraphs on light backgrounds, and the color of the COVALIDA wordmark.

Light Mint — #CDE9E6

#CDE9E6 · rgb(205, 233, 230) · hsl(174, 39%, 86%)

The signature surface. Light Mint is the soft, airy tint that fills section backgrounds, cards, and callouts — the "breathing room" color that makes the brand feel spacious and premium. It is a background, never a text color. Slate text and Deep Teal both read cleanly on top of it.

The signature gradient

The Core-Shield symbol is filled with a single diagonal teal gradient. It runs from a bright mint-teal down to Deep Petrol, giving the mark depth and the sense of a living force-field around the company core. Use the gradient only where brand guidance allows — the symbol itself, hero accents, and large graphic shapes. Never place body text on it, and never recolor it.

#2DB3A4
#25A699
#1A847F
#155D5B
css
background: linear-gradient(135deg, #2db3a4 0%, #25a699 38%, #1a847f 68%, #155d5b 100%);

The four stops are #2DB3A4 → #25A699 → #1A847F → #155D5B, blended at a 135° diagonal. See Methodology for when to reach for the gradient versus a flat fill.

Quick reference

RoleNameHEXPrimary use
PrimaryDeep Teal#008080Brand color, primary emphasis, key surfaces
AccentLight Teal#20B2AALines, highlights, data-viz accents
DeepDeep Petrol#155D5BButtons, icon circles, gradient end
TextDeep Slate Gray#2F4F4FBody copy, headings, wordmark
SurfaceLight Mint#CDE9E6Backgrounds, cards, calm fills

Where to go next

  • Scales & Tints — the full teal scale from 50 to 900 and which step to use where.
  • Semantic Colors — success, warning, error, and info for UI states.
  • Methodology — the 60-30-10 ratio, pairing rules, and flat-vs-gradient decisions.
  • Design Tokens — copy-paste HEX, RGB, HSL, and CSS custom properties.

Accessibility first

Teal on white and slate on mint are comfortable, legible pairings — but always verify combinations before shipping. The Accessibility section documents the tested contrast ratios for every core pairing.

Brand assets © COVALIDA Compliance. Site code licensed under MIT.