Palette

Velvet Cacao Dreams

A rich, comforting blend of deep browns and soft creams, evoking the warmth of a luxurious cacao drink.

DarkElegant5 colors

More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Velvet Cacao Dreams 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 Cacao Dreams.

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

Data visualization

#3D2B2B#6D4C4C#A1887F#D7CCC8#EDE7E1

Palette guide

How to use Velvet Cacao Dreams

Overview

The Velvet Cacao Dreams palette is a rich, comforting blend of deep browns and soft creams, evoking the warmth of a luxurious cacao drink. Starting with the profound #3D2B2B, it transitions through #6D4C4C and #A1887F, reaching the lighter #D7CCC8, and finally the airy #EDE7E1. This scheme is perfect for designers seeking to convey elegance, coziness, and a sophisticated, inviting atmosphere. Its harmonious blend of dark and light tones offers excellent versatility for branding, web design, or any project requiring a refined and comforting aesthetic with natural warmth.

Best used for

Upscale cafe and bakery branding
Cozy interior design and decor inspiration
Sophisticated packaging for gourmet products
Autumn/winter fashion and lifestyle content
Elegant publishing and editorial design
Digital interfaces with a warm, refined feel

Suggested color roles

primary

Utilize #3D2B2B as the dominant background or primary branding color to establish a deep, elegant foundation.

secondary

Employ #6D4C4C and #A1887F for secondary content areas, panels, or subtle graphic elements, adding warmth.

accent

The light #D7CCC8 can highlight key information or interactive elements, providing a gentle, inviting contrast.

background

The lightest #EDE7E1 provides a clean, airy background, while #3D2B2B offers a rich, sophisticated base.

text

For maximum readability on light backgrounds, use #3D2B2B. On dark backgrounds, #EDE7E1 serves as excellent body text.

Accessibility notes

Ensure #EDE7E1 text on #3D2B2B or #6D4C4C backgrounds meets WCAG contrast requirements (at least 4.5:1).
Avoid pairing #A1887F text with #D7CCC8, as the contrast will likely be insufficient for legibility.
Interactive elements should have clearly discernible states, especially when using subtle tonal shifts.
Consider using a slightly darker brown for body text if the background is #EDE7E1 to ensure optimal readability.

Recommended combinations

Rich Comfort

Ideal for main content sections, offering a deep, elegant background with warm mid-tones and clear, creamy text.

#3D2B2B · #A1887F · #EDE7E1

Cacao Layers

Excellent for subtle gradient effects, background textures, or layered UI components that require depth without stark contrast.

#6D4C4C · #A1887F · #D7CCC8

Creamy Highlight

Perfect for drawing attention to key details, navigation elements, or creating a cozy, inviting feel in UI design.

#3D2B2B · #D7CCC8 · #EDE7E1

CSS variables

:root {
  --velvet-cacao-dreams-1: #3D2B2B;
  --velvet-cacao-dreams-2: #6D4C4C;
  --velvet-cacao-dreams-3: #A1887F;
  --velvet-cacao-dreams-4: #D7CCC8;
  --velvet-cacao-dreams-5: #EDE7E1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "velvet-cacao-dreams": {
        1: "#3D2B2B",
        2: "#6D4C4C",
        3: "#A1887F",
        4: "#D7CCC8",
        5: "#EDE7E1",
      }
    }
  }
}

Hex values

Color 1#3D2B2B

Color 2#6D4C4C

Color 3#A1887F

Color 4#D7CCC8

Color 5#EDE7E1

Accessibility

Contrast checker

1.8:1Fail

4:1AA18

8.5:1AAA

10.8:1AAA

1.8:1Fail

2.3:1Fail

4.8:1AA

6.1:1AA

4:1AA18

2.3:1Fail

2.1:1Fail

2.7:1Fail

8.5:1AAA

4.8:1AA

2.1:1Fail

1.3:1Fail

10.8:1AAA

6.1:1AA

2.7:1Fail

1.3:1Fail

Similar palettes

More like Velvet Cacao Dreams

View all Dark

Amethyst Star Cluster

Art Deco Bronze

Art Deco Sapphire

Baroque Tapestry Weave

Deep Space Orchid

Frosted Grape Arbor