#7DB89E

Accessibility

AAA

9.22:1

Vs white / black

2.28:1 · 9.22:1

Sources

Library color

Codes

Formats

HEX

#7db89e

RGB

rgb(125, 184, 158)

RGBA

rgba(125, 184, 158, 1)

HSL

hsl(154, 29%, 61%)

HSLA

hsla(154, 29%, 61%, 1)

HSV

hsv(154, 32%, 72%)

LAB

lab(70.25% -24.78 7.16)

LCH

lch(70.25% 25.79 163.88)

OKLAB

oklab(0.7346 -0.0698 0.0185)

OKLCH

oklch(0.7346 0.0722 165.16)

XYZ

xyz(31.77, 41.11, 38.60)

CMYK

cmyk(32%, 0%, 14%, 28%)

CSS

color: #7db89e;

CSS variable

--color-7db89e: #7db89e;

SCSS

$color-7db89e: #7db89e;

JavaScript

const color = "#7db89e";

TypeScript

const color: string = "#7db89e";

React

style={{ backgroundColor: "#7db89e" }}

JSON

{ "hex": "#7db89e", "rgb": { "r": 125, "g": 184, "b": 158 }, "oklch": "oklch(0.7346 0.0722 165.16)" }

Export

Developer code

css

:root {
  --#7db89e-1: #7db89e;
}

Design systems

Nearest official tokens

An arbitrary HEX is not an official Tailwind, Material, or Bootstrap color. Distance is CIEDE2000.

Nearest Tailwind color

teal-500

Very different · ΔE 9.73 · #14B8A6

Nearest CSS named color

DarkSeaGreen

Very different · ΔE 6.8 · #8FBC8F

Nearest Material color

teal-300

Very different · ΔE 8.68 · #4DB6AC

Nearest Bootstrap color

success

Very different · ΔE 19.92 · #198754

OKLCH

Perceptual 50–950 scale

Generated in OKLCH from this hex. Not an official Tailwind scale unless the hex itself is a Tailwind token.

50dbffee 100cbf3e0 200b3e1cb 30097cbb4 40076b096 5005a947b 6004a7c67 700396452 800294c3d 9001a362a 950072016

Palette

Tints & shades

Full scale from light tints through the base color into deep shades

f4f9f7 e9f3ef dfede7 d4e7df c9e1d7 bedccf b3d6c6 a8d0be 9ecab6 93c4ae 88bea6 7db89e 73a991 689984 5e8a77 537b69 496b5c 3f5c4f 344d42 2a3d35 1f2e28 151f1a 0a0f0d

Palette

Tints

Mixed toward white — soft backgrounds and highlights

f4f9f7 e9f3ef dfede7 d4e7df c9e1d7 bedccf b3d6c6 a8d0be 9ecab6 93c4ae 88bea6

Palette

Shades

Mixed toward black — depth, text, and emphasis

73a991 689984 5e8a77 537b69 496b5c 3f5c4f 344d42 2a3d35 1f2e28 151f1a 0a0f0d

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

7db39b 7eaf99 7eaa97 7ea594 7ea192 7f9c8f 7f978d 7f938a 7f8e88 808985 808583

Harmony

Complementary

Opposite on the color wheel for contrast

#7DB89EStop 1 #B87F98Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#7FB883Stop 1 #7DB89EStop 2 #7FB5B8Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#7DB89EStop 1 #9F7FB8Stop 2 #B89F7FStop 3

Harmony

Split complementary

Base plus two accents beside the complement

#7DB89EStop 1 #B87FB5Stop 2 #B8837FStop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#244235Stop 1 #3F735DStop 2 #5BA484Stop 3 #8CC0A9Stop 4 #BDDBCEStop 5

Using this color

Where #7db89e works

#7DB89E (#7db89e) sits in the green family at about 154° hue, 29% saturation, and 61% lightness. Contrast is 2.28:1 on white and 9.22:1 on black, so near-black labels read more clearly on the swatch itself. Nearest Tailwind token: teal-500 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

supporting UI accents
text or icons on charcoal / dark mode

Do not use #7db89e as small body text on white — 2.28:1 misses WCAG AA (4.5:1). Pair it with a darker shade from the scale below, or check pairs in the contrast checker.

Family context: Growth, nature, and success. Strong for finance positives, eco brands, and health. Common uses still include buttons, charts, and accents in the Green range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Spectrum #80C2A1#80C2A1 Spectrum #6BB8A5#6BB8A5 Spectrum #65BDA1#65BDA1 Spectrum #81C5B5#81C5B5 Spectrum #7BC69C#7BC69C Spectrum #80CBB5#80CBB5 Spectrum #60C39B#60C39B Spectrum #96CFB4#96CFB4 Spectrum #7CD0B0#7CD0B0 DarkSeaGreen#8FBC8F Spectrum #94CCA3#94CCA3 Spectrum #4DAC8B#4DAC8B