← Back to Editor

#FF8C8C · #EBDFBC · #D1BF88 · #99988D · #877B7B

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FF8C8C

Peach Pink · LightCoral · Coral Red

HEX
#FF8C8C
RGB
rgb(255, 140, 140)
HSL
hsl(0, 100%, 77%)
HSB
hsb(0, 45%, 100%)
CMYK
cmyk(0%, 45%, 45%, 0%)
Oklch
oklch(76.5% 0.140 20.8)

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

#EBDFBC

Goose Yellow · Wheat · Lemon Cream

HEX
#EBDFBC
RGB
rgb(235, 223, 188)
HSL
hsl(45, 54%, 83%)
HSB
hsb(45, 20%, 92%)
CMYK
cmyk(0%, 5%, 20%, 8%)
Oklch
oklch(90.4% 0.048 91.3)

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

#D1BF88

Ginger · Tan · Sunflower

HEX
#D1BF88
RGB
rgb(209, 191, 136)
HSL
hsl(45, 44%, 68%)
HSB
hsb(45, 35%, 82%)
CMYK
cmyk(0%, 9%, 35%, 18%)
Oklch
oklch(80.7% 0.075 92.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#99988D

Ash · DarkGray · Silver Sand

HEX
#99988D
RGB
rgb(153, 152, 141)
HSL
hsl(55, 6%, 58%)
HSB
hsb(55, 8%, 60%)
CMYK
cmyk(0%, 1%, 8%, 40%)
Oklch
oklch(67.7% 0.016 102.6)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#877B7B

Ash · Gray · Warm Gray

HEX
#877B7B
RGB
rgb(135, 123, 123)
HSL
hsl(0, 5%, 51%)
HSB
hsb(0, 9%, 53%)
CMYK
cmyk(0%, 9%, 9%, 47%)
Oklch
oklch(59.4% 0.015 17.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF8C8C
8AFFFF

Analogous

FF8AC4
FF8C8C
FFC48A

Triadic

FF8C8C
8AFF8A
8A8AFF

Split-Comp.

FF8C8C
8AFFC4
8AC4FF

Tetradic

FF8C8C
C4FF8A
8AFFFF
C48AFF

Contrast Matrix WCAG 2.1 Contrast

FF8C8C
EBDFBC
D1BF88
99988D
877B7B
—
1.7
Fail
1.2
Fail
1.3
Fail
1.8
Fail
1.7
Fail
—
1.4
Fail
2.2
Fail
3.1
AA Large
1.2
Fail
1.4
Fail
—
1.6
Fail
2.2
Fail
1.3
Fail
2.2
Fail
1.6
Fail
—
1.4
Fail
1.8
Fail
3.1
AA Large
2.2
Fail
1.4
Fail
—
White BG
2.2Fail
1.3Fail
1.8Fail
2.9Fail
4.1AA Large
Black BG
9.4AAA
15.8AAA
11.5AAA
7.2AAA
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CDCC8C
E6E6C4
C9C995
999990
82827B

Deuteranopia

D4DD8C
E7E7C7
CACC99
999990
83837B

Tritanopia

F98C8C
EACBCD
D0A0A2
999292
867B7B

Achromatopsia

AEAEAE
DFDFDF
BEBEBE
979797
7F7F7F

Shades & Tints Shades & Tints

#FF8C8C

Dark
Light

#EBDFBC

Dark
Light

#D1BF88

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff8c8c;
  --color-2: #ebdfbc;
  --color-3: #d1bf88;
  --color-4: #99988d;
  --color-5: #877b7b;
}

SCSS

$color-1: #ff8c8c;
$color-2: #ebdfbc;
$color-3: #d1bf88;
$color-4: #99988d;
$color-5: #877b7b;

TAILWIND

colors: {
  'brand-1': '#ff8c8c',
  'brand-2': '#ebdfbc',
  'brand-3': '#d1bf88',
  'brand-4': '#99988d',
  'brand-5': '#877b7b',
}

RGB Array

[255, 140, 140], [235, 223, 188], [209, 191, 136], [153, 152, 141], [135, 123, 123]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF8C8C, #EBDFBC, #D1BF88, #99988D, #877B7B is ideal for: health products, baby brands, fresh-style blogs. 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: #ff8c8c; --color-2: #ebdfbc; --color-3: #d1bf88; --color-4: #99988d; --color-5: #877b7b. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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