#D97757 + #DEA46A + #D9CB73 + #C6DE83 + #D3E39D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D97757

Tangerine · Coral · Warm Sun

HEX

#D97757

RGB

rgb(217, 119, 87)

HSL

hsl(15, 63%, 60%)

HSB

hsb(15, 60%, 85%)

CMYK

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

Oklch

oklch(67.2% 0.131 38.8)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#DEA46A

Ginger · DarkSalmon · Warm Sun

HEX

#DEA46A

RGB

rgb(222, 164, 106)

HSL

hsl(30, 64%, 64%)

HSB

hsb(30, 52%, 87%)

CMYK

cmyk(0%, 26%, 52%, 13%)

Oklch

oklch(76.1% 0.101 65.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#D9CB73

Fresh Green · BurlyWood · Sunflower

HEX

#D9CB73

RGB

rgb(217, 203, 115)

HSL

hsl(52, 57%, 65%)

HSB

hsb(52, 47%, 85%)

CMYK

cmyk(0%, 6%, 47%, 15%)

Oklch

oklch(83.5% 0.111 100.4)

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

#C6DE83

Willow Green · Khaki · Apple Green

HEX

#C6DE83

RGB

rgb(198, 222, 131)

HSL

hsl(76, 58%, 69%)

HSB

hsb(76, 41%, 87%)

CMYK

cmyk(11%, 0%, 41%, 13%)

Oklch

oklch(86.2% 0.119 121.0)

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

#D3E39D

Willow Green · Khaki · Apple Green

HEX

#D3E39D

RGB

rgb(211, 227, 157)

HSL

hsl(74, 56%, 75%)

HSB

hsb(74, 31%, 89%)

CMYK

cmyk(7%, 0%, 31%, 11%)

Oklch

oklch(88.7% 0.093 118.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D97757

59B9D9

Analogous

D95979

D97757

D9B959

Triadic

D97757

59D979

7959D9

Split-Comp.

D97757

59D9B9

5979D9

Tetradic

D97757

79D959

59B9D9

B959D9

Contrast Matrix WCAG 2.1 Contrast

D97757	DEA46A	D9CB73	C6DE83	D3E39D
—	1.4 Fail	1.9 Fail	2.1 Fail	2.3 Fail
1.4 Fail	—	1.3 Fail	1.5 Fail	1.6 Fail
1.9 Fail	1.3 Fail	—	1.1 Fail	1.2 Fail
2.1 Fail	1.5 Fail	1.1 Fail	—	1.1 Fail
2.3 Fail	1.6 Fail	1.2 Fail	1.1 Fail	—

White BG

3.1AA Large

2.2Fail

1.6Fail

1.5Fail

1.4Fail

Black BG

6.7AA

9.6AAA

12.7AAA

14.2AAA

15.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAE5F

C5C478

D3D388

D0D199

DADAAE

Deuteranopia

B4BC61

C8CD7B

D4D58D

CFCD9E

D9D8B2

Tritanopia

D46566

DB8386

D8999D

C7AAAE

D4BBBE

Achromatopsia

919191

AFAFAF

C5C5C5

CCCCCC

D6D6D6

Shades & Tints Shades & Tints

#D97757

Dark

Light

#DEA46A

Dark

Light

#D9CB73

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d97757;
  --color-2: #dea46a;
  --color-3: #d9cb73;
  --color-4: #c6de83;
  --color-5: #d3e39d;
}

SCSS

$color-1: #d97757;
$color-2: #dea46a;
$color-3: #d9cb73;
$color-4: #c6de83;
$color-5: #d3e39d;

TAILWIND

colors: {
  'brand-1': '#d97757',
  'brand-2': '#dea46a',
  'brand-3': '#d9cb73',
  'brand-4': '#c6de83',
  'brand-5': '#d3e39d',
}

RGB Array

[217, 119, 87], [222, 164, 106], [217, 203, 115], [198, 222, 131], [211, 227, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D97757, #DEA46A, #D9CB73, #C6DE83, #D3E39D is ideal for: health products, baby brands, fresh-style blogs. 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: #d97757; --color-2: #dea46a; --color-3: #d9cb73; --color-4: #c6de83; --color-5: #d3e39d. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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