← Back to Editor

#FFCC78 · #E57B62 · #9D4C54 · #654851 · #B8C89F

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

#FFCC78

Goose Yellow · Khaki · Warm Sun

HEX
#FFCC78
RGB
rgb(255, 204, 120)
HSL
hsl(37, 100%, 74%)
HSB
hsb(37, 53%, 100%)
CMYK
cmyk(0%, 20%, 53%, 0%)
Oklch
oklch(87.3% 0.117 78.8)

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

#E57B62

Peach Pink · Salmon · Coral Red

HEX
#E57B62
RGB
rgb(229, 123, 98)
HSL
hsl(11, 72%, 64%)
HSB
hsb(11, 57%, 90%)
CMYK
cmyk(0%, 46%, 57%, 10%)
Oklch
oklch(69.7% 0.137 34.3)

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

#9D4C54

Crimson · Sienna · Passion Red

HEX
#9D4C54
RGB
rgb(157, 76, 84)
HSL
hsl(354, 35%, 46%)
HSB
hsb(354, 52%, 62%)
CMYK
cmyk(0%, 52%, 46%, 38%)
Oklch
oklch(52.0% 0.108 15.4)

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

#654851

Dark Violet · DimGray · Camellia

HEX
#654851
RGB
rgb(101, 72, 81)
HSL
hsl(341, 17%, 34%)
HSB
hsb(341, 29%, 40%)
CMYK
cmyk(0%, 29%, 20%, 60%)
Oklch
oklch(43.6% 0.042 358.6)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#B8C89F

Willow Green · Silver · Apple Green

HEX
#B8C89F
RGB
rgb(184, 200, 159)
HSL
hsl(83, 27%, 70%)
HSB
hsb(83, 21%, 78%)
CMYK
cmyk(8%, 0%, 21%, 22%)
Oklch
oklch(81.0% 0.058 125.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFCC78
7AADFF

Analogous

FF8A7A
FFCC78
F0FF7A

Triadic

FFCC78
7AFFCC
CC7AFF

Split-Comp.

FFCC78
7AF0FF
8A7AFF

Tetradic

FFCC78
7AFF8A
7AADFF
FF7AF0

Contrast Matrix WCAG 2.1 Contrast

FFCC78
E57B62
9D4C54
654851
B8C89F
—
1.9
Fail
3.9
AA Large
5.4
AA
1.2
Fail
1.9
Fail
—
2.0
Fail
2.8
Fail
1.6
Fail
3.9
AA Large
2.0
Fail
—
1.4
Fail
3.3
AA Large
5.4
AA
2.8
Fail
1.4
Fail
—
4.5
AA
1.2
Fail
1.6
Fail
3.3
AA Large
4.5
AA
—
White BG
1.5Fail
2.9Fail
5.8AA
8.1AAA
1.8Fail
Black BG
14.2AAA
7.3AAA
3.6AA Large
2.6Fail
11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E88C
B7B668
7A7952
58584F
BFBFA9

Deuteranopia

ECF091
BDC56A
7F8552
5A5C4E
BEBDAB

Tritanopia

FC9CA0
E06D6E
995150
644D4D
B9B1B2

Achromatopsia

D2D2D2
989898
656565
525252
BFBFBF

Shades & Tints Shades & Tints

#FFCC78

Dark
Light

#E57B62

Dark
Light

#9D4C54

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffcc78;
  --color-2: #e57b62;
  --color-3: #9d4c54;
  --color-4: #654851;
  --color-5: #b8c89f;
}

SCSS

$color-1: #ffcc78;
$color-2: #e57b62;
$color-3: #9d4c54;
$color-4: #654851;
$color-5: #b8c89f;

TAILWIND

colors: {
  'brand-1': '#ffcc78',
  'brand-2': '#e57b62',
  'brand-3': '#9d4c54',
  'brand-4': '#654851',
  'brand-5': '#b8c89f',
}

RGB Array

[255, 204, 120], [229, 123, 98], [157, 76, 84], [101, 72, 81], [184, 200, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFCC78, #E57B62, #9D4C54, #654851, #B8C89F 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: #ffcc78; --color-2: #e57b62; --color-3: #9d4c54; --color-4: #654851; --color-5: #b8c89f. 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