#00A97E Vivid Teal

Q: What color is #00A97E?

Vivid Teal is #00A97E, or #00A97E in uppercase notation. In RGB it is rgb(0,169,126), in HSL about hsl(165 100% 33%), and in OKLCH oklch(0.652 0.134 166.8).

Q: What does Vivid Teal symbolize?

It usually stands for energy, warmth and confidence, with a ceremonial edge. Local culture can shift that reading, so check the context.

Q: Where is Vivid Teal used?

You will see it in Campaign landing pages, Editorial cover systems, Product packaging labels, Dashboard status accents, Retail wayfinding signs. It also appears across finance, technology, healthcare, aviation.

Q: Which colors go well with Vivid Teal?

Muted neutrals, deeper steps of the same hue and one metallic accent work well. editorial layouts that need one warm focal point; packaging that should feel appetizing without shouting; interfaces where an accent has to stay legible

Q: How does Vivid Teal affect mood?

It raises perceived energy and draws the eye quickly. Large fields feel intense, so accent use is safer.

Q: Which industries use Vivid Teal?

It is common in finance, technology, healthcare, aviation, particularly where brands want to feel calm, trustworthy, technical, steady, cool.

Q: What is the history of Vivid Teal?

The pigment story is concrete: Blue recedes and steadies, which makes it the default for interfaces and institutions. Its range runs from near-black navy to pale sky without ever losing composure.

Q: How should I use Vivid Teal in design?

Give it one focal element, keep body copy neutral and confirm contrast at 3.01 against white and 6.27 against black.

Q: Is Vivid Teal accessible?

Contrast is 3.01 against white (FAIL) and 6.27 against black (AA). Use it for large text when the level reaches AA.

Color conversion

CMYK profile: Coated FOGRA39 · Formats follow CSS Color 4 naming and WCAG 2.2 contrast rules.

About this color

Vivid TealBluedigital color

Calm that earns trust

Vivid Teal is #00A97E, a Blue tone with a clear cultural lineage. Read on its own it belongs to the Blue family; read through its digital color roots, it carries a second layer of meaning.

Design tip

Test Vivid Teal (#00A97E) on a neutral surface first; a Blue accent then looks intentional rather than decorative.

Best use

Give Vivid Teal the single element that must be noticed first, and let the rest of the Blue palette support it.

calmtrustworthytechnicalsteadycool

Psychology

How it is perceived

calmtrustworthytechnicalsteadycool

Psychological effect

Vivid Teal raises the perceived energy of a Blue composition and pulls the eye toward action.

Emotional impact

It feels immediate and warm, so it can lift a restrained layout without making it loud.

Symbolism

What it stands for

trustcompetence and clarity

Cultural significance

In digital color settings the shade carries local references, so verify its symbolism before a campaign.

Positive associations

Positive associations lean toward trust, competence and clarity, which is why it appears in invitations and seasonal work.

Use with care

Too much surface area can read as coldness or distance in excess, so keep it to accents and small fields.

Where it appears

Common design applications

Campaign landing pages: Give Vivid Teal the single element that must be noticed first, and let the rest of the Blue palette support it.
Editorial cover systems: Give Vivid Teal the single element that must be noticed first, and let the rest of the Blue palette support it.
Product packaging labels: Give Vivid Teal the single element that must be noticed first, and let the rest of the Blue palette support it.
Dashboard status accents: Give Vivid Teal the single element that must be noticed first, and let the rest of the Blue palette support it.
Retail wayfinding signs: Give Vivid Teal the single element that must be noticed first, and let the rest of the Blue palette support it.

Design guidance

How to make it work

Keep saturated fills below about twenty percent of the layout.
Use it for the primary call to action and nothing else.
Check the pairing at small sizes on a neutral background.

Avoid

Do not place it beside clashing neon greens or electric blues.
Never use it for long body text on white.
Avoid gradients that shift its hue into another family.

Brand fit

finance, technology, healthcare, aviation

Brands built on The Ruler, The Sage use it to signal character before they say a word.

Trend signal

Calm that earns trust

Blue recedes and steadies, which makes it the default for interfaces and institutions. Its range runs from near-black navy to pale sky without ever losing composure.

Pairing

Colors that complete it

#C96BA0editorial layouts that need one warm focal point #00724Binterfaces where an accent has to stay legible #8B81DDpackaging that should feel appetizing without shouting

History

Pigments and provenance

Before synthetic dyes, Vivid Teal was matched with mineral and plant pigments, and the Blue family depended on sources such as ochre, madder and indigo. Screens now reproduce it more consistently than any single pigment ever could.

Variations

Shades darken and tints lighten while the hue angle stays fixed.

Pro tip: Shades darken and tints lighten while the hue angle stays fixed.

Shades

Darker steps built from the same hue.

0% #00A97E 10% #009871 20% #008765 30% #007658 40% #00654C 50% #00553F 60% #004432 70% #003326 80% #002219 90% #00110D 100% #000000

Tints

Lighter steps for surfaces and backgrounds.

0% #00A97E 10% #1AB28B 20% #33BA98 30% #4DC3A5 40% #66CBB2 50% #80D4BF 60% #99DDCB 70% #B3E5D8 80% #CCEEE5 90% #E6F6F2 100% #FFFFFF

Use cases

Shades → hover, shadows, depth
Tints → highlights, surfaces
Balance → consistent color systems

Design tip

Keep one dominant tone, one supporter and one accent.

Color combinations

Rotate the hue wheel while holding lightness steady.

How to use it

Three moves keep the color readable and deliberate.

Why it works

The perceptual reasoning behind the palette.

Complementary

Opposite the hue wheel; it sharpens the focal color by contrast.

#00A97E #C96BA0

Best use: Calls to action and single-feature highlights

Split-complementary

Two neighbors of the opposite hue; softer than a direct complement.

#00A97E #B074C6 #D56A72

Best use: Balanced marketing layouts with two accents

Triadic

Three hues spaced evenly; lively but needs one dominant voice.

#00A97E #8B81DD #D17342

Best use: Event identities and playful editorial spreads

Analogous

Neighbors on the wheel; quiet, cohesive and easy to scan.

#67A24C #00A97E #00A8AB

Best use: Backgrounds, charts and calm product pages

Monochromatic

One hue across lightness steps; disciplined and premium.

#007A5B #00A97E #47C1A2

Best use: Design systems, packaging and typographic hierarchy

Tetradic

Two complementary pairs; rich, but requires strict proportion.

#00A97E #009FCE #C96BA0 #D17342

Best use: Complex dashboards and multi-service brands

Export palette

CSS

:root {
  --color-1: #00654C;
  --color-2: #008765;
  --color-3: #00A97E;
  --color-4: #33BA98;
  --color-5: #66CBB2;
}

Tailwind

colors: {
  color1: '#00654C',
  color2: '#008765',
  color3: '#00A97E',
  color4: '#33BA98',
  color5: '#66CBB2',
}

JSON

["#00654C","#008765","#00A97E","#33BA98","#66CBB2"]

Principles

Balance

Keep one dominant tone, one supporter and one accent.

Contrast

Test body text against both white and black before shipping.

Harmony

Rotate the hue wheel while holding lightness steady.

Color contrast checker

Test body text against both white and black before shipping.

Text color

Background

3.01 :1

FAIL

Quote

Give Vivid Teal the single element that must be noticed first, and let the rest of the Blue palette support it.

WCAG contrast

Preview

Aa / Bb

#00A97E · Vivid Teal

WCAG contrast standards

WCAG 2.2 sets minimum contrast for text and interface parts. #00A97E measures 3.01:1 against white (FAIL) and 6.27:1 against black (AA). Use the table below to choose the right threshold for the text size.

Level	Normal text	Large text (18pt+ / 14pt bold)	Icons & UI parts
AAA	7 : 1	4.5 : 1	—
AA	4.5 : 1	3 : 1	3 : 1
Fails	< 4.5 : 1	< 3 : 1	< 3 : 1

Large text means 18pt regular or 14pt bold. UI parts need 3:1 against adjacent colors. AA is the common compliance baseline; AAA is enhanced.

Technical formats

Notation across color spaces

HEX

#00A97E

CSS Color 4

RGB

0,169,126

sRGB / D65

HSL

165,100,33

HSL

OKLCH

oklch(0.652 0.134 166.8)

perceptual

LAB

62,-47,12

CIE Lab

LCH

62,49,166

CIE LCH

XYZ

18,30,25

CIE XYZ

LUV

62,-52,24

CIE LUV

HWB

165,0,34

CSS HWB

CMYK

100,0,25,34

Practical formats

Ready-to-use values

CSS

color: #00A97E;

custom properties

Tailwind

bg-[#00A97E] text-[#FFF]

arbitrary value

Android

#FF00A97E

ARGB

Flutter

Color(0xFF00A97E)

dart:ui

Photoshop

R 0 G 169 B 126 · C 100 M 0 Y 25 K 34

RGB / CMYK

CMYK 100,0,25,34

FOGRA39

Color analysis

Measured color properties

Lightness

0.299

relative luminance · cool

Contrast

3.01 : 1

vs white · FAIL · cool

Contrast

6.27 : 1

vs black · AA · cool

Hue

165°

saturation 100% · cool

LCH

62,49,166

lightness 33% · cool

Delta E

20.5

翠涛 #4E8D6B · cool

Similar colors

Nearest colors from the full Irodori library, ranked by ΔE.

Vivid Teal #10B981ΔE 9.1 Vivid Green #3CB371ΔE 12.9 हरा #2E9E5BΔE 14.7 Vivid Green #198754ΔE 14.9 Medium Green #2E8B57ΔE 15.0 Light Teal #14B8A6ΔE 15.8

Blindness simulator

How it reads with color vision deficiency

How it reads with color vision deficiency · ΔE 20.5