Charcoal

#425270

Blue

Color Codes

All color formats for development

HEX
#425270
RGB
rgb(66, 82, 112)
HSL
hsl(219, 26%, 35%)
OKLCH
oklch(0.438 0.054 262.6)
CMYK
cmyk(41%, 27%, 0%, 56%)

Accessibility

WCAG contrast compliance

On White Background

7.86:1

AA AAA

On Black Background

2.67:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F7
100
#E9EC
200
#D5DB
300
#B5C0
400
#8F9F
500
#6E83
600
#5367
700
#4252
800
#2F3B
900
#1E26
950
#1318

Shades

Darker variations

1#3B4A65
2#35425A
3#2E3A4F
4#283143
5#212938
6#1A212D
7#141922
8#0D1016
9#07080B

Tints

Lighter variations

1#4E6285
2#5B719A
3#6D82A9
4#8294B5
5#97A6C2
6#ABB8CE
7#C0C9DA
8#D5DBE6
9#EAEDF3

Tones

Muted variations

1#44536E
2#47546C
3#495469
4#4B5567
5#4E5665
6#505663
7#525760
8#55585E
9#57595C

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F5F7
#F5F7F9
BackgroundsSubtle highlightsCard backgrounds
100
E9EC
#E9ECF2
Light backgroundsTable row hoverSkeleton loading
200
D5DB
#D5DBE6
Secondary backgroundsInput backgroundsDividers
300
B5C0
#B5C0D4
BordersInactive statesPlaceholder text
400
8F9F
#8F9FBD
Disabled statesSecondary iconsMuted text
500
6E83
#6E83AA
Primary brand colorCTAsActive elementsLinks
600
5367
#53678D
Hover statesFocus ringsPrimary buttons hover
700
4252
#425270
Active/pressed statesDark mode accentsSecondary text
800
2F3B
#2F3B50
Text on light backgroundsHeadingsStrong borders
900
1E26
#1E2633
Primary textHigh emphasis contentDark headings
950
1318
#131820
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --charcoal-50: #F5F7F9;
  --charcoal-100: #E9ECF2;
  --charcoal-200: #D5DBE6;
  --charcoal-300: #B5C0D4;
  --charcoal-400: #8F9FBD;
  --charcoal-500: #6E83AA;
  --charcoal-600: #53678D;
  --charcoal-700: #425270;
  --charcoal-800: #2F3B50;
  --charcoal-900: #1E2633;
  --charcoal-950: #131820;
}
Generate More ShadesCreate PaletteConvert Color