← Back to Editor

#D7CC9C · #9FB79A · #67A298 · #5D5C61 · #521629

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#D7CC9C

Goose Yellow · Tan · Sunflower

HEX
#D7CC9C
RGB
rgb(215, 204, 156)
HSL
hsl(49, 42%, 73%)
HSB
hsb(49, 27%, 84%)
CMYK
cmyk(0%, 5%, 27%, 16%)
Oklch
oklch(84.2% 0.064 96.7)

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

#9FB79A

Celadon · DarkSeaGreen · Apple Green

HEX
#9FB79A
RGB
rgb(159, 183, 154)
HSL
hsl(110, 17%, 66%)
HSB
hsb(110, 16%, 72%)
CMYK
cmyk(13%, 0%, 16%, 28%)
Oklch
oklch(75.3% 0.049 140.3)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#67A298

Mineral Blue · CadetBlue · Lake Green

HEX
#67A298
RGB
rgb(103, 162, 152)
HSL
hsl(170, 24%, 52%)
HSB
hsb(170, 36%, 64%)
CMYK
cmyk(36%, 0%, 6%, 36%)
Oklch
oklch(66.9% 0.064 182.4)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#5D5C61

Ink Gray · DimGray · Charcoal

HEX
#5D5C61
RGB
rgb(93, 92, 97)
HSL
hsl(252, 3%, 37%)
HSB
hsb(252, 5%, 38%)
CMYK
cmyk(4%, 5%, 0%, 62%)
Oklch
oklch(47.7% 0.008 295.3)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#521629

Dark Violet · Maroon · Raspberry

HEX
#521629
RGB
rgb(82, 22, 41)
HSL
hsl(341, 58%, 20%)
HSB
hsb(341, 73%, 32%)
CMYK
cmyk(0%, 73%, 50%, 68%)
Oklch
oklch(30.5% 0.091 4.9)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D7CC9C
9DA8D7

Analogous

D7B09D
D7CC9C
C5D79D

Triadic

D7CC9C
9DD7CC
CC9DD7

Split-Comp.

D7CC9C
9DC5D7
B09DD7

Tetradic

D7CC9C
9DD7B0
9DA8D7
D79DC5

Contrast Matrix WCAG 2.1 Contrast

D7CC9C
9FB79A
67A298
5D5C61
521629
—
1.3
Fail
1.8
Fail
4.1
AA Large
8.6
AAA
1.3
Fail
—
1.3
Fail
3.1
AA Large
6.5
AA
1.8
Fail
1.3
Fail
—
2.3
Fail
4.8
AA
4.1
AA Large
3.1
AA Large
2.3
Fail
—
2.1
Fail
8.6
AAA
6.5
AA
4.8
AA
2.1
Fail
—
White BG
1.6Fail
2.2Fail
2.9Fail
6.6AA
13.9AAA
Black BG
13.0AAA
9.7AAA
7.2AAA
3.2AA Large
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D2D2A8
A9AAA1
81819A
5D5D60
383724

Deuteranopia

D3D4AA
A8A6A3
7D799B
5D5D5F
3C4023

Tritanopia

D6B1B3
A0A7A8
6A9C9D
5D5F5F
4F2120

Achromatopsia

CACACA
ADADAD
8F8F8F
5D5D5D
2A2A2A

Shades & Tints Shades & Tints

#D7CC9C

Dark
Light

#9FB79A

Dark
Light

#67A298

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d7cc9c;
  --color-2: #9fb79a;
  --color-3: #67a298;
  --color-4: #5d5c61;
  --color-5: #521629;
}

SCSS

$color-1: #d7cc9c;
$color-2: #9fb79a;
$color-3: #67a298;
$color-4: #5d5c61;
$color-5: #521629;

TAILWIND

colors: {
  'brand-1': '#d7cc9c',
  'brand-2': '#9fb79a',
  'brand-3': '#67a298',
  'brand-4': '#5d5c61',
  'brand-5': '#521629',
}

RGB Array

[215, 204, 156], [159, 183, 154], [103, 162, 152], [93, 92, 97], [82, 22, 41]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D7CC9C, #9FB79A, #67A298, #5D5C61, #521629 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d7cc9c; --color-2: #9fb79a; --color-3: #67a298; --color-4: #5d5c61; --color-5: #521629. 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 tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. 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