Colors Palettes
All palettes

Charcoal

Beautiful Charcoal color palette.

UI Design 5 colors
#768193
#12122B
#344659
#000F22
#5B556A

Every color in Charcoal

HEX, RGB and HSL codes with contrast ratings. Click to copy.

155 32
#768193
Primary
#768193 rgb(118, 129, 147) hsl(217, 12%, 52%)
On white 3.94:1 AA large text On black 5.33:1 AA
#12122B
Secondary
#12122B rgb(18, 18, 43) hsl(240, 41%, 12%)
On white 18.31:1 AAA On black 1.15:1 Fails
#344659
Accent
#344659 rgb(52, 70, 89) hsl(211, 26%, 28%)
On white 9.69:1 AAA On black 2.17:1 Fails
#000F22
Background
#000F22 rgb(0, 15, 34) hsl(214, 100%, 7%)
On white 19.24:1 AAA On black 1.09:1 Fails
#5B556A
Text
#5B556A rgb(91, 85, 106) hsl(257, 11%, 37%)
On white 7.11:1 AAA On black 2.95:1 Fails

About the Charcoal palette

Charcoal has 5 colors in the UI Design category. Overall it reads as dark and balanced, with an average lightness of 27% and an average saturation of 38%. The hues lean cool.

The strongest text and background pair is #768193 with #000F22, at a contrast ratio of 4.89:1 (AA).

Color harmony

Measured from this palette's real values.

Saturation
38%
Lightness
27%
Best contrast
4.9

Ideas for using it

  • Web design: use #768193 for buttons and links, and keep large areas to the lighter colors.
  • Mobile apps: check each color against white and black above before you use it for text or icons.
  • Brand identity: pick one or two colors as the core and keep the rest as support.
  • Presentations: use the dark colors for backgrounds and the strongest contrast pair for titles.

Use it in your project

Copy this palette as CSS variables, or export it in another format.

:root {
  --color-1: #768193; /* Primary */
  --color-2: #12122B; /* Secondary */
  --color-3: #344659; /* Accent */
  --color-4: #000F22; /* Background */
  --color-5: #5B556A; /* Text */
}