Back to palettes

Palette

Velvet Grove Dusk

A deep and serene palette reflecting the quiet beauty of a forest at twilight.

darkcalm5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Velvet Grove Dusk 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 Velvet Grove Dusk.

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

Data visualization

#2C3E50#7F8C8D#BDC3C7#34495E#95A5A6

Palette guide

How to use Velvet Grove Dusk

Overview

The Velvet Grove Dusk palette captures the serene beauty of a forest at twilight with its cool, muted grays and deep blues. Dominated by the profound #2C3E50 and #34495E, it provides a solid, grounding base, reminiscent of deep shadows. Mid-tones like #7F8C8D and #95A5A6 introduce a soft, misty quality, while #BDC3C7 offers a delicate, almost silver highlight. This palette is exceptionally useful for designers and developers seeking to create calm, sophisticated, and professional interfaces that convey stability, clarity, and a quiet elegance, suitable for various digital and print applications.

Best used for

  • Corporate and professional websites
  • Minimalist UI designs
  • Photography portfolios
  • Meditation or mindfulness apps
  • Architectural or interior design presentations
  • Tech product branding

Suggested color roles

primary

Use #2C3E50, a deep, cool blue-gray, for main backgrounds, headers, or large structural elements, providing a strong anchor.

secondary

Apply #34495E, slightly lighter but still dark, perfect for navigation, secondary panels, or emphasizing key sections.

accent

Employ #BDC3C7, the lightest, almost silver gray, excellent for subtle highlights, interactive elements, or delicate iconography.

background

Utilize #7F8C8D, a mid-tone gray, versatile for content areas, offering a muted and calm canvas.

text

Consider #95A5A6 for secondary text or captions on darker backgrounds. For primary text, use white or charcoal on dark for optimal readability.

Accessibility notes

  • Ensure sufficient contrast when placing text on #BDC3C7; dark grays or black are recommended for readability.
  • For text on #2C3E50 and #34495E, use white or a very light gray for optimal readability and WCAG AA compliance.
  • Avoid using #95A5A6 or #BDC3C7 for small text on mid-tone backgrounds like #7F8C8D due to potential contrast issues.
  • Always test contrast ratios for all text and interactive elements, especially against their backgrounds.

Recommended combinations

Dusk Horizon

Deep base with a balanced mid-tone and a light accent for a sophisticated, layered look in web interfaces.

#2C3E50 · #7F8C8D · #BDC3C7

Misty Path

Slightly lighter dark base with a soft gray for content, complemented by the deepest tone for structure.

#34495E · #95A5A6 · #2C3E50

Silver Lining

A lighter, airy combination with a darker accent, suitable for clean, spacious layouts and subtle branding.

#7F8C8D · #BDC3C7 · #34495E

CSS variables

:root {
  --velvet-grove-dusk-1: #2C3E50;
  --velvet-grove-dusk-2: #7F8C8D;
  --velvet-grove-dusk-3: #BDC3C7;
  --velvet-grove-dusk-4: #34495E;
  --velvet-grove-dusk-5: #95A5A6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "velvet-grove-dusk": {
        1: "#2C3E50",
        2: "#7F8C8D",
        3: "#BDC3C7",
        4: "#34495E",
        5: "#95A5A6",
      }
    }
  }
}

Related searches

cool gray color schememuted forest palettecalm ui colorsserene dusk paletteprofessional gray blue

Palette colors

Hex values

Color 1#2C3E50
·
Color 2#7F8C8D
·
Color 3#BDC3C7
·
Color 4#34495E
·
Color 5#95A5A6
·

Accessibility

Contrast checker

1
2
3
4
5
1
3.2:1AA18
6.2:1AA
1.2:1Fail
4.3:1AA18
2
3.2:1AA18
2:1Fail
2.7:1Fail
1.4:1Fail
3
6.2:1AA
2:1Fail
5.2:1AA
1.4:1Fail
4
1.2:1Fail
2.7:1Fail
5.2:1AA
3.6:1AA18
5
4.3:1AA18
1.4:1Fail
1.4:1Fail
3.6:1AA18

Similar palettes

More like Velvet Grove Dusk

View all dark