ع

Single Accent

Neutral base with a single warm accent for calls to action.

≈ Off White
≈ Timberwolf
≈ Stone
≈ Soft Black
≈ Orange Red

Color codes

HEXRGBHSLCMYK
hsl(60, 11%, 96%)cmyk(0%, 0%, 1%, 3%)
hsl(43, 10%, 86%)cmyk(0%, 1%, 3%, 13%)
hsl(40, 4%, 54%)cmyk(0%, 2%, 6%, 45%)
hsl(40, 4%, 16%)cmyk(0%, 2%, 7%, 83%)
hsl(14, 77%, 54%)cmyk(0%, 62%, 80%, 11%)

CSS

:root {
  --single-accent-1: #F7F7F5;
  --single-accent-2: #DEDCD7;
  --single-accent-3: #8D8A84;
  --single-accent-4: #2B2A28;
  --single-accent-5: #E4572E;
}

How these colors work together

It is built mostly from neutrals, so structure comes from lightness rather than hue. Overall it reads neutral. Lightness spans 80 points, which sets how much contrast you can create.

2 of 10 color pairs reach the 4.5:1 contrast needed for normal text. The most readable pair is ⁦#F7F7F5⁩ on ⁦#2B2A28⁩ (13.37:1).

Single Accent — readable text using the best pair.

Suggested applications

  • Portfolios, editorial layouts and calm product pages.
  • Interface themes: use the lightest color for backgrounds and the darkest for text.
  • Brand kits, social graphics and presentations.

#accent#neutral#ui

Check accessibility Simulate color blindness CSS variables

Frequently asked questions

How do I use the Single Accent palette?
The Single Accent 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 ⁦#F7F7F5⁩ on ⁦#2B2A28⁩: it has a contrast ratio of 13.37: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

Quiet Studio#F4F1EC #D9D3C7 #B7AD9C #6F6A60 #2D2B28Nordic Light#FFFFFF #EEF1F4 #C9D1D9 #6B7B8C #1F2933Paper and Ink#FAFAF7 #E8E6E1 #9A968E #3A3935 #111111Fresh Startup#06D6A0 #118AB2 #073B4C #FFD166 #EF476FElectric Night#0D0221 #261447 #FF3864 #2DE2E6 #F6019DForest Floor#1B3A2B #3E6B48 #7FA16B #C9B88A #6B4F3A