← Back to Editor

#DFDB9C · #96B7A2 · #829B86 · #D7534F · #F07A70

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DFDB9C

Fresh Green · Khaki · Sunflower

HEX
#DFDB9C
RGB
rgb(223, 219, 156)
HSL
hsl(56, 51%, 74%)
HSB
hsb(56, 30%, 87%)
CMYK
cmyk(0%, 2%, 30%, 13%)
Oklch
oklch(88.0% 0.082 104.9)

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

#96B7A2

Celadon · DarkSeaGreen · Apple Green

HEX
#96B7A2
RGB
rgb(150, 183, 162)
HSL
hsl(142, 19%, 65%)
HSB
hsb(142, 18%, 72%)
CMYK
cmyk(18%, 0%, 11%, 28%)
Oklch
oklch(74.9% 0.047 157.2)

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

#829B86

Celadon · Gray · Olive Green

HEX
#829B86
RGB
rgb(130, 155, 134)
HSL
hsl(130, 11%, 56%)
HSB
hsb(130, 16%, 61%)
CMYK
cmyk(16%, 0%, 14%, 39%)
Oklch
oklch(66.4% 0.042 149.7)

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

#D7534F

Vermilion · Tomato · Passion Red

HEX
#D7534F
RGB
rgb(215, 83, 79)
HSL
hsl(2, 63%, 58%)
HSB
hsb(2, 63%, 84%)
CMYK
cmyk(0%, 61%, 63%, 16%)
Oklch
oklch(61.6% 0.167 25.0)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#F07A70

Peach Pink · Salmon · Coral Red

HEX
#F07A70
RGB
rgb(240, 122, 112)
HSL
hsl(5, 81%, 69%)
HSB
hsb(5, 53%, 94%)
CMYK
cmyk(0%, 49%, 53%, 6%)
Oklch
oklch(71.2% 0.147 26.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFDB9C
9B9FDF

Analogous

DFB89B
DFDB9C
C1DF9B

Triadic

DFDB9C
9BDFDA
DA9BDF

Split-Comp.

DFDB9C
9BC1DF
B89BDF

Tetradic

DFDB9C
9BDFB8
9B9FDF
DF9BC1

Contrast Matrix WCAG 2.1 Contrast

DFDB9C
96B7A2
829B86
D7534F
F07A70
—
1.5
Fail
2.1
Fail
2.8
Fail
1.9
Fail
1.5
Fail
—
1.4
Fail
1.8
Fail
1.2
Fail
2.1
Fail
1.4
Fail
—
1.3
Fail
1.1
Fail
2.8
Fail
1.8
Fail
1.3
Fail
—
1.5
Fail
1.9
Fail
1.2
Fail
1.1
Fail
1.5
Fail
—
White BG
1.4Fail
2.2Fail
3.0AA Large
4.0AA Large
2.7Fail
Black BG
14.8AAA
9.6AAA
7.0AA
5.2AA
7.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDDAB
A4A5A7
8D8D8B
9E9D50
BDBC72

Deuteranopia

DEDEAF
A2A0A8
8B8A8C
A6AF50
C4CD73

Tritanopia

DFB7BA
98ABAC
838F90
D05151
EA7475

Achromatopsia

D5D5D5
ABABAB
919191
7A7A7A
9C9C9C

Shades & Tints Shades & Tints

#DFDB9C

Dark
Light

#96B7A2

Dark
Light

#829B86

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfdb9c;
  --color-2: #96b7a2;
  --color-3: #829b86;
  --color-4: #d7534f;
  --color-5: #f07a70;
}

SCSS

$color-1: #dfdb9c;
$color-2: #96b7a2;
$color-3: #829b86;
$color-4: #d7534f;
$color-5: #f07a70;

TAILWIND

colors: {
  'brand-1': '#dfdb9c',
  'brand-2': '#96b7a2',
  'brand-3': '#829b86',
  'brand-4': '#d7534f',
  'brand-5': '#f07a70',
}

RGB Array

[223, 219, 156], [150, 183, 162], [130, 155, 134], [215, 83, 79], [240, 122, 112]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DFDB9C, #96B7A2, #829B86, #D7534F, #F07A70 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: #dfdb9c; --color-2: #96b7a2; --color-3: #829b86; --color-4: #d7534f; --color-5: #f07a70. 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