← Back to Editor

#FFEBAB · #FBB786 · #FF9877 · #DB645C · #345E5D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#FFEBAB

Goose Yellow · Wheat · Lemon Cream

HEX
#FFEBAB
RGB
rgb(255, 235, 171)
HSL
hsl(46, 100%, 84%)
HSB
hsb(46, 33%, 100%)
CMYK
cmyk(0%, 8%, 33%, 0%)
Oklch
oklch(94.1% 0.084 92.8)

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

#FBB786

Apricot · LightSalmon · Warm Sun

HEX
#FBB786
RGB
rgb(251, 183, 134)
HSL
hsl(25, 94%, 75%)
HSB
hsb(25, 47%, 98%)
CMYK
cmyk(0%, 27%, 47%, 2%)
Oklch
oklch(83.2% 0.102 56.6)

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

#FF9877

Apricot · LightSalmon · Warm Sun

HEX
#FF9877
RGB
rgb(255, 152, 119)
HSL
hsl(15, 100%, 73%)
HSB
hsb(15, 53%, 100%)
CMYK
cmyk(0%, 40%, 53%, 0%)
Oklch
oklch(78.0% 0.132 38.5)

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

#DB645C

Peach Pink · Tomato · Coral Red

HEX
#DB645C
RGB
rgb(219, 100, 92)
HSL
hsl(4, 64%, 61%)
HSB
hsb(4, 58%, 86%)
CMYK
cmyk(0%, 54%, 58%, 14%)
Oklch
oklch(64.7% 0.151 26.0)

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

#345E5D

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#345E5D
RGB
rgb(52, 94, 93)
HSL
hsl(179, 29%, 29%)
HSB
hsb(179, 45%, 37%)
CMYK
cmyk(45%, 0%, 1%, 63%)
Oklch
oklch(45.1% 0.047 193.6)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFEBAB
ADC0FF

Analogous

FFC3AD
FFEBAB
E9FFAD

Triadic

FFEBAB
ADFFEC
ECADFF

Split-Comp.

FFEBAB
ADE9FF
C3ADFF

Tetradic

FFEBAB
ADFFC3
ADC0FF
FFADE9

Contrast Matrix WCAG 2.1 Contrast

FFEBAB
FBB786
FF9877
DB645C
345E5D
—
1.5
Fail
1.8
Fail
3.0
Fail
6.1
AA
1.5
Fail
—
1.2
Fail
2.0
Fail
4.2
AA Large
1.8
Fail
1.2
Fail
—
1.7
Fail
3.4
AA Large
3.0
Fail
2.0
Fail
1.7
Fail
—
2.1
Fail
6.1
AA
4.2
AA Large
3.4
AA Large
2.1
Fail
—
White BG
1.2Fail
1.7Fail
2.1Fail
3.5AA Large
7.2AAA
Black BG
17.7AAA
12.2AAA
10.0AAA
6.0AA
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F6F6BA
DEDD92
D2D17F
A7A65E
46475D

Deuteranopia

F8F9BE
E2E795
D8E081
AEB75E
44415D

Tritanopia

FEC7C9
F89B9D
FA8587
D55F60
365D5D

Achromatopsia

EAEAEA
C6C6C6
B3B3B3
878787
515151

Shades & Tints Shades & Tints

#FFEBAB

Dark
Light

#FBB786

Dark
Light

#FF9877

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffebab;
  --color-2: #fbb786;
  --color-3: #ff9877;
  --color-4: #db645c;
  --color-5: #345e5d;
}

SCSS

$color-1: #ffebab;
$color-2: #fbb786;
$color-3: #ff9877;
$color-4: #db645c;
$color-5: #345e5d;

TAILWIND

colors: {
  'brand-1': '#ffebab',
  'brand-2': '#fbb786',
  'brand-3': '#ff9877',
  'brand-4': '#db645c',
  'brand-5': '#345e5d',
}

RGB Array

[255, 235, 171], [251, 183, 134], [255, 152, 119], [219, 100, 92], [52, 94, 93]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFEBAB, #FBB786, #FF9877, #DB645C, #345E5D is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ffebab; --color-2: #fbb786; --color-3: #ff9877; --color-4: #db645c; --color-5: #345e5d. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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