Silver

#A2E6C2

Green

Color Codes

All color formats for development

HEX
#A2E6C2
RGB
rgb(162, 230, 194)
HSL
hsl(148, 58%, 77%)
OKLCH
oklch(0.87 0.085 160.9)
CMYK
cmyk(30%, 0%, 16%, 10%)

Accessibility

WCAG contrast compliance

On White Background

1.44:1

AA AAA

On Black Background

14.63:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F3FC
100
#E3F8
200
#CBF1
300
#A2E6
400
#72DA
500
#4ACF
600
#2FB1
700
#258D
800
#1B65
900
#1140
950
#0B28

Shades

Darker variations

1#83DEAE
2#64D699
3#45CE85
4#31BA71
5#299B5E
6#217C4C
7#195D39
8#103E26
9#081F13

Tints

Lighter variations

1#ACE9C8
2#B5EBCE
3#BEEED4
4#C7F0DA
5#D1F3E1
6#DAF5E7
7#E3F8ED
8#ECFAF3
9#F6FDF9

Tones

Muted variations

1#A6E3C2
2#A9E0C3
3#ADDCC3
4#B0D9C3
5#B3D5C3
6#B7D2C3
7#BACFC4
8#BECBC4
9#C1C8C4

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F3FC
#F3FCF7
BackgroundsSubtle highlightsCard backgrounds
100
E3F8
#E3F8EC
Light backgroundsTable row hoverSkeleton loading
200
CBF1
#CBF1DD
Secondary backgroundsInput backgroundsDividers
300
A2E6
#A2E6C2
BordersInactive statesPlaceholder text
400
72DA
#72DAA2
Disabled statesSecondary iconsMuted text
500
4ACF
#4ACF88
Primary brand colorCTAsActive elementsLinks
600
2FB1
#2FB16C
Hover statesFocus ringsPrimary buttons hover
700
258D
#258D56
Active/pressed statesDark mode accentsSecondary text
800
1B65
#1B653D
Text on light backgroundsHeadingsStrong borders
900
1140
#114027
Primary textHigh emphasis contentDark headings
950
0B28
#0B2819
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F3FCF7;
  --silver-100: #E3F8EC;
  --silver-200: #CBF1DD;
  --silver-300: #A2E6C2;
  --silver-400: #72DAA2;
  --silver-500: #4ACF88;
  --silver-600: #2FB16C;
  --silver-700: #258D56;
  --silver-800: #1B653D;
  --silver-900: #114027;
  --silver-950: #0B2819;
}
Generate More ShadesCreate PaletteConvert Color