← Back to Editor

#E79E69 · #F8CA72 · #FDEF82 · #97AE80 · #7A9C79

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

#E79E69

Apricot · SandyBrown · Warm Sun

HEX
#E79E69
RGB
rgb(231, 158, 105)
HSL
hsl(25, 72%, 66%)
HSB
hsb(25, 55%, 91%)
CMYK
cmyk(0%, 32%, 55%, 9%)
Oklch
oklch(76.0% 0.111 56.1)

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

#F8CA72

Goose Yellow · BurlyWood · Warm Sun

HEX
#F8CA72
RGB
rgb(248, 202, 114)
HSL
hsl(39, 91%, 71%)
HSB
hsb(39, 54%, 97%)
CMYK
cmyk(0%, 19%, 54%, 3%)
Oklch
oklch(86.1% 0.119 82.3)

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

#FDEF82

Fresh Green · Khaki · Sunflower

HEX
#FDEF82
RGB
rgb(253, 239, 130)
HSL
hsl(53, 97%, 75%)
HSB
hsb(53, 49%, 99%)
CMYK
cmyk(0%, 6%, 49%, 1%)
Oklch
oklch(94.1% 0.131 102.0)

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

#97AE80

Celadon · DarkSeaGreen · Olive Green

HEX
#97AE80
RGB
rgb(151, 174, 128)
HSL
hsl(90, 22%, 59%)
HSB
hsb(90, 26%, 68%)
CMYK
cmyk(13%, 0%, 26%, 32%)
Oklch
oklch(72.1% 0.069 129.6)

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

#7A9C79

Celadon · Gray · Olive Green

HEX
#7A9C79
RGB
rgb(122, 156, 121)
HSL
hsl(118, 15%, 54%)
HSB
hsb(118, 22%, 61%)
CMYK
cmyk(22%, 0%, 22%, 39%)
Oklch
oklch(65.7% 0.064 144.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E79E69
6AB3E7

Analogous

E76A74
E79E69
E7DC6A

Triadic

E79E69
6AE79E
9E6AE7

Split-Comp.

E79E69
6AE7DC
6A74E7

Tetradic

E79E69
74E76A
6AB3E7
DC6AE7

Contrast Matrix WCAG 2.1 Contrast

E79E69
F8CA72
FDEF82
97AE80
7A9C79
—
1.4
Fail
1.9
Fail
1.1
Fail
1.4
Fail
1.4
Fail
—
1.3
Fail
1.6
Fail
2.0
Fail
1.9
Fail
1.3
Fail
—
2.1
Fail
2.6
Fail
1.1
Fail
1.6
Fail
2.1
Fail
—
1.3
Fail
1.4
Fail
2.0
Fail
2.6
Fail
1.3
Fail
—
White BG
2.2Fail
1.5Fail
1.2Fail
2.4Fail
3.1AA Large
Black BG
9.5AAA
13.7AAA
17.8AAA
8.7AAA
6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C776
E4E487
F7F79C
A1A18B
898981

Deuteranopia

CCD179
E7EA8C
F8F9A3
A09E8E
878484

Tritanopia

E38082
F6989C
FCB1B6
989496
7C888A

Achromatopsia

AEAEAE
CECECE
E7E7E7
A2A2A2
8E8E8E

Shades & Tints Shades & Tints

#E79E69

Dark
Light

#F8CA72

Dark
Light

#FDEF82

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e79e69;
  --color-2: #f8ca72;
  --color-3: #fdef82;
  --color-4: #97ae80;
  --color-5: #7a9c79;
}

SCSS

$color-1: #e79e69;
$color-2: #f8ca72;
$color-3: #fdef82;
$color-4: #97ae80;
$color-5: #7a9c79;

TAILWIND

colors: {
  'brand-1': '#e79e69',
  'brand-2': '#f8ca72',
  'brand-3': '#fdef82',
  'brand-4': '#97ae80',
  'brand-5': '#7a9c79',
}

RGB Array

[231, 158, 105], [248, 202, 114], [253, 239, 130], [151, 174, 128], [122, 156, 121]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E79E69, #F8CA72, #FDEF82, #97AE80, #7A9C79 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: #e79e69; --color-2: #f8ca72; --color-3: #fdef82; --color-4: #97ae80; --color-5: #7a9c79. 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