← Back to Editor

#D5CCA1 · #AFC3A8 · #A38A86 · #A24847 · #444023

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#D5CCA1

Fresh Green · Tan · Sunflower

HEX
#D5CCA1
RGB
rgb(213, 204, 161)
HSL
hsl(50, 38%, 73%)
HSB
hsb(50, 24%, 84%)
CMYK
cmyk(0%, 4%, 24%, 16%)
Oklch
oklch(84.2% 0.058 97.6)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#AFC3A8

Celadon · DarkGray · Apple Green

HEX
#AFC3A8
RGB
rgb(175, 195, 168)
HSL
hsl(104, 18%, 71%)
HSB
hsb(104, 14%, 76%)
CMYK
cmyk(10%, 0%, 14%, 24%)
Oklch
oklch(79.4% 0.043 137.6)

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

#A38A86

Crimson · Gray · Passion Red

HEX
#A38A86
RGB
rgb(163, 138, 134)
HSL
hsl(8, 14%, 58%)
HSB
hsb(8, 18%, 64%)
CMYK
cmyk(0%, 15%, 18%, 36%)
Oklch
oklch(65.5% 0.031 28.6)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#A24847

Crimson · Sienna · Passion Red

HEX
#A24847
RGB
rgb(162, 72, 71)
HSL
hsl(1, 39%, 46%)
HSB
hsb(1, 56%, 64%)
CMYK
cmyk(0%, 56%, 56%, 36%)
Oklch
oklch(51.8% 0.120 22.8)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#444023

Autumn Sage · DarkOliveGreen · Amber Gold

HEX
#444023
RGB
rgb(68, 64, 35)
HSL
hsl(53, 32%, 20%)
HSB
hsb(53, 49%, 27%)
CMYK
cmyk(0%, 6%, 49%, 73%)
Oklch
oklch(36.8% 0.045 101.5)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D5CCA1
A0A9D4

Analogous

D4B1A0
D5CCA1
C3D4A0

Triadic

D5CCA1
A0D4CC
CCA0D4

Split-Comp.

D5CCA1
A0C3D4
B1A0D4

Tetradic

D5CCA1
A0D4B1
A0A9D4
D4A0C3

Contrast Matrix WCAG 2.1 Contrast

D5CCA1
AFC3A8
A38A86
A24847
444023
—
1.2
Fail
2.0
Fail
3.7
AA Large
6.5
AA
1.2
Fail
—
1.7
Fail
3.1
AA Large
5.6
AA
2.0
Fail
1.7
Fail
—
1.8
Fail
3.3
AA Large
3.7
AA Large
3.1
AA Large
1.8
Fail
—
1.8
Fail
6.5
AA
5.6
AA
3.3
AA Large
1.8
Fail
—
White BG
1.6Fail
1.9Fail
3.2AA Large
5.9AA
10.5AAA
Black BG
13.0AAA
11.2AAA
6.5AA
3.6AA Large
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D1AB
B8B8AF
989887
7B7A47
42422A

Deuteranopia

D2D2AE
B7B5B0
9A9C87
808747
43432C

Tritanopia

D5B4B5
B0B4B5
A28888
9E4747
443031

Achromatopsia

CACACA
BABABA
919191
636363
3E3E3E

Shades & Tints Shades & Tints

#D5CCA1

Dark
Light

#AFC3A8

Dark
Light

#A38A86

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d5cca1;
  --color-2: #afc3a8;
  --color-3: #a38a86;
  --color-4: #a24847;
  --color-5: #444023;
}

SCSS

$color-1: #d5cca1;
$color-2: #afc3a8;
$color-3: #a38a86;
$color-4: #a24847;
$color-5: #444023;

TAILWIND

colors: {
  'brand-1': '#d5cca1',
  'brand-2': '#afc3a8',
  'brand-3': '#a38a86',
  'brand-4': '#a24847',
  'brand-5': '#444023',
}

RGB Array

[213, 204, 161], [175, 195, 168], [163, 138, 134], [162, 72, 71], [68, 64, 35]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D5CCA1, #AFC3A8, #A38A86, #A24847, #444023 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: #d5cca1; --color-2: #afc3a8; --color-3: #a38a86; --color-4: #a24847; --color-5: #444023. 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