Named colour

Tailwind Emerald 500 #10b981

The fresh success-green of modern UI.

Token name suggestion: Shadow Glacier

RGB

16, 185, 129

HSL

160°, 84%, 39%

CMYK

91, 0, 30, 28

Luminance

0.3639

#10b981 is a dark electric cyan, 160° on the wheel and 79/100 on the cool side. Put black text on it (8.28:1). As text it scores 2.54:1 on white — use #0C855D instead. Nearest name is Medium Sea Green, nearest Tailwind family is emerald.

hsl(160 84% 39%)rgb(16 185 129)Base step 700AAA inkCool

At a glance

Every number on this page in one read: what #10b981 is made of, how bright it looks, and which way it leans.

Hex

#10b981

Hue

160°

cyan

Saturation

84%

electric

Lightness

39%

dark

Brightness

73%

HSV value

Perceived

58%

weighted brightness

Luminance

0.3639

WCAG relative

Temperature

Cool

79/100 cool

Color family

Cyan

Tone

Electric

Best ink

Black

8.28:1

Closest name

Medium Sea Green

ΔE2000 3.9

Chroma

55.1

LCH, 0–130ish

OKLCH L

0.696

perceptual lightness

Tailwind

emerald

500 · ΔE 0

Web-safe

#00CC99

nearest of 216

Where it sits

Hue160° of 360°

Saturation84%

Lightness39%

Saturation × lightness field

Left edge is grey, right edge is full chroma; top is white, bottom is black. The dot is #10b981.

Temperature

Warm ← → Cool79% cool

Reads cool. Warm and cool siblings keep the same lightness, so you can swap one in without redoing your contrast maths.

Warmer#10B943 This color#10b981 Cooler#0EB5BB

Luminance by channel

Red0%

Green95%

Blue4%

Green carries most of what the eye calls brightness — that is why WCAG weights it 0.7152.

About Tailwind Emerald 500

Tailwind Emerald 500, #10b981, is the bright blue-green that became the default \u201csuccess\u201d and accent green of the utility-CSS era \u2014 the color of confirmations, positive stats and go-ahead buttons across the modern web.

History

Tailwind\u2019s emerald scale gave designers a fresh, slightly teal green that reads cleaner and more modern than a pure grass green; its ubiquity made emerald-500 the reflexive choice for success states and positive UI accents.

Psychology

A bright blue-green reads fresh, positive and confident \u2014 growth and success with a clean, modern edge. It feels affirming and energetic, the natural pick for \u201cyes,\u201d \u201cdone\u201d and \u201cup.\u201d

In design

A bright blue-green (surface/UI at size) as the default success color. The semantic-color lesson: UI conventions bind MEANING to hue \u2014 emerald = success, red = error, amber = warning \u2014 a shared traffic-light grammar across interfaces.

In culture

The success-state green, positive stats and confirmations, framework defaults: the fresh green of modern UI.

Brands that own tailwind emerald 500

Emerald#50c878 Spotify green#1db954 Jade#00a86b Teal#008080 Sea green#2e8b57

Shades of tailwind emerald 500

Emerald Spotify green Jade Teal Sea green Mint Shamrock Viridian

Every format

HEX	#10b981
HEX (8-digit)	#10b981ff
RGB	rgb(16, 185, 129)
RGBA	rgba(16, 185, 129, 1)
HSL	hsl(160, 84%, 39%)
HSV / HSB	hsv(160, 91%, 73%)
HWB	hwb(160 6% 27%)
CMYK	cmyk(91%, 0%, 30%, 28%)
LAB	lab(66.8 -52.2 17.7)
LCH	lch(66.8 55.1 161.3)
OKLCH	oklch(0.696 0.149 162.5)
XYZ (D65)	xyz(21.52, 36.39, 26.65)
Decimal	1096065
Display P3	color(display-p3 0.063 0.725 0.506)
Web-safe	#00CC99

Copy-ready code

every platformclick to select

/* CSS */
color: #10b981;
background-color: #10b981;
/* CSS custom property */
--brand: #10b981;
/* Tailwind (arbitrary) */
class="text-[#10b981] bg-[#10b981]"
/* SCSS */
$brand: #10b981;
/* SwiftUI */
Color(red: 0.063, green: 0.725, blue: 0.506)
/* UIKit */
UIColor(red: 0.063, green: 0.725, blue: 0.506, alpha: 1)
/* Android XML */
<color name="brand">#10B981</color>
/* Android Compose */
Color(0xFF10B981)
/* Flutter */
Color(0xFF10B981)
/* Python / OpenCV (BGR) */
(129, 185, 16)
/* Python / PIL (RGB) */
(16, 185, 129)
/* Java AWT */
new Color(16, 185, 129)
/* .NET */
Color.FromArgb(255, 16, 185, 129)
/* OpenGL / Unity (0–1) */
(0.0627f, 0.7255f, 0.5059f, 1f)
/* LaTeX */
\definecolor{brand}{RGB}{16,185,129}

modern cssclick to select

/* mix without leaving CSS */
background: color-mix(in oklab, #10b981 85%, white);
border-color: color-mix(in oklab, #10b981 40%, transparent);
/* theme-aware in one line */
color: light-dark(#0A7552, #D3EEE5);
/* relative colour syntax */
--hover: hsl(from #10b981 h s calc(l - 7));

Design tokens

The same ramp in the four formats a team actually needs. Paste one and the whole palette lands with it.

css custom propertiesclick to select

:root {
  --brand-50: #F2FCF9;
  --brand-100: #E6FAF3;
  --brand-200: #C5F6E6;
  --brand-300: #98F6D7;
  --brand-400: #64F2C3;
  --brand-500: #30EDAF;
  --brand-600: #13E19D;
  --brand-700: #10b981;
  --brand-800: #0D9669;
  --brand-900: #0E6D4D;
  --brand-950: #094430;
  --brand: #10b981;
  --brand-ink: #000000;
  --brand-surface: #F4FAF8;
  --brand-border: #C0EDDE;
  --brand-hover: #0D986A;
  --brand-pressed: #0A7753;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand-surface: #14241F;
    --brand-ink: #D3EEE5;
  }
}

tailwind.config.jsclick to select

theme: {
  extend: {
    colors: {
      brand: {
        50: '#F2FCF9',
        100: '#E6FAF3',
        200: '#C5F6E6',
        300: '#98F6D7',
        400: '#64F2C3',
        500: '#30EDAF',
        600: '#13E19D',
        700: '#10b981',
        800: '#0D9669',
        900: '#0E6D4D',
        950: '#094430',
        DEFAULT: '#10b981',
      },
    },
  },
}

scss mapclick to select

$brand: (
  '50': #F2FCF9,
  '100': #E6FAF3,
  '200': #C5F6E6,
  '300': #98F6D7,
  '400': #64F2C3,
  '500': #30EDAF,
  '600': #13E19D,
  '700': #10b981,
  '800': #0D9669,
  '900': #0E6D4D,
  '950': #094430,
);
$brand-base: #10b981;
$brand-ink: #000000;

@function brand($step) { @return map-get($brand, $step); }

w3c design tokens (json)click to select

{
  "color": {
    "brand": {
      "50": { "$value": "#F2FCF9", "$type": "color" },
      "100": { "$value": "#E6FAF3", "$type": "color" },
      "200": { "$value": "#C5F6E6", "$type": "color" },
      "300": { "$value": "#98F6D7", "$type": "color" },
      "400": { "$value": "#64F2C3", "$type": "color" },
      "500": { "$value": "#30EDAF", "$type": "color" },
      "600": { "$value": "#13E19D", "$type": "color" },
      "700": { "$value": "#10b981", "$type": "color" },
      "800": { "$value": "#0D9669", "$type": "color" },
      "900": { "$value": "#0E6D4D", "$type": "color" },
      "950": { "$value": "#094430", "$type": "color" }
    },
    "brandInk": { "$value": "#000000", "$type": "color" }
  }
}

Best text color

Only one of black and white can be right. This is the one, with the number that proves it.

Readable at a glance#000000 on #10b981 · 8.28:1

Use #000000 — AAA at every size.

12px

16px

24px

White text · 2.54:1

AA fail · AA large fail · AAA fail

Black text · 8.28:1 · recommended

AA pass · AA large pass · AAA pass

Reading the other direction: #10b981 as text scores 2.54:1 on white and 8.28:1 on black.

Best tinted ink on it, if plain black or white feels flat: #0A7552 at 2.25:1.

Make it accessible

A contrast checker tells you that you failed. This tells you what to ship instead — same hue, same saturation, lightness moved only as far as WCAG demands.

The quick fox

#0C855D · 4.64:1

AA on white−11% L

#0C855D

The quick fox

#096446 · 7.18:1

AAA on white−18% L

#096446

The quick fox

#10b981 · 8.28:1

AA on blackalready passes

#10b981

The quick fox

#10b981 · 8.28:1

AAA on blackalready passes

#10b981

Large text — 24px regular or 18.66px bold and above — only needs 3:1, so #0EA674 is enough for headings on white. Non-text elements such as icons, chart strokes and focus rings also sit at 3:1 under WCAG 2.2 (1.4.11).

Accessibility — WCAG contrast

#10b981 on white: 2.54:1

AA ✗ fail · AA-large ✗ · AAA ✗

#10b981 on black: 8.28:1

AA ✓ pass · AA-large ✓ · AAA ✓

Against the neutral ladder

Contrast is symmetric, so each row covers both directions: #10b981 as text on that neutral, and that neutral as text on #10b981.

Neutral	Ratio	Verdict	Both directions
White#ffffff	2.54:1	AAAA lgAAA	AaAa
Slate 50#f8fafc	2.42:1	AAAA lgAAA	AaAa
Slate 100#f1f5f9	2.32:1	AAAA lgAAA	AaAa
Slate 200#e2e8f0	2.06:1	AAAA lgAAA	AaAa
Slate 300#cbd5e1	1.71:1	AAAA lgAAA	AaAa
Slate 400#94a3b8	1.01:1	AAAA lgAAA	AaAa
Slate 500#64748b	1.88:1	AAAA lgAAA	AaAa
Slate 600#475569	2.99:1	AAAA lgAAA	AaAa
Slate 700#334155	4.08:1	AAAA lgAAA	AaAa
Slate 800#1e293b	5.77:1	AAAA lgAAA	AaAa
Slate 900#0f172a	7.04:1	AAAA lgAAA	AaAa
Black#000000	8.28:1	AAAA lgAAA	AaAa

Colour vision deficiency

true color

protanopia · #B6AA7E

deuteranopia · #A49D85

tritanopia · #00B9AA

Roughly one man in twelve has some form of colour vision deficiency. If any of the three panels above is hard to tell apart from a neighbouring colour in your palette, add a shape, an icon or a label so the meaning does not rest on hue alone.

Color scale — 50 to 950

A Tailwind-shaped ramp built around this exact hex. #10b981 is pinned to step 700; the rest hold its hue and let saturation ease off at the extremes so the pale end never turns neon.

50 100 200 300 400 500 600 700base 800 900 950

#F2FCF9

#E6FAF3

#C5F6E6

#98F6D7

#64F2C3

#30EDAF

#13E19D

#10b981

#0D9669

#0E6D4D

#094430

Base = 700Lightest = 50 · #F2FCF9Darkest = 950 · #094430Text step on white = 900

Perceptual ramp — OKLCH

The same eleven steps expressed in OKLCH, where equal lightness numbers actually look equally spaced. HSL ramps go muddy in the yellows and washed out in the blues; this one does not. Modern browsers render it natively — the hex ramp above is the fallback.

50100200300400500600700800900950

oklch tokensclick to select

:root {
  --brand-50: oklch(0.97 0.037 162.5);
  --brand-100: oklch(0.94 0.060 162.5);
  --brand-200: oklch(0.88 0.089 162.5);
  --brand-300: oklch(0.80 0.116 162.5);
  --brand-400: oklch(0.72 0.137 162.5);
  --brand-500: oklch(0.64 0.149 162.5);
  --brand-600: oklch(0.56 0.149 162.5);
  --brand-700: oklch(0.48 0.140 162.5);
  --brand-800: oklch(0.40 0.125 162.5);
  --brand-900: oklch(0.32 0.104 162.5);
  --brand-950: oklch(0.24 0.082 162.5);
}

Colors that work with #10b981

Not a palette — a role sheet. Each swatch answers one question you will hit while building the component.

Text on it#000000

Black wins here

Surface#F4FAF8

Tinted page background

Border#C0EDDE

Hairlines and dividers

Muted text#4B9B80

Captions on the surface

Accent#BD0C73

Second voice, not a rival

Dark variant#0A7552

Hover, pressed, headers

Light variant#E8FDF6

Selected rows, tints

Dark surface#14241F

Dark-mode background

Hover#0D986A

One step down in lightness

Pressed#0A7753

Two steps down

Disabled#87B2A4

Chroma pulled out

Focus ring#07D792

Offset from the fill so it reads

Light mode

Everything in its place

Surface, border, heading and body all derive from this one hue, so the screen stays coherent without a second palette.

Primary actionSecondaryBadge

Dark mode

Same hue, inverted

Lightness flips, hue holds. The accent stays the anchor in both themes.

Primary actionSecondaryAccent

In real components

The same eight roles, wired into the interface patterns you will actually build with them. Every state below is a computed value, not a mock-up.

Buttons and states

Save changesHoverPressedDisabled

OutlineSubtleLinkFocused

Form field

Work email

you@company.com

Focus ring uses the light variant so the field still reads as one shape.

Send me product updates

Notice

Your export is ready

The file stays available for seven days. Download it before it expires.

NewBetaDraft

Data

Storage used68%

Acme LtdActive

NorthwindTrial

GlobexActive

How to use #10b981

Derived from its contrast, chroma and lightness — not from taste.

Works well for

✓Text and icons on dark surfaces
✓Primary buttons and calls to action
✓Focus rings, active and selected states
✓Headers, footers and dark-mode surfaces
✓Brand accents, badges and data highlights

Use with care

⚠Text of any size on white — fails WCAG AA
⚠Full-page backgrounds — tiring over long sessions
⚠Black text placed on it
⚠Thin strokes and 1px borders — they disappear on light UI
⚠Pairing with a same-lightness hue — edges vibrate

Minimum size as text on white

Not as text

Safe as a fill behind white type

No — use #0A7552

Safe as a 1px border on white

No — use #0EA674

Meaning and mood

What a colour in this family tends to signal, and how this particular chroma and lightness change the reading.

cleantechnicalfreshclinical

Cyan reads as water, air and infrastructure: cool, hygienic, engineered.

At this chroma the association is amplified — it will dominate anything placed beside it, so give it space and use it sparingly. The low lightness adds weight and formality.

Worth knowing

At high lightness it disappears into white surfaces and thin strokes vanish entirely.

Reads as

FormalityHigh
EnergyHigh
Weight61/100
TemperatureCool
ApproachabilityReserved

Colour associations are cultural and vary by market. Treat these as a starting point for a conversation with your audience, not a finding about them.

Similar colors

One move away from this hex in each direction. Every swatch is its own page.

Lighter#24ECAA Darker#0A7753 More saturated#00C986 Less saturated#22A77B Warmer#10B943 Cooler#0EB5BB Softer#37B088 Richer#00AA72 Hue −20°#10B949 Hue −10°#10B965 Hue +10°#10B99D Hue +20°#10B9B9

Color relationships

The wheel positions with their names attached, so you can grab the one you actually need.

Complementary	#B91048	Directly opposite — maximum tension
Analogous left	#10B92C	Neighbour, quieter
Analogous right	#109DB9	Neighbour, quieter
Split-complement 1	#B9109D	Contrast without the clash
Split-complement 2	#B92C10	Contrast without the clash
Triadic 1	#8110B9	Even thirds — balanced and loud
Triadic 2	#B98110	Even thirds — balanced and loud
Tetradic	#2C10B9	Fourth corner of the square scheme

On the wheel

#10b981 sits at 160°. Every dot is a harmony position and links to its own page in the table alongside.

RGB percentages

Red6.3%

Green72.5%

Blue50.6%

R · 0–255

0x10

G · 0–255

185

0xb9

B · 0–255

129

0x81

CMYK percentages

Cyan91.4%

Magenta0.0%

Yellow30.3%

Key (black)27.5%

Total ink coverage is 149%. Most commercial presses cap around 300% — above that, sheets stop drying properly.

Color previews

#10b981 text on a black background

contrast 8.28:1

Card sample

#10b981 text on a white background

contrast 2.54:1

Card sample

#10b981 on grey

2.32:1

#10b981 on its own surface

2.40:1

#10b981 on its dark surface

6.36:1

CSS3 live lab

Text font color

The quick brown fox

color: #10b981;

Background color

Panel with #10b981 background

background-color: #10b981;

Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #10b981;

Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(16, 185, 129, 0.45);

Div box shadow

Elevated card

box-shadow: 0 12px 32px -8px rgba(16, 185, 129, 0.45);

Border & gradient

Gradient panel

border: 3px solid #10b981;
background: linear-gradient(135deg, #10b981, #1080B9);

Gradient text

Gradient headline

background: linear-gradient(90deg, #10b981, #1056B9);
-webkit-background-clip: text;
color: transparent;

Focus ring

Focused control

outline: 2px solid #10b981;
outline-offset: 3px;

Underline & caret

Marked up text

text-decoration-color: #10b981;
caret-color: #10b981;

Left rule

Pull quote or callout

border-left: 4px solid #10b981;

Ring + tint

Selected chip

background: #E8FDF6;
box-shadow: inset 0 0 0 2px #10b981;

Conic badge

68%

background: conic-gradient(#10b981 68%, #e2e8f0 0);

Transparency

What each alpha value actually composites to. The top row is #10b981 over white; the bottom row is the same alpha over a checkerboard, so you can see what survives on a photo or a video.

5%10%15%20%30%40%50%60%75%90%100%

Bottom row of hexes is the flattened result over white — use those when a design tool refuses transparency, or when you need a solid fallback.

alpha in every syntaxclick to select

rgba(16, 185, 129, 0.5)
rgb(16 185 129 / 50%)
#10b98180
hsl(160 84% 39% / 50%)
color-mix(in srgb, #10b981 50%, transparent)

Alpha	8-digit hex	Flat on white
10%	#10b9811a	#E7F8F2
20%	#10b98133	#CFF1E6
40%	#10b98166	#9FE3CD
60%	#10b98199	#70D5B3
80%	#10b981cc	#40C79A

Gradients from #10b981

Six recipes, each built from this hex and shown with the exact CSS that produced it.

Elevation

Same hue, three lightnesses — safe anywhere

background: linear-gradient(135deg, #1BEBA6, #10b981 45%, #0A7552);

Duotone

A short hue run reads richer than a flat fill

background: linear-gradient(120deg, #10b981, #0E619D);

Complement sweep

Loud — keep it behind large type only

background: linear-gradient(90deg, #10b981, #B91048);

Spotlight

Hero panels and app headers

background: radial-gradient(120% 120% at 20% 0%, #37EEB1 0%, #10b981 45%, #0A7552 100%);

Soft wash

Section backgrounds that stay readable

background: linear-gradient(180deg, #F4FAF8, #ffffff);

Mesh

Ambient background, no image weight

background: radial-gradient(60% 60% at 15% 20%, #14E826 0%, transparent 60%), radial-gradient(55% 55% at 85% 15%, #12A4D5 0%, transparent 60%), radial-gradient(70% 70% at 50% 95%, #0A7552 0%, transparent 65%), #10b981;

Monochromatic scale

#053827 #0B7A55 #10BC83 #27ECAB #69F2C5 #AAF8DE #D9FCF0

Palettes built from #10b981

UI palette

Gradient stops

Accent trio

Warm–cool bridge

Data series

Status set

Neutral companions

Shades — darker

#0EA674 #0D9467 #0B815A #0A6F4D #085C40 #064A34 #053727 #03251A #02120D

Tints — lighter

#12D595 #1BEBA6 #38EEB1 #54F0BD #71F3C8 #8DF5D3 #AAF8DE #C6FAE9 #E3FDF4

Tones — desaturated

#18B17E #21A87B #29A078 #329776 #3A8F73 #438670 #4B7E6D #54756A #5C6D67

Color harmonies

Complement

Split-complement

Analogous

Triadic

Tetradic

Nearest named colors

Ranked with CIEDE2000 across all 139 CSS keywords. Under ΔE 2 the eye stops telling them apart; over ΔE 10 they are plainly different colors.

Medium Sea Green#3cb371ΔE00 3.9 · ΔE76 7.9 Medium Aqua Marine#66cdaaΔE00 8.9 · ΔE76 18.9 Dark Sea Green#8fbc8fΔE00 11.9 · ΔE76 28.9 Light Sea Green#20b2aaΔE00 14.1 · ΔE76 28.2 Sea Green#2e8b57ΔE00 14.4 · ΔE76 19.9 Lime Green#32cd32ΔE00 15 · ΔE76 46.6

Closest CSS keywordMedium Sea Green · ΔE 3.9 Closest darker nameDark Cyan · ΔE 21.5 Closest lighter nameMedium Aqua Marine · ΔE 8.9

Nearest Tailwind familyemerald-500 · #10b981 · ΔE 0 Nearest web-safe colour#00CC99 · ΔE 5.4

#10b981 in the real world

Where a color in this family tends to land, and the interface roles it is usually asked to play.

Industries

TechnologyTravelHealthcareMedia

Common UI roles

ButtonsLinksFocus statesCharts

Print note

Sits outside most CMYK gamuts — expect a duller press result, or specify a spot ink.

On screens

Holds up across typical panel gamma. Still worth checking on an uncalibrated laptop, where mid-tones shift most.

In dark mode

Usable as-is on a dark surface at 8.28:1.

Brand examples for tailwind emerald 500 are listed above — each one links through to its own page.

Explore nearby colors

Small, deliberate steps away from this hex — useful when you are hunting for the version of a colour that finally feels right.

Tailwind Emerald 500, answered

What is the Tailwind emerald-500 hex code?

Tailwind CSS emerald-500 is #10b981 \u2014 a bright blue-green.

Why is emerald the default success color?

Its fresh, clean blue-green reads positive and confident; through Tailwind\u2019s ubiquity it became the reflexive choice for success states, confirmations and positive accents.

What do UI colors mean?

Interfaces bind meaning to hue \u2014 green/emerald for success, red for errors, amber for warnings \u2014 a shared traffic-light grammar users read instantly.

What color is #10b981?

#10b981 is a dark electric cyan, closest to Medium Sea Green (ΔE2000 3.9). It sits at 160° on the hue wheel with 84% saturation and 39% lightness, which reads as cool.

What is the RGB value of #10b981?

rgb(16, 185, 129) — 16 red, 185 green and 129 blue out of 255, or 6.3% / 72.5% / 50.6% by channel.

What is #10b981 in HSL and HSV?

hsl(160, 84%, 39%) and hsv(160, 91%, 73%). HSL is what CSS takes; HSV is what your design tool's picker shows, which is why the saturation numbers rarely match.

Is #10b981 a light or a dark color?

It is a mid-tone. Relative luminance is 0.3639 and perceived brightness is 58%, so black text on it reaches 8.28:1.

Should I use black or white text on #10b981?

Black. It scores 8.28:1 against #10b981, versus 2.54:1 for white — AAA at any size.

Is #10b981 accessible on a white background?

#10b981 on white scores 2.54:1, which fails WCAG AA at every size. Darken it to #0C855D to reach 4.5:1, or #096446 for 7:1.

What is the complementary color of #10b981?

#B91048 sits directly opposite on the wheel. Softer options are the split-complements #B9109D and #B92C10, which give the same contrast with far less vibration.

What colors go well with #10b981?

For interface work: #F4FAF8 as the surface, #C0EDDE for borders, #4B9B80 for secondary text, #BD0C73 as an accent and #0A7552 for hover and pressed states. For a palette, the analogous pair #10B92C and #109DB9 stays calm, while #B91048 is the loudest partner.

What is #10b981 in CMYK for printing?

cmyk(91%, 0%, 30%, 28%). This is a screen-to-ink approximation — a color this saturated sits outside most CMYK gamuts and will print duller than it looks here.

Is #10b981 warm or cool?

Cool — it scores 79 on a scale where 0 is the warmest orange and 100 the coolest azure. Nudged warmer it becomes #10B943; nudged cooler, #0EB5BB.

Which Tailwind color is closest to #10b981?

The emerald family — its 500 step is #10b981, ΔE2000 0 away. That is close enough to swap in without anyone noticing.

How do I use #10b981 in Tailwind CSS?

Inline it as an arbitrary value with bg-[#10b981] or text-[#10b981], or register the whole ramp under theme.extend.colors.brand so you get bg-brand-500 and friends. The generated 50–950 scale on this page is ready to paste into your config.

What is #10b981 with 50% opacity?

rgba(16, 185, 129, 0.5), or #10b98180 in eight-digit hex. Over white that composites to #88DCC0; over black, #085D41.

Is #10b981 a web-safe color?

No. The nearest web-safe colour is #00CC99, ΔE2000 5.4 away. The palette only matters for legacy displays and some email clients now.

What does the color #10b981 mean?

As a cyan, it reads clean, technical, fresh. Cyan reads as water, air and infrastructure: cool, hygienic, engineered. At this chroma the effect is amplified — it will dominate whatever sits beside it.

What gradient works with #10b981?

The safest is same-hue elevation: linear-gradient(135deg, #1BEBA6, #10b981 45%, #0A7552). For more colour, a short hue run to #0E619D keeps it rich without turning muddy.

Work with #10b981 in the Color Lab

Every tool opens with this colour already loaded.

Contrast Checker →Palette Generator →Palette Pro →Scale Generator →CSS Code Generator →Color Blind Simulator →Accessibility Checker →Color Distance →Gradient Generator →Image Color Picker →

Every value on this page is computed from #10b981 at request time — conversions, contrast ratios and ΔE distances are calculated, never looked up.