Silver

#A2E6C3

Green

Color Codes

All color formats for development

HEX
#A2E6C3
RGB
rgb(162, 230, 195)
HSL
hsl(149, 58%, 77%)
OKLCH
oklch(0.87 0.084 161.6)
CMYK
cmyk(30%, 0%, 15%, 10%)

Accessibility

WCAG contrast compliance

On White Background

1.43:1

AA AAA

On Black Background

14.64: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#83DEAF
2#64D69B
3#45CE87
4#31BA74
5#299B60
6#217C4D
7#195D3A
8#103E27
9#081F13

Tints

Lighter variations

1#ACE9C9
2#B5EBCF
3#BEEED5
4#C7F0DB
5#D1F3E1
6#DAF5E7
7#E3F8ED
8#ECFAF3
9#F6FDF9

Tones

Muted variations

1#A6E3C3
2#A9E0C3
3#ADDCC4
4#B0D9C4
5#B3D5C4
6#B7D2C4
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
#E3F8ED
Light backgroundsTable row hoverSkeleton loading
200
CBF1
#CBF1DD
Secondary backgroundsInput backgroundsDividers
300
A2E6
#A2E6C3
BordersInactive statesPlaceholder text
400
72DA
#72DAA4
Disabled statesSecondary iconsMuted text
500
4ACF
#4ACF8A
Primary brand colorCTAsActive elementsLinks
600
2FB1
#2FB16E
Hover statesFocus ringsPrimary buttons hover
700
258D
#258D58
Active/pressed statesDark mode accentsSecondary text
800
1B65
#1B653F
Text on light backgroundsHeadingsStrong borders
900
1140
#114028
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: #E3F8ED;
  --silver-200: #CBF1DD;
  --silver-300: #A2E6C3;
  --silver-400: #72DAA4;
  --silver-500: #4ACF8A;
  --silver-600: #2FB16E;
  --silver-700: #258D58;
  --silver-800: #1B653F;
  --silver-900: #114028;
  --silver-950: #0B2819;
}
Generate More ShadesCreate PaletteConvert Color