Sea Green

#1F9350

Green

Color Codes

All color formats for development

HEX
#1F9350
RGB
rgb(31, 147, 80)
HSL
hsl(145, 65%, 35%)
OKLCH
oklch(0.585 0.142 152.3)
CMYK
cmyk(79%, 0%, 46%, 42%)

Accessibility

WCAG contrast compliance

On White Background

3.93:1

AA AAA

On Black Background

5.35:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F2FC
100
#E2F9
200
#C8F3
300
#9EEA
400
#6CE0
500
#42D7
600
#27B9
700
#1F93
800
#1669
900
#0E43
950
#092A

Shades

Darker variations

1#1C8548
2#197640
3#166738
4#135830
5#104A28
6#0C3B20
7#092C18
8#061D10
9#030F08

Tints

Lighter variations

1#25AF5E
2#2BCA6D
3#40D67E
4#5BDC91
5#76E2A3
6#92E8B6
7#ADEEC8
8#C8F3DA
9#E4F9ED

Tones

Muted variations

1#258D51
2#2B8852
3#318252
4#367C53
5#3C7654
6#427055
7#486B56
8#4E6557
9#535F58

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F2FC
#F2FCF7
BackgroundsSubtle highlightsCard backgrounds
100
E2F9
#E2F9EB
Light backgroundsTable row hoverSkeleton loading
200
C8F3
#C8F3DA
Secondary backgroundsInput backgroundsDividers
300
9EEA
#9EEABE
BordersInactive statesPlaceholder text
400
6CE0
#6CE09C
Disabled statesSecondary iconsMuted text
500
42D7
#42D780
Primary brand colorCTAsActive elementsLinks
600
27B9
#27B964
Hover statesFocus ringsPrimary buttons hover
700
1F93
#1F9350
Active/pressed statesDark mode accentsSecondary text
800
1669
#166939
Text on light backgroundsHeadingsStrong borders
900
0E43
#0E4324
Primary textHigh emphasis contentDark headings
950
092A
#092A17
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --sea-green-50: #F2FCF7;
  --sea-green-100: #E2F9EB;
  --sea-green-200: #C8F3DA;
  --sea-green-300: #9EEABE;
  --sea-green-400: #6CE09C;
  --sea-green-500: #42D780;
  --sea-green-600: #27B964;
  --sea-green-700: #1F9350;
  --sea-green-800: #166939;
  --sea-green-900: #0E4324;
  --sea-green-950: #092A17;
}
Generate More ShadesCreate PaletteConvert Color