← Back to Editor

#EF865D · #FFB770 · #DCE7A5 · #B3BE79 · #7B8257

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

#EF865D

Apricot · Coral · Warm Sun

HEX
#EF865D
RGB
rgb(239, 134, 93)
HSL
hsl(17, 82%, 65%)
HSB
hsb(17, 61%, 94%)
CMYK
cmyk(0%, 44%, 61%, 6%)
Oklch
oklch(72.6% 0.140 41.7)

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

#FFB770

Goose Yellow · LightSalmon · Warm Sun

HEX
#FFB770
RGB
rgb(255, 183, 112)
HSL
hsl(30, 100%, 72%)
HSB
hsb(30, 56%, 100%)
CMYK
cmyk(0%, 28%, 56%, 0%)
Oklch
oklch(83.3% 0.121 64.4)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#DCE7A5

Willow Green · Wheat · Apple Green

HEX
#DCE7A5
RGB
rgb(220, 231, 165)
HSL
hsl(70, 58%, 78%)
HSB
hsb(70, 29%, 91%)
CMYK
cmyk(5%, 0%, 29%, 9%)
Oklch
oklch(90.4% 0.086 115.9)

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

#B3BE79

Willow Green · Tan · Apple Green

HEX
#B3BE79
RGB
rgb(179, 190, 121)
HSL
hsl(70, 35%, 61%)
HSB
hsb(70, 36%, 75%)
CMYK
cmyk(6%, 0%, 36%, 25%)
Oklch
oklch(77.7% 0.092 116.0)

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

#7B8257

Grass Green · DimGray · Olive Green

HEX
#7B8257
RGB
rgb(123, 130, 87)
HSL
hsl(70, 20%, 43%)
HSB
hsb(70, 33%, 51%)
CMYK
cmyk(5%, 0%, 33%, 49%)
Oklch
oklch(59.0% 0.062 115.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EF865D
5DC5EF

Analogous

EF5D7C
EF865D
EFCF5D

Triadic

EF865D
5DEF86
865DEF

Split-Comp.

EF865D
5DEFCF
5D7CEF

Tetradic

EF865D
7CEF5D
5DC5EF
CF5DEF

Contrast Matrix WCAG 2.1 Contrast

EF865D
FFB770
DCE7A5
B3BE79
7B8257
—
1.5
Fail
1.9
Fail
1.3
Fail
1.6
Fail
1.5
Fail
—
1.3
Fail
1.2
Fail
2.4
Fail
1.9
Fail
1.3
Fail
—
1.5
Fail
3.1
AA Large
1.3
Fail
1.2
Fail
1.5
Fail
—
2.0
Fail
1.6
Fail
2.4
Fail
3.1
AA Large
2.0
Fail
—
White BG
2.5Fail
1.7Fail
1.3Fail
2.0Fail
4.1AA Large
Black BG
8.2AAA
12.3AAA
16.0AAA
10.6AAA
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C167
E0DF81
E1E1B5
B8B88A
7E7E61

Deuteranopia

C8CF69
E4E985
E0DFB9
B7B68E
7E7D64

Tritanopia

EA6F70
FB8F92
DDC2C4
B4979A
7B6A6B

Achromatopsia

A1A1A1
C4C4C4
DCDCDC
B3B3B3
7B7B7B

Shades & Tints Shades & Tints

#EF865D

Dark
Light

#FFB770

Dark
Light

#DCE7A5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ef865d;
  --color-2: #ffb770;
  --color-3: #dce7a5;
  --color-4: #b3be79;
  --color-5: #7b8257;
}

SCSS

$color-1: #ef865d;
$color-2: #ffb770;
$color-3: #dce7a5;
$color-4: #b3be79;
$color-5: #7b8257;

TAILWIND

colors: {
  'brand-1': '#ef865d',
  'brand-2': '#ffb770',
  'brand-3': '#dce7a5',
  'brand-4': '#b3be79',
  'brand-5': '#7b8257',
}

RGB Array

[239, 134, 93], [255, 183, 112], [220, 231, 165], [179, 190, 121], [123, 130, 87]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EF865D, #FFB770, #DCE7A5, #B3BE79, #7B8257 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: #ef865d; --color-2: #ffb770; --color-3: #dce7a5; --color-4: #b3be79; --color-5: #7b8257. 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