Palette

Smoky Lounge

Subtle, sophisticated grays with a hint of warmth, ideal for a refined and intimate space.

neutralelegant5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Smoky Lounge reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Smoky Lounge.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#36454F#5D6D7E#85929E#ACB5BF#CED8E0

Palette guide

How to use Smoky Lounge

Overview

The Smoky Lounge palette offers subtle, sophisticated grays with a hint of warmth, ideal for a refined and intimate space. Ranging from the deep #36454F (Charcoal Gray) to the airy #CED8E0 (Light Steel Blue), and including versatile mid-tones like #5D6D7E (Cadet Gray) and #85929E (Slate Gray), this collection provides a calm and elegant foundation. Designers and developers can leverage these tones to create clean, professional, and trustworthy digital experiences or branding materials that convey stability, clarity, and understated luxury, perfect for corporate or minimalist aesthetics.

Best used for

Corporate web design and professional portfolios
Interior design visualization and mood boards
User interfaces for professional tools and platforms
Branding for services requiring trust and stability
Minimalist e-commerce sites for high-end products
Elegant print materials and stationery design

Suggested color roles

primary

#36454F acts as a strong, foundational anchor, excellent for primary backgrounds or bold textual elements.

secondary

#5D6D7E serves as a versatile mid-tone, suitable for secondary sections, cards, or subtle content divisions.

accent

#CED8E0 provides a light, airy accent, perfect for highlights, interactive elements, or clean borders.

background

Use #CED8E0 for a light, airy feel, or #36454F for a deep, sophisticated dark theme. Both offer excellent canvases.

text

#36454F is ideal for dark text on light backgrounds. Conversely, #CED8E0 ensures clear readability when used as light text on dark backgrounds.

Accessibility notes

#36454F on #CED8E0 offers excellent contrast, ensuring readability for all text sizes.
#5D6D7E on #CED8E0 should also pass WCAG contrast guidelines for regular text.
Be mindful of contrast when using #85929E or #ACB5BF as text on backgrounds like #CED8E0; larger text might be required.
This palette generally offers good contrast potential due to its distinct range of light and dark grays, making it versatile for accessible design.

Recommended combinations

Dark to Light

Creates a clear visual progression and hierarchy, ideal for distinguishing main content from background or secondary elements.

#36454F · #5D6D7E · #CED8E0

Mid-Tone Harmony

Offers a soft, harmonious blend of grays, perfect for subtle gradients, layered UI components, or elegant background textures.

#5D6D7E · #85929E · #ACB5BF

Light & Airy

Delivers a clean, breathable aesthetic, suitable for minimalist layouts where a sense of openness and calm is desired.

#85929E · #ACB5BF · #CED8E0

CSS variables

:root {
  --smoky-lounge-1: #36454F;
  --smoky-lounge-2: #5D6D7E;
  --smoky-lounge-3: #85929E;
  --smoky-lounge-4: #ACB5BF;
  --smoky-lounge-5: #CED8E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "smoky-lounge": {
        1: "#36454F",
        2: "#5D6D7E",
        3: "#85929E",
        4: "#ACB5BF",
        5: "#CED8E0",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#5D6D7E

Color 3#85929E

Color 4#ACB5BF

Color 5#CED8E0

Accessibility

Contrast checker

1.9:1Fail

3.1:1AA18

4.8:1AA

6.8:1AA

1.9:1Fail

1.7:1Fail

2.6:1Fail

3.7:1AA18

3.1:1AA18

1.7:1Fail

1.5:1Fail

2.2:1Fail

4.8:1AA

2.6:1Fail

1.5:1Fail

1.4:1Fail

6.8:1AA

3.7:1AA18

2.2:1Fail

1.4:1Fail

Similar palettes

More like Smoky Lounge