← Back to Editor

#DD9F6F · #AFAB8A · #81B7A4 · #A2BE74 · #C3C544

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

#DD9F6F

Apricot · DarkSalmon · Warm Sun

HEX
#DD9F6F
RGB
rgb(221, 159, 111)
HSL
hsl(26, 62%, 65%)
HSB
hsb(26, 50%, 87%)
CMYK
cmyk(0%, 28%, 50%, 13%)
Oklch
oklch(75.1% 0.097 58.3)

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

#AFAB8A

Fresh Green · DarkGray · Sunflower

HEX
#AFAB8A
RGB
rgb(175, 171, 138)
HSL
hsl(54, 19%, 61%)
HSB
hsb(54, 21%, 69%)
CMYK
cmyk(0%, 2%, 21%, 31%)
Oklch
oklch(73.6% 0.046 101.7)

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

#81B7A4

Jade · DarkSeaGreen · Apple Green

HEX
#81B7A4
RGB
rgb(129, 183, 164)
HSL
hsl(159, 27%, 61%)
HSB
hsb(159, 30%, 72%)
CMYK
cmyk(30%, 0%, 10%, 28%)
Oklch
oklch(73.6% 0.063 170.6)

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

#A2BE74

Grass Green · DarkSeaGreen · Olive Green

HEX
#A2BE74
RGB
rgb(162, 190, 116)
HSL
hsl(83, 36%, 60%)
HSB
hsb(83, 39%, 75%)
CMYK
cmyk(15%, 0%, 39%, 25%)
Oklch
oklch(76.3% 0.104 125.6)

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

#C3C544

Autumn Sage · GoldenRod · Sunflower

HEX
#C3C544
RGB
rgb(195, 197, 68)
HSL
hsl(61, 53%, 52%)
HSB
hsb(61, 65%, 77%)
CMYK
cmyk(1%, 0%, 65%, 23%)
Oklch
oklch(79.8% 0.148 110.2)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DD9F6F
6EADDD

Analogous

DD6E76
DD9F6F
DDD66E

Triadic

DD9F6F
6EDD9E
9E6EDD

Split-Comp.

DD9F6F
6EDDD6
6E76DD

Tetradic

DD9F6F
76DD6E
6EADDD
D66EDD

Contrast Matrix WCAG 2.1 Contrast

DD9F6F
AFAB8A
81B7A4
A2BE74
C3C544
—
1.0
Fail
1.0
Fail
1.1
Fail
1.2
Fail
1.0
Fail
—
1.0
Fail
1.1
Fail
1.3
Fail
1.0
Fail
1.0
Fail
—
1.1
Fail
1.2
Fail
1.1
Fail
1.1
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
White BG
2.3Fail
2.3Fail
2.3Fail
2.1Fail
1.8Fail
Black BG
9.3AAA
9.0AAA
9.2AAA
10.2AAA
11.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C27B
ADAD92
9899A9
AEAE86
C4C463

Deuteranopia

C6CA7D
AEAE94
9591AA
ADAA8A
C4C46B

Tritanopia

DA8486
AF989A
84ACAD
A39497
C37C81

Achromatopsia

ACACAC
A8A8A8
A5A5A5
ADADAD
B6B6B6

Shades & Tints Shades & Tints

#DD9F6F

Dark
Light

#AFAB8A

Dark
Light

#81B7A4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dd9f6f;
  --color-2: #afab8a;
  --color-3: #81b7a4;
  --color-4: #a2be74;
  --color-5: #c3c544;
}

SCSS

$color-1: #dd9f6f;
$color-2: #afab8a;
$color-3: #81b7a4;
$color-4: #a2be74;
$color-5: #c3c544;

TAILWIND

colors: {
  'brand-1': '#dd9f6f',
  'brand-2': '#afab8a',
  'brand-3': '#81b7a4',
  'brand-4': '#a2be74',
  'brand-5': '#c3c544',
}

RGB Array

[221, 159, 111], [175, 171, 138], [129, 183, 164], [162, 190, 116], [195, 197, 68]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DD9F6F, #AFAB8A, #81B7A4, #A2BE74, #C3C544 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: #dd9f6f; --color-2: #afab8a; --color-3: #81b7a4; --color-4: #a2be74; --color-5: #c3c544. 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