Color meaning

Emerald

Introducing Emerald (#0F9D58), a vivid, jewel-like shade. Its brightness gives storefronts a fresh, energetic feel, while its clear green cast makes it a natural choice for success states, in-stock labels, and add-to-cart buttons that should read as positive and go-ahead.

#0F9D58HSL 151, 83%, 34%

Emerald code conversions

HEX
#0F9D58
RGB
rgb(15, 157, 88)
HSL
hsl(151, 83%, 34%)
HSB
hsb(151, 90%, 62%)
CMYK
cmyk(90%, 0%, 44%, 38%)

Emerald color harmonies

Analogous

Neighbors on the color wheel: a calm, low-contrast set that reads as one family.

Complementary

The hue directly opposite: maximum contrast for an accent that pops.

Split Complementary

The complement's two neighbors: strong contrast with less tension than a straight complement.

Triadic

Three hues evenly spaced: balanced and vivid without a single dominant color.

Tetradic

Two complementary pairs: a rich four-color scheme that needs one color to lead.

Square

Four hues evenly spaced: bold and balanced, best with one anchor and three accents.

Emerald contrast

Your catchy large text

Small body copy sitting on Emerald.

3.51:1White textAA failAAA fail

Your catchy large text

Small body copy sitting on Emerald.

5.38:1Black textAA passAAA fail

Emerald color variations

Shades

Mixed toward black: deeper steps for backgrounds and hover states.

Tints

Mixed toward white: softer steps for surfaces and disabled states.

Tones

Mixed toward gray: muted, sophisticated steps that lower the intensity.

Hues

Rotated around the wheel: related hues at the same lightness and saturation.

Related green colors

Forest GreenSage GreenOlive

Emerald: frequently asked

What color is Emerald?

Emerald (#0F9D58) is a bright, saturated green with a slightly cool tilt. In e-commerce interfaces it reads as lively and affirmative, sitting between a deep forest green and a light mint.

What is the meaning of Emerald?

Emerald signals success, freshness, and forward momentum. Brands reach for it when they want customers to feel reassured and encouraged, especially around confirmations and available inventory.

How do I use Emerald (#0F9D58) in e-commerce design?

Use Emerald for primary CTAs, success messages, and in-stock or discount badges, and pair it with white or a dark neutral to keep labels sharp. Reserve it for the moments of positive feedback you want shoppers to notice.

Using Emerald color codes

Copy Emerald in HEX, RGB, HSL, HSB, and CMYK below to match it across your web store, app, and packaging.

Colors are just the start

See these colors at work in real, looping storefront captures. The whole library is free to browse.

Browse the librarySee pricing

Free to browse · Pro unlocks the MCP