← Back to Editor

#D5D6A1 · #C3D987 · #7DC97F · #5BA68D · #4A463D

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

#D5D6A1

Fresh Green · Wheat · Sunflower

HEX
#D5D6A1
RGB
rgb(213, 214, 161)
HSL
hsl(61, 39%, 74%)
HSB
hsb(61, 25%, 84%)
CMYK
cmyk(0%, 0%, 25%, 16%)
Oklch
oklch(86.2% 0.070 108.7)

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

#C3D987

Willow Green · Tan · Apple Green

HEX
#C3D987
RGB
rgb(195, 217, 135)
HSL
hsl(76, 52%, 69%)
HSB
hsb(76, 38%, 85%)
CMYK
cmyk(10%, 0%, 38%, 15%)
Oklch
oklch(85.0% 0.109 121.0)

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

#7DC97F

Celadon · DarkSeaGreen · Apple Green

HEX
#7DC97F
RGB
rgb(125, 201, 127)
HSL
hsl(122, 41%, 64%)
HSB
hsb(122, 38%, 79%)
CMYK
cmyk(38%, 0%, 37%, 21%)
Oklch
oklch(76.8% 0.129 144.8)

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

#5BA68D

Mineral Blue · CadetBlue · Mint Ice

HEX
#5BA68D
RGB
rgb(91, 166, 141)
HSL
hsl(160, 30%, 50%)
HSB
hsb(160, 45%, 65%)
CMYK
cmyk(45%, 0%, 15%, 35%)
Oklch
oklch(66.9% 0.085 170.0)

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

#4A463D

Ochre · DarkSlateGray · Honey Gold

HEX
#4A463D
RGB
rgb(74, 70, 61)
HSL
hsl(42, 10%, 26%)
HSB
hsb(42, 18%, 29%)
CMYK
cmyk(0%, 5%, 18%, 71%)
Oklch
oklch(39.5% 0.016 86.9)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D5D6A1
A4A3D7

Analogous

D7BEA3
D5D6A1
BCD7A3

Triadic

D5D6A1
A3D6D7
D7A3D6

Split-Comp.

D5D6A1
A3BCD7
BEA3D7

Tetradic

D5D6A1
A3D7BE
A4A3D7
D7A3BC

Contrast Matrix WCAG 2.1 Contrast

D5D6A1
C3D987
7DC97F
5BA68D
4A463D
—
1.0
Fail
1.3
Fail
1.9
Fail
6.2
AA
1.0
Fail
—
1.3
Fail
1.9
Fail
6.1
AA
1.3
Fail
1.3
Fail
—
1.4
Fail
4.7
AA
1.9
Fail
1.9
Fail
1.4
Fail
—
3.3
AA Large
6.2
AA
6.1
AA
4.7
AA
3.3
AA Large
—
White BG
1.5Fail
1.5Fail
2.0Fail
2.9Fail
9.4AAA
Black BG
14.0AAA
13.6AAA
10.5AAA
7.3AAA
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D5AE
CDCD9B
9E9F91
7B7C93
48483F

Deuteranopia

D5D5B1
CBCAA0
9A9495
777295
494940

Tritanopia

D5B8BA
C4ABAE
819FA2
5F9899
4A4141

Achromatopsia

D0D0D0
C9C9C9
AAAAAA
8D8D8D
464646

Shades & Tints Shades & Tints

#D5D6A1

Dark
Light

#C3D987

Dark
Light

#7DC97F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d5d6a1;
  --color-2: #c3d987;
  --color-3: #7dc97f;
  --color-4: #5ba68d;
  --color-5: #4a463d;
}

SCSS

$color-1: #d5d6a1;
$color-2: #c3d987;
$color-3: #7dc97f;
$color-4: #5ba68d;
$color-5: #4a463d;

TAILWIND

colors: {
  'brand-1': '#d5d6a1',
  'brand-2': '#c3d987',
  'brand-3': '#7dc97f',
  'brand-4': '#5ba68d',
  'brand-5': '#4a463d',
}

RGB Array

[213, 214, 161], [195, 217, 135], [125, 201, 127], [91, 166, 141], [74, 70, 61]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D5D6A1, #C3D987, #7DC97F, #5BA68D, #4A463D 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: #d5d6a1; --color-2: #c3d987; --color-3: #7dc97f; --color-4: #5ba68d; --color-5: #4a463d. 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