← Back to Editor

#FF887A · #EF9F78 · #DBAB81 · #CAAB95 · #AEAAB3

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FF887A

Peach Pink · Salmon · Coral Red

HEX
#FF887A
RGB
rgb(255, 136, 122)
HSL
hsl(6, 100%, 74%)
HSB
hsb(6, 52%, 100%)
CMYK
cmyk(0%, 47%, 52%, 0%)
Oklch
oklch(75.5% 0.147 28.0)

TraditionalPeach Pink」· PaintCoral Red」· Creative Blush Sunrise

#EF9F78

Apricot · DarkSalmon · Warm Sun

HEX
#EF9F78
RGB
rgb(239, 159, 120)
HSL
hsl(20, 79%, 70%)
HSB
hsb(20, 50%, 94%)
CMYK
cmyk(0%, 33%, 50%, 6%)
Oklch
oklch(77.3% 0.109 46.6)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

#DBAB81

Apricot · BurlyWood · Warm Sun

HEX
#DBAB81
RGB
rgb(219, 171, 129)
HSL
hsl(28, 56%, 68%)
HSB
hsb(28, 41%, 86%)
CMYK
cmyk(0%, 22%, 41%, 14%)
Oklch
oklch(77.5% 0.080 62.4)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

#CAAB95

Apricot · Tan · Warm Sun

HEX
#CAAB95
RGB
rgb(202, 171, 149)
HSL
hsl(25, 33%, 69%)
HSB
hsb(25, 26%, 79%)
CMYK
cmyk(0%, 15%, 26%, 21%)
Oklch
oklch(76.3% 0.047 57.3)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

#AEAAB3

Ash · DarkGray · Silver Sand

HEX
#AEAAB3
RGB
rgb(174, 170, 179)
HSL
hsl(267, 6%, 68%)
HSB
hsb(267, 5%, 70%)
CMYK
cmyk(3%, 5%, 0%, 30%)
Oklch
oklch(74.4% 0.013 306.0)

TraditionalAsh」· PaintSilver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF887A
7AF2FF

Analogous

FF7AAF
FF887A
FFCA7A

Triadic

FF887A
7AFF88
887AFF

Split-Comp.

FF887A
7AFFCA
7AAFFF

Tetradic

FF887A
AFFF7A
7AF2FF
CA7AFF

Contrast Matrix WCAG 2.1 Contrast

FF887A
EF9F78
DBAB81
CAAB95
AEAAB3
1.1
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.0
Fail
1.1
Fail
1.1
Fail
1.1
Fail
White BG
2.3Fail
2.1Fail
2.1Fail
2.1Fail
2.3Fail
Black BG
9.1AAA
9.9AAA
10.2AAA
9.8AAA
9.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCA7D
CCCC81
C6C68B
BDBC9A
ACACB1

Deuteranopia

D2DB7E
D1D784
C9CD8E
BEC19C
ADADB0

Tritanopia

F98081
EB898B
D99395
C89F9F
AEAFAF

Achromatopsia

AAAAAA
B2B2B2
B5B5B5
B2B2B2
ACACAC

Shades & Tints Shades & Tints

#FF887A

Dark
Light

#EF9F78

Dark
Light

#DBAB81

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff887a;
  --color-2: #ef9f78;
  --color-3: #dbab81;
  --color-4: #caab95;
  --color-5: #aeaab3;
}

SCSS

$color-1: #ff887a;
$color-2: #ef9f78;
$color-3: #dbab81;
$color-4: #caab95;
$color-5: #aeaab3;

TAILWIND

colors: {
  'brand-1': '#ff887a',
  'brand-2': '#ef9f78',
  'brand-3': '#dbab81',
  'brand-4': '#caab95',
  'brand-5': '#aeaab3',
}

RGB Array

[255, 136, 122], [239, 159, 120], [219, 171, 129], [202, 171, 149], [174, 170, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF887A, #EF9F78, #DBAB81, #CAAB95, #AEAAB3 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: #ff887a; --color-2: #ef9f78; --color-3: #dbab81; --color-4: #caab95; --color-5: #aeaab3. 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