← Back to Editor

#DDA977 · #AF7E56 · #97A260 · #8ED5CF · #B5CDD9

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 Library

Color Details Color Details

#DDA977

Apricot · BurlyWood · Warm Sun

HEX
#DDA977
RGB
rgb(221, 169, 119)
HSL
hsl(29, 60%, 67%)
HSB
hsb(29, 46%, 87%)
CMYK
cmyk(0%, 24%, 46%, 13%)
Oklch
oklch(77.2% 0.090 64.7)

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

#AF7E56

Tangerine · Sienna · Warm Sun

HEX
#AF7E56
RGB
rgb(175, 126, 86)
HSL
hsl(27, 36%, 51%)
HSB
hsb(27, 51%, 69%)
CMYK
cmyk(0%, 28%, 51%, 31%)
Oklch
oklch(63.3% 0.082 59.8)

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

#97A260

Grass Green · Gray · Olive Green

HEX
#97A260
RGB
rgb(151, 162, 96)
HSL
hsl(70, 26%, 51%)
HSB
hsb(70, 41%, 64%)
CMYK
cmyk(7%, 0%, 41%, 36%)
Oklch
oklch(68.8% 0.090 116.6)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#8ED5CF

Jade · SkyBlue · Lake Green

HEX
#8ED5CF
RGB
rgb(142, 213, 207)
HSL
hsl(175, 46%, 70%)
HSB
hsb(175, 33%, 84%)
CMYK
cmyk(33%, 0%, 3%, 16%)
Oklch
oklch(82.4% 0.072 189.2)

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

#B5CDD9

Sky Blue · LightSteelBlue · Cobalt Blue

HEX
#B5CDD9
RGB
rgb(181, 205, 217)
HSL
hsl(200, 32%, 78%)
HSB
hsb(200, 17%, 85%)
CMYK
cmyk(17%, 6%, 0%, 15%)
Oklch
oklch(83.4% 0.031 229.3)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DDA977
78ADDD

Analogous

DD787A
DDA977
DDDC78

Triadic

DDA977
78DDA9
A978DD

Split-Comp.

DDA977
78DDDC
787ADD

Tetradic

DDA977
7ADD78
78ADDD
DC78DD

Contrast Matrix WCAG 2.1 Contrast

DDA977
AF7E56
97A260
8ED5CF
B5CDD9
—
1.7
Fail
1.3
Fail
1.3
Fail
1.3
Fail
1.7
Fail
—
1.3
Fail
2.1
Fail
2.1
Fail
1.3
Fail
1.3
Fail
—
1.6
Fail
1.7
Fail
1.3
Fail
2.1
Fail
1.6
Fail
—
1.0
Fail
1.3
Fail
2.1
Fail
1.7
Fail
1.0
Fail
—
White BG
2.1Fail
3.5AA Large
2.7Fail
1.7Fail
1.7Fail
Black BG
10.0AAA
5.9AA
7.7AAA
12.6AAA
12.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C683
9A9960
9C9C70
ADADD0
BFC0D6

Deuteranopia

CACD86
9DA062
9B9A74
A9A3D1
BEBCD5

Tritanopia

DA8D8F
AD6769
987D7F
92D2D2
B6D4D3

Achromatopsia

B3B3B3
888888
979797
BFBFBF
C7C7C7

Shades & Tints Shades & Tints

#DDA977

Dark
Light

#AF7E56

Dark
Light

#97A260

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dda977;
  --color-2: #af7e56;
  --color-3: #97a260;
  --color-4: #8ed5cf;
  --color-5: #b5cdd9;
}

SCSS

$color-1: #dda977;
$color-2: #af7e56;
$color-3: #97a260;
$color-4: #8ed5cf;
$color-5: #b5cdd9;

TAILWIND

colors: {
  'brand-1': '#dda977',
  'brand-2': '#af7e56',
  'brand-3': '#97a260',
  'brand-4': '#8ed5cf',
  'brand-5': '#b5cdd9',
}

RGB Array

[221, 169, 119], [175, 126, 86], [151, 162, 96], [142, 213, 207], [181, 205, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DDA977, #AF7E56, #97A260, #8ED5CF, #B5CDD9 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: #dda977; --color-2: #af7e56; --color-3: #97a260; --color-4: #8ed5cf; --color-5: #b5cdd9. 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 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