← Back to Editor

#3D3C31 · #A2CCC6 · #C3D1B5 · #DBD1A2 · #E3DA9D

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

#3D3C31

Autumn Sage · DarkSlateGray · Amber Gold

HEX
#3D3C31
RGB
rgb(61, 60, 49)
HSL
hsl(55, 11%, 22%)
HSB
hsb(55, 20%, 24%)
CMYK
cmyk(0%, 2%, 20%, 76%)
Oklch
oklch(35.4% 0.018 103.0)

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

#A2CCC6

Jade · LightSteelBlue · Lake Green

HEX
#A2CCC6
RGB
rgb(162, 204, 198)
HSL
hsl(171, 29%, 72%)
HSB
hsb(171, 21%, 80%)
CMYK
cmyk(21%, 0%, 3%, 20%)
Oklch
oklch(81.3% 0.045 185.6)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#C3D1B5

Celadon · Silver · Apple Green

HEX
#C3D1B5
RGB
rgb(195, 209, 181)
HSL
hsl(90, 23%, 76%)
HSB
hsb(90, 13%, 82%)
CMYK
cmyk(7%, 0%, 13%, 18%)
Oklch
oklch(84.2% 0.041 129.0)

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

#DBD1A2

Goose Yellow · Wheat · Sunflower

HEX
#DBD1A2
RGB
rgb(219, 209, 162)
HSL
hsl(49, 44%, 75%)
HSB
hsb(49, 26%, 86%)
CMYK
cmyk(0%, 5%, 26%, 14%)
Oklch
oklch(85.7% 0.063 97.5)

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

#E3DA9D

Fresh Green · Khaki · Sunflower

HEX
#E3DA9D
RGB
rgb(227, 218, 157)
HSL
hsl(52, 56%, 75%)
HSB
hsb(52, 31%, 89%)
CMYK
cmyk(0%, 4%, 31%, 11%)
Oklch
oklch(88.1% 0.079 100.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D3C31
32333E

Analogous

3E3732
3D3C31
393E32

Triadic

3D3C31
323E3D
3D323E

Split-Comp.

3D3C31
32393E
37323E

Tetradic

3D3C31
323E37
32333E
3E3239

Contrast Matrix WCAG 2.1 Contrast

3D3C31
A2CCC6
C3D1B5
DBD1A2
E3DA9D
—
6.3
AA
6.9
AA
7.2
AAA
7.8
AAA
6.3
AA
—
1.1
Fail
1.1
Fail
1.2
Fail
6.9
AA
1.1
Fail
—
1.0
Fail
1.1
Fail
7.2
AAA
1.1
Fail
1.0
Fail
—
1.1
Fail
7.8
AAA
1.2
Fail
1.1
Fail
1.1
Fail
—
White BG
11.1AAA
1.8Fail
1.6Fail
1.5Fail
1.4Fail
Black BG
1.9Fail
12.0AAA
13.1AAA
13.7AAA
14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3D3D34
B4B5C7
C9C9BC
D7D7AD
DFDFAC

Deuteranopia

3D3D34
B2AFC8
C8C7BD
D7D8B0
E0E0AF

Tritanopia

3D3636
A4C9C9
C4C1C2
DAB6B8
E3B7BA

Achromatopsia

3B3B3B
BFBFBF
CACACA
CFCFCF
D6D6D6

Shades & Tints Shades & Tints

#3D3C31

Dark
Light

#A2CCC6

Dark
Light

#C3D1B5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d3c31;
  --color-2: #a2ccc6;
  --color-3: #c3d1b5;
  --color-4: #dbd1a2;
  --color-5: #e3da9d;
}

SCSS

$color-1: #3d3c31;
$color-2: #a2ccc6;
$color-3: #c3d1b5;
$color-4: #dbd1a2;
$color-5: #e3da9d;

TAILWIND

colors: {
  'brand-1': '#3d3c31',
  'brand-2': '#a2ccc6',
  'brand-3': '#c3d1b5',
  'brand-4': '#dbd1a2',
  'brand-5': '#e3da9d',
}

RGB Array

[61, 60, 49], [162, 204, 198], [195, 209, 181], [219, 209, 162], [227, 218, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3D3C31, #A2CCC6, #C3D1B5, #DBD1A2, #E3DA9D is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #3d3c31; --color-2: #a2ccc6; --color-3: #c3d1b5; --color-4: #dbd1a2; --color-5: #e3da9d. 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. 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