Skip to content
ColorDB.org
Menu
Color Detail

Green

Green bridges nature, safety, and growth, working well for success states, finance, and eco-focused messaging.

Cool Colors

#22C55E

coolnaturesuccessgrowth

Color values

Hex
#22C55E
RGB
rgb(34, 197, 94)
HSL
hsl(142, 71%, 45%)

Overview

Green is a cool-leaning color with the hex value #22C55E. It often works as a success signal, nature cue, finance accent, or calm support color depending on how warm or cool the specific green feels.

Because green spans yellow-green through teal-green, its personality changes quickly with small hue shifts. That makes context especially important.

Symbolism and context

Green may suggest growth, health, safety, success, nature, or money depending on the surrounding design and use case.

A bright UI green can feel energetic and active, while a darker green can feel grounded and stable.

Common design uses

  • • success and confirmation states
  • • finance and growth-related visuals
  • • healthcare or eco-minded accents
  • • charts and positive-change indicators
  • • calm accent buttons or badges

Pairing guidance

Green pairs well with off-white, charcoal, slate, and soft neutrals.

Use lighter tints for background confirmation states and darker shades for green text or badges.

Be careful when pairing green with red if the only distinction between states is hue.

Accessibility notes

Green can fail if it is too bright on white or too dark on charcoal without enough difference in luminance.

Do not use green as the only signal for success or correctness. Add text or icon support when the meaning matters.

Check this color in the contrast checker

Related colors

Blue#2563EBCyan#06B6D4Purple#7C3AED

Related tools

Convert this colorTranslate the same color into HEX, RGB, HSL, or HSV.Check contrastTest text, buttons, and surfaces before using the color in UI.Generate shades and tintsBuild lighter and darker variants for surfaces, hover states, and text.Build a paletteSee how this color behaves once it becomes part of a broader system.

Explore this family

Family pages help compare colors that share a broader visual role, making it easier to move from one isolated swatch to a more usable palette direction.

Browse Cool Colors

Keep learning

FAQ

Questions people usually ask next

What is the hex value of Green?

The hex value is #22C55E.

What family does Green belong to?

Green belongs to the cool-colors family in ColorDB.

Is Green good for text?

It depends on the background. Test the exact contrast pair before using it for text or small UI labels.

What colors pair well with Green?

Good pairings depend on the intended mood. Neutrals are usually a safe starting point, and related colors from the same family can create a smoother palette.

Can I use Green in CSS?

Yes. You can use its HEX, RGB, or HSL value in CSS.