Charcoal

#1D2635

Blue

Color Codes

All color formats for development

HEX
#1D2635
RGB
rgb(29, 38, 53)
HSL
hsl(218, 29%, 16%)
OKLCH
oklch(0.267 0.031 260.4)
CMYK
cmyk(45%, 28%, 0%, 79%)

Accessibility

WCAG contrast compliance

On White Background

15.21:1

AA AAA

On Black Background

1.38:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F7
100
#E8EC
200
#D4DB
300
#B3C0
400
#8C9F
500
#6B83
600
#5068
700
#3F52
800
#2D3B
900
#1D26
950
#1218

Shades

Darker variations

1#1A222F
2#171E2A
3#141A25
4#111720
5#0E131A
6#0C0F15
7#090B10
8#06080B
9#030405

Tints

Lighter variations

1#2C3950
2#3B4D6C
3#4B6188
4#5A75A3
5#758CB3
6#90A3C2
7#ACBAD1
8#C8D1E1
9#E3E8F0

Tones

Muted variations

1#1E2633
2#1F2632
3#212731
4#222730
5#23272F
6#24282E
7#25282C
8#26282B
9#28282A

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F5F7
#F5F7FA
BackgroundsSubtle highlightsCard backgrounds
100
E8EC
#E8ECF2
Light backgroundsTable row hoverSkeleton loading
200
D4DB
#D4DBE7
Secondary backgroundsInput backgroundsDividers
300
B3C0
#B3C0D5
BordersInactive statesPlaceholder text
400
8C9F
#8C9FC0
Disabled statesSecondary iconsMuted text
500
6B83
#6B83AE
Primary brand colorCTAsActive elementsLinks
600
5068
#506891
Hover statesFocus ringsPrimary buttons hover
700
3F52
#3F5273
Active/pressed statesDark mode accentsSecondary text
800
2D3B
#2D3B52
Text on light backgroundsHeadingsStrong borders
900
1D26
#1D2635
Primary textHigh emphasis contentDark headings
950
1218
#121821
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --charcoal-50: #F5F7FA;
  --charcoal-100: #E8ECF2;
  --charcoal-200: #D4DBE7;
  --charcoal-300: #B3C0D5;
  --charcoal-400: #8C9FC0;
  --charcoal-500: #6B83AE;
  --charcoal-600: #506891;
  --charcoal-700: #3F5273;
  --charcoal-800: #2D3B52;
  --charcoal-900: #1D2635;
  --charcoal-950: #121821;
}
Generate More ShadesCreate PaletteConvert Color