ع

Clean Blog

Readable neutrals with a classic link blue.

≈ White
≈ Surface Gray
≈ Graphite
≈ Midnight Slate
≈ Royal Blue

Color codes

HEXRGBHSLCMYK
hsl(0, 0%, 100%)cmyk(0%, 0%, 0%, 0%)
hsl(220, 14%, 96%)cmyk(1%, 1%, 0%, 4%)
hsl(217, 19%, 27%)cmyk(32%, 20%, 0%, 68%)
hsl(221, 39%, 11%)cmyk(56%, 38%, 0%, 85%)
hsl(221, 83%, 53%)cmyk(84%, 58%, 0%, 8%)

CSS

:root {
  --clean-blog-1: #FFFFFF;
  --clean-blog-2: #F3F4F6;
  --clean-blog-3: #374151;
  --clean-blog-4: #111827;
  --clean-blog-5: #2563EB;
}

How these colors work together

This is a monochromatic palette built around a single hue. Overall it reads cool. Lightness spans 89 points, which sets how much contrast you can create.

6 of 10 color pairs reach the 4.5:1 contrast needed for normal text. The most readable pair is ⁦#FFFFFF⁩ on ⁦#111827⁩ (17.74:1).

Clean Blog — readable text using the best pair.

Suggested applications

  • Website themes and design systems.
  • Interface themes: use the lightest color for backgrounds and the darkest for text.
  • Brand kits, social graphics and presentations.

#blog#readable#blue

Check accessibility Simulate color blindness CSS variables

Frequently asked questions

How do I use the Clean Blog palette?
The Clean Blog palette has 5 colors. Use one dominant color for large areas, a supporting color for secondary elements and the most saturated color sparingly as an accent.
Which colors in this palette are best for text?
Use ⁦#FFFFFF⁩ on ⁦#111827⁩: it has a contrast ratio of 17.74:1.
Can I download this palette?
Yes. Export it as PNG, SVG, CSS variables, JSON or plain text with the buttons above the color table.

More palettes

SaaS Dashboard#0F172A #1E293B #6366F1 #10B981 #F8FAFCAccessible Contrast#FFFFFF #1A1A1A #0050B3 #B00020 #00703CWarm E-commerce#FFF7ED #FED7AA #EA580C #7C2D12 #1C1917Japandi#F1EDE6 #D6CBBD #A89A86 #5F574B #2F2C28Lavender Fields#F3EEFC #E0D4F7 #C3B1E1 #9D8EC7 #6A5D8FNordic Light#FFFFFF #EEF1F4 #C9D1D9 #6B7B8C #1F2933