#D8B657 + #DCD2AC + #A7BE96 + #78A198 + #5A7392 · spring - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D8B657

Ginger · SandyBrown · Sunflower

HEX

#D8B657

RGB

rgb(216, 182, 87)

HSL

hsl(44, 62%, 59%)

HSB

hsb(44, 60%, 85%)

CMYK

cmyk(0%, 16%, 60%, 15%)

Oklch

oklch(78.8% 0.120 89.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#DCD2AC

Goose Yellow · Wheat · Lemon Cream

HEX

#DCD2AC

RGB

rgb(220, 210, 172)

HSL

hsl(47, 41%, 77%)

HSB

hsb(47, 22%, 86%)

CMYK

cmyk(0%, 5%, 22%, 14%)

Oklch

oklch(86.2% 0.052 95.0)

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

#A7BE96

Celadon · DarkSeaGreen · Apple Green

HEX

#A7BE96

RGB

rgb(167, 190, 150)

HSL

hsl(95, 24%, 67%)

HSB

hsb(95, 21%, 75%)

CMYK

cmyk(12%, 0%, 21%, 25%)

Oklch

oklch(77.3% 0.061 132.1)

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

#78A198

Mineral Blue · LightSlateGray · Lake Green

HEX

#78A198

RGB

rgb(120, 161, 152)

HSL

hsl(167, 18%, 55%)

HSB

hsb(167, 25%, 63%)

CMYK

cmyk(25%, 0%, 6%, 37%)

Oklch

oklch(67.6% 0.047 179.8)

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

#5A7392

Indigo · SlateGray · Navy Blue

HEX

#5A7392

RGB

rgb(90, 115, 146)

HSL

hsl(213, 24%, 46%)

HSB

hsb(213, 38%, 57%)

CMYK

cmyk(38%, 21%, 0%, 43%)

Oklch

oklch(54.8% 0.057 254.1)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8B657

5678D7

Analogous

D77456

D8B657

B9D756

Triadic

D8B657

56D7B5

B556D7

Split-Comp.

D8B657

56B9D7

7456D7

Tetradic

D8B657

56D774

5678D7

D756B9

Contrast Matrix WCAG 2.1 Contrast

D8B657	DCD2AC	A7BE96	78A198	5A7392
—	1.3 Fail	1.0 Fail	1.5 Fail	2.5 Fail
1.3 Fail	—	1.3 Fail	1.9 Fail	3.2 AA Large
1.0 Fail	1.3 Fail	—	1.4 Fail	2.4 Fail
1.5 Fail	1.9 Fail	1.4 Fail	—	1.7 Fail
2.5 Fail	3.2 AA Large	2.4 Fail	1.7 Fail	—

White BG

2.0Fail

1.5Fail

2.0Fail

2.9Fail

4.9AA

Black BG

10.7AAA

13.9AAA

10.4AAA

7.3AAA

4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C96E

D8D8B5

B1B1A0

8A8A9A

65658A

Deuteranopia

CBCE74

D8D9B7

B0AEA2

87849B

636289

Tritanopia

D68084

DCBCBE

A8A7A9

7A9C9C

5B8583

Achromatopsia

B5B5B5

D1D1D1

B3B3B3

949494

6F6F6F

Shades & Tints Shades & Tints

#D8B657

Dark

Light

#DCD2AC

Dark

Light

#A7BE96

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8b657;
  --color-2: #dcd2ac;
  --color-3: #a7be96;
  --color-4: #78a198;
  --color-5: #5a7392;
}

SCSS

$color-1: #d8b657;
$color-2: #dcd2ac;
$color-3: #a7be96;
$color-4: #78a198;
$color-5: #5a7392;

TAILWIND

colors: {
  'brand-1': '#d8b657',
  'brand-2': '#dcd2ac',
  'brand-3': '#a7be96',
  'brand-4': '#78a198',
  'brand-5': '#5a7392',
}

RGB Array

[216, 182, 87], [220, 210, 172], [167, 190, 150], [120, 161, 152], [90, 115, 146]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #D8B657, #DCD2AC, #A7BE96, #78A198, #5A7392 is ideal for: corporate websites, product showcases, portfolios. 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: #d8b657; --color-2: #dcd2ac; --color-3: #a7be96; --color-4: #78a198; --color-5: #5a7392. 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. 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 spring-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