← Back to Editor

#DE6D67 · #4B5C56 · #969D73 · #C1B255 · #897C73

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

#DE6D67

Peach Pink · Salmon · Coral Red

HEX
#DE6D67
RGB
rgb(222, 109, 103)
HSL
hsl(3, 64%, 64%)
HSB
hsb(3, 54%, 87%)
CMYK
cmyk(0%, 51%, 54%, 13%)
Oklch
oklch(66.7% 0.142 24.8)

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

#4B5C56

Mineral Blue · DarkSlateGray · Forest Green

HEX
#4B5C56
RGB
rgb(75, 92, 86)
HSL
hsl(159, 10%, 33%)
HSB
hsb(159, 18%, 36%)
CMYK
cmyk(18%, 0%, 7%, 64%)
Oklch
oklch(45.8% 0.023 171.8)

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

#969D73

Grass Green · Gray · Olive Green

HEX
#969D73
RGB
rgb(150, 157, 115)
HSL
hsl(70, 18%, 53%)
HSB
hsb(70, 27%, 62%)
CMYK
cmyk(4%, 0%, 27%, 38%)
Oklch
oklch(67.9% 0.059 115.7)

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

#C1B255

Autumn Sage · SandyBrown · Sunflower

HEX
#C1B255
RGB
rgb(193, 178, 85)
HSL
hsl(52, 47%, 55%)
HSB
hsb(52, 56%, 76%)
CMYK
cmyk(0%, 8%, 56%, 24%)
Oklch
oklch(75.7% 0.116 100.3)

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

#897C73

Tangerine · Gray · Warm Gray

HEX
#897C73
RGB
rgb(137, 124, 115)
HSL
hsl(25, 9%, 49%)
HSB
hsb(25, 16%, 54%)
CMYK
cmyk(0%, 9%, 16%, 46%)
Oklch
oklch(59.5% 0.021 57.0)

Traditional「Tangerine」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DE6D67
68D8DE

Analogous

DE689D
DE6D67
DEA968

Triadic

DE6D67
68DE6E
6E68DE

Split-Comp.

DE6D67
68DEA9
689DDE

Tetradic

DE6D67
9DDE68
68D8DE
A968DE

Contrast Matrix WCAG 2.1 Contrast

DE6D67
4B5C56
969D73
C1B255
897C73
—
2.2
Fail
1.1
Fail
1.5
Fail
1.2
Fail
2.2
Fail
—
2.5
Fail
3.3
AA Large
1.8
Fail
1.1
Fail
2.5
Fail
—
1.3
Fail
1.4
Fail
1.5
Fail
3.3
AA Large
1.3
Fail
—
1.9
Fail
1.2
Fail
1.8
Fail
1.4
Fail
1.9
Fail
—
White BG
3.2AA Large
7.1AAA
2.9Fail
2.2Fail
4.0AA Large
Black BG
6.5AA
3.0Fail
7.4AAA
9.8AAA
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ADAC68
525357
99997D
BBBA6C
838375

Deuteranopia

B4BC69
515058
999880
BBBD71
848576

Tritanopia

D86A6A
4C5959
968587
C07D81
887777

Achromatopsia

8E8E8E
565656
969696
ACACAC
7F7F7F

Shades & Tints Shades & Tints

#DE6D67

Dark
Light

#4B5C56

Dark
Light

#969D73

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #de6d67;
  --color-2: #4b5c56;
  --color-3: #969d73;
  --color-4: #c1b255;
  --color-5: #897c73;
}

SCSS

$color-1: #de6d67;
$color-2: #4b5c56;
$color-3: #969d73;
$color-4: #c1b255;
$color-5: #897c73;

TAILWIND

colors: {
  'brand-1': '#de6d67',
  'brand-2': '#4b5c56',
  'brand-3': '#969d73',
  'brand-4': '#c1b255',
  'brand-5': '#897c73',
}

RGB Array

[222, 109, 103], [75, 92, 86], [150, 157, 115], [193, 178, 85], [137, 124, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DE6D67, #4B5C56, #969D73, #C1B255, #897C73 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #de6d67; --color-2: #4b5c56; --color-3: #969d73; --color-4: #c1b255; --color-5: #897c73. 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. Restrained colors convey professionalism and trust. 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