← Back to Editor

#D9C7AF · #03030B · #54ACAD · #B7BCF4 · #FFF4D6

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#D9C7AF

Goose Yellow · Silver · Peach Orange

HEX
#D9C7AF
RGB
rgb(217, 199, 175)
HSL
hsl(34, 36%, 77%)
HSB
hsb(34, 19%, 85%)
CMYK
cmyk(0%, 8%, 19%, 15%)
Oklch
oklch(83.8% 0.038 75.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#03030B

Deep Indigo · Black · Deep Sea Blue

HEX
#03030B
RGB
rgb(3, 3, 11)
HSL
hsl(240, 57%, 3%)
HSB
hsb(240, 73%, 4%)
CMYK
cmyk(73%, 73%, 0%, 96%)
Oklch
oklch(10.4% 0.024 281.4)

Traditional「Deep Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#54ACAD

Slate Blue · CadetBlue · Mint Ice

HEX
#54ACAD
RGB
rgb(84, 172, 173)
HSL
hsl(181, 35%, 50%)
HSB
hsb(181, 51%, 68%)
CMYK
cmyk(51%, 1%, 0%, 32%)
Oklch
oklch(69.1% 0.084 196.4)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#B7BCF4

Azure · LightSteelBlue · Sky Blue

HEX
#B7BCF4
RGB
rgb(183, 188, 244)
HSL
hsl(235, 73%, 84%)
HSB
hsb(235, 25%, 96%)
CMYK
cmyk(25%, 23%, 0%, 4%)
Oklch
oklch(81.1% 0.079 280.5)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#FFF4D6

Goose Yellow · Beige · Lemon Cream

HEX
#FFF4D6
RGB
rgb(255, 244, 214)
HSL
hsl(44, 100%, 92%)
HSB
hsb(44, 16%, 100%)
CMYK
cmyk(0%, 4%, 16%, 0%)
Oklch
oklch(96.8% 0.041 90.2)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D9C7AF
AFC2D9

Analogous

D9B2AF
D9C7AF
D7D9AF

Triadic

D9C7AF
AFD9C7
C7AFD9

Split-Comp.

D9C7AF
AFD7D9
B2AFD9

Tetradic

D9C7AF
AFD9B2
AFC2D9
D9AFD7

Contrast Matrix WCAG 2.1 Contrast

D9C7AF
03030B
54ACAD
B7BCF4
FFF4D6
—
12.5
AAA
1.6
Fail
1.1
Fail
1.5
Fail
12.5
AAA
—
7.7
AAA
11.3
AAA
18.8
AAA
1.6
Fail
7.7
AAA
—
1.5
Fail
2.4
Fail
1.1
Fail
11.3
AAA
1.5
Fail
—
1.7
Fail
1.5
Fail
18.8
AAA
2.4
Fail
1.7
Fail
—
White BG
1.6Fail
20.6AAA
2.7Fail
1.8Fail
1.1Fail
Black BG
12.7AAA
1.0Fail
7.9AAA
11.5AAA
19.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D1B5
030309
7A7BAD
B9B9E6
FAFADD

Deuteranopia

D2D4B6
030309
756EAD
B9B9E3
FBFCDF

Tritanopia

D8B9BA
030807
58ADAD
B7DCD9
FEE3E4

Achromatopsia

CACACA
040404
929292
C1C1C1
F4F4F4

Shades & Tints Shades & Tints

#D9C7AF

Dark
Light

#03030B

Dark
Light

#54ACAD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d9c7af;
  --color-2: #03030b;
  --color-3: #54acad;
  --color-4: #b7bcf4;
  --color-5: #fff4d6;
}

SCSS

$color-1: #d9c7af;
$color-2: #03030b;
$color-3: #54acad;
$color-4: #b7bcf4;
$color-5: #fff4d6;

TAILWIND

colors: {
  'brand-1': '#d9c7af',
  'brand-2': '#03030b',
  'brand-3': '#54acad',
  'brand-4': '#b7bcf4',
  'brand-5': '#fff4d6',
}

RGB Array

[217, 199, 175], [3, 3, 11], [84, 172, 173], [183, 188, 244], [255, 244, 214]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D9C7AF, #03030B, #54ACAD, #B7BCF4, #FFF4D6 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d9c7af; --color-2: #03030b; --color-3: #54acad; --color-4: #b7bcf4; --color-5: #fff4d6. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color