← Back to Editor

#CF9F77 · #E0D3B0 · #618579 · #5A7763 · #53604F

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 LibraryData Visualization

Color Details Color Details

#CF9F77

Apricot · DarkSalmon · Warm Sun

HEX
#CF9F77
RGB
rgb(207, 159, 119)
HSL
hsl(27, 48%, 64%)
HSB
hsb(27, 43%, 81%)
CMYK
cmyk(0%, 23%, 43%, 19%)
Oklch
oklch(73.8% 0.079 61.0)

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

#E0D3B0

Goose Yellow · Wheat · Lemon Cream

HEX
#E0D3B0
RGB
rgb(224, 211, 176)
HSL
hsl(44, 44%, 78%)
HSB
hsb(44, 21%, 88%)
CMYK
cmyk(0%, 6%, 21%, 12%)
Oklch
oklch(86.8% 0.049 90.1)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#618579

Mineral Blue · SlateGray · Mint Ice

HEX
#618579
RGB
rgb(97, 133, 121)
HSL
hsl(160, 16%, 45%)
HSB
hsb(160, 27%, 52%)
CMYK
cmyk(27%, 0%, 9%, 48%)
Oklch
oklch(58.6% 0.045 172.1)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#5A7763

Celadon · DimGray · Olive Green

HEX
#5A7763
RGB
rgb(90, 119, 99)
HSL
hsl(139, 14%, 41%)
HSB
hsb(139, 24%, 47%)
CMYK
cmyk(24%, 0%, 17%, 53%)
Oklch
oklch(54.0% 0.046 154.5)

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

#53604F

Celadon · DarkOliveGreen · Forest Green

HEX
#53604F
RGB
rgb(83, 96, 79)
HSL
hsl(106, 10%, 34%)
HSB
hsb(106, 18%, 38%)
CMYK
cmyk(14%, 0%, 18%, 62%)
Oklch
oklch(47.3% 0.031 138.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CF9F77
77A8CF

Analogous

CF777C
CF9F77
CFCB77

Triadic

CF9F77
77CF9F
9F77CF

Split-Comp.

CF9F77
77CFCB
777CCF

Tetradic

CF9F77
7CCF77
77A8CF
CB77CF

Contrast Matrix WCAG 2.1 Contrast

CF9F77
E0D3B0
618579
5A7763
53604F
—
1.6
Fail
1.7
Fail
2.1
Fail
2.8
Fail
1.6
Fail
—
2.7
Fail
3.3
AA Large
4.5
AA Large
1.7
Fail
2.7
Fail
—
1.2
Fail
1.6
Fail
2.1
Fail
3.3
AA Large
1.2
Fail
—
1.3
Fail
2.8
Fail
4.5
AA Large
1.6
Fail
1.3
Fail
—
White BG
2.4Fail
1.5Fail
4.1AA Large
4.9AA
6.7AA
Black BG
8.9AAA
14.1AAA
5.1AA
4.3AA Large
3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

BABA81
DADAB8
71717C
676768
595953

Deuteranopia

BDC183
DBDCBB
6F6C7D
656369
585754

Tritanopia

CD888A
DFBFC1
637E7F
5B6C6D
545657

Achromatopsia

A9A9A9
D3D3D3
797979
6C6C6C
5A5A5A

Shades & Tints Shades & Tints

#CF9F77

Dark
Light

#E0D3B0

Dark
Light

#618579

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cf9f77;
  --color-2: #e0d3b0;
  --color-3: #618579;
  --color-4: #5a7763;
  --color-5: #53604f;
}

SCSS

$color-1: #cf9f77;
$color-2: #e0d3b0;
$color-3: #618579;
$color-4: #5a7763;
$color-5: #53604f;

TAILWIND

colors: {
  'brand-1': '#cf9f77',
  'brand-2': '#e0d3b0',
  'brand-3': '#618579',
  'brand-4': '#5a7763',
  'brand-5': '#53604f',
}

RGB Array

[207, 159, 119], [224, 211, 176], [97, 133, 121], [90, 119, 99], [83, 96, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CF9F77, #E0D3B0, #618579, #5A7763, #53604F is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #cf9f77; --color-2: #e0d3b0; --color-3: #618579; --color-4: #5a7763; --color-5: #53604f. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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