ع

Quiet Studio

Soft greige neutrals with enough contrast at the dark end for readable text.

≈ Marble White
≈ Bone
≈ Greige
≈ Sandstone
≈ Soft Black

Color codes

HEXRGBHSLCMYK
hsl(37, 27%, 94%)cmyk(0%, 1%, 3%, 4%)
hsl(40, 19%, 82%)cmyk(0%, 3%, 8%, 15%)
hsl(38, 16%, 66%)cmyk(0%, 5%, 15%, 28%)
hsl(40, 7%, 41%)cmyk(0%, 5%, 14%, 56%)
hsl(36, 6%, 17%)cmyk(0%, 4%, 11%, 82%)

CSS

:root {
  --quiet-studio-1: #F4F1EC;
  --quiet-studio-2: #D9D3C7;
  --quiet-studio-3: #B7AD9C;
  --quiet-studio-4: #6F6A60;
  --quiet-studio-5: #2D2B28;
}

How these colors work together

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

4 of 10 color pairs reach the 4.5:1 contrast needed for normal text. The most readable pair is ⁦#F4F1EC⁩ on ⁦#2D2B28⁩ (12.53:1).

Quiet Studio — 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.

#greige#calm#neutral

Check accessibility Simulate color blindness CSS variables

Frequently asked questions

How do I use the Quiet Studio palette?
The Quiet Studio 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 ⁦#F4F1EC⁩ on ⁦#2D2B28⁩: it has a contrast ratio of 12.53: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

Single Accent#F7F7F5 #DEDCD7 #8D8A84 #2B2A28 #E4572EPaper and Ink#FAFAF7 #E8E6E1 #9A968E #3A3935 #111111Nordic Light#FFFFFF #EEF1F4 #C9D1D9 #6B7B8C #1F2933Blush and Ivory#FFFAF3 #F6E3DC #E8C2B8 #C99A8E #8A5A52Olive Grove#4A5A23 #7A8B3A #B5B77C #E6E2C3 #5C4033Calm Wellness#F6F1EB #E3D5CA #A3B18A #588157 #344E41