Emerald

#3FD9AE

Green

Color Codes

All color formats for development

HEX

#3FD9AE

RGB

rgb(63, 217, 174)

HSL

hsl(163, 67%, 55%)

OKLCH

oklch(0.795 0.141 169.8)

CMYK

cmyk(71%, 0%, 20%, 15%)

Accessibility

WCAG contrast compliance

On White Background

1.79:1

AA ✗AAA ✗

On Black Background

11.75:1

AA ✓AAA ✓

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F2FC

100

#E1F9

200

#C8F4

300

#9DEC

400

#6AE2

500

#3FD9

600

#25BB

700

#1D95

800

#156A

900

#0D44

950

#082B

Shades

Darker variations

1#2AD3A3

2#25BB91

3#20A47F

4#1C8D6D

5#17755A

6#135E48

7#0E4636

8#092F24

9#051712

Tints

Lighter variations

1#53DDB6

2#66E1BE

3#79E4C6

4#8CE8CE

5#9FECD6

6#B2F0DE

7#C6F4E7

8#D9F7EF

9#ECFBF7

Tones

Muted variations

1#47D1AA

2#4FCAA7

3#56C2A4

4#5EBAA0

5#66B39D

6#6DAB9A

7#75A396

8#7D9C93

9#859490

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F2FC `#F2FCFA`	BackgroundsSubtle highlightsCard backgrounds
100	E1F9 `#E1F9F2`	Light backgroundsTable row hoverSkeleton loading
200	C8F4 `#C8F4E7`	Secondary backgroundsInput backgroundsDividers
300	9DEC `#9DECD5`	BordersInactive statesPlaceholder text
400	6AE2 `#6AE2C0`	Disabled statesSecondary iconsMuted text
500	3FD9 `#3FD9AE`	Primary brand colorCTAsActive elementsLinks
600	25BB `#25BB91`	Hover statesFocus ringsPrimary buttons hover
700	1D95 `#1D9573`	Active/pressed statesDark mode accentsSecondary text
800	156A `#156A52`	Text on light backgroundsHeadingsStrong borders
900	0D44 `#0D4435`	Primary textHigh emphasis contentDark headings
950	082B `#082B21`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --emerald-50: #F2FCFA;
  --emerald-100: #E1F9F2;
  --emerald-200: #C8F4E7;
  --emerald-300: #9DECD5;
  --emerald-400: #6AE2C0;
  --emerald-500: #3FD9AE;
  --emerald-600: #25BB91;
  --emerald-700: #1D9573;
  --emerald-800: #156A52;
  --emerald-900: #0D4435;
  --emerald-950: #082B21;
}

Generate More Shades Create Palette Convert Color