← Back to Editor

#FBC86C · #DA8D85 · #967878 · #4CC6A1 · #ADDFAE

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FBC86C

Ginger · SandyBrown · Warm Sun

HEX
#FBC86C
RGB
rgb(251, 200, 108)
HSL
hsl(39, 95%, 70%)
HSB
hsb(39, 57%, 98%)
CMYK
cmyk(0%, 20%, 57%, 2%)
Oklch
oklch(86.0% 0.124 80.6)

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

#DA8D85

Peach Pink · DarkSalmon · Coral Red

HEX
#DA8D85
RGB
rgb(218, 141, 133)
HSL
hsl(6, 53%, 69%)
HSB
hsb(6, 39%, 85%)
CMYK
cmyk(0%, 35%, 39%, 15%)
Oklch
oklch(72.0% 0.095 26.2)

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

#967878

Crimson · Gray · Passion Red

HEX
#967878
RGB
rgb(150, 120, 120)
HSL
hsl(0, 13%, 53%)
HSB
hsb(0, 20%, 59%)
CMYK
cmyk(0%, 20%, 20%, 41%)
Oklch
oklch(60.1% 0.038 18.2)

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

#4CC6A1

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#4CC6A1
RGB
rgb(76, 198, 161)
HSL
hsl(162, 52%, 54%)
HSB
hsb(162, 62%, 78%)
CMYK
cmyk(62%, 0%, 19%, 22%)
Oklch
oklch(74.8% 0.122 169.6)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#ADDFAE

Celadon · Silver · Apple Green

HEX
#ADDFAE
RGB
rgb(173, 223, 174)
HSL
hsl(121, 44%, 78%)
HSB
hsb(121, 22%, 87%)
CMYK
cmyk(22%, 0%, 22%, 13%)
Oklch
oklch(85.6% 0.085 145.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBC86C
6A9DFB

Analogous

FB806A
FBC86C
E5FB6A

Triadic

FBC86C
6AFBC8
C86AFB

Split-Comp.

FBC86C
6AE5FB
806AFB

Tetradic

FBC86C
6AFB80
6A9DFB
FB6AE5

Contrast Matrix WCAG 2.1 Contrast

FBC86C
DA8D85
967878
4CC6A1
ADDFAE
—
1.7
Fail
2.6
Fail
1.4
Fail
1.0
Fail
1.7
Fail
—
1.5
Fail
1.2
Fail
1.7
Fail
2.6
Fail
1.5
Fail
—
1.9
Fail
2.7
Fail
1.4
Fail
1.2
Fail
1.9
Fail
—
1.4
Fail
1.0
Fail
1.7
Fail
2.7
Fail
1.4
Fail
—
White BG
1.5Fail
2.6Fail
4.0AA Large
2.1Fail
1.5Fail
Black BG
13.6AAA
8.1AAA
5.3AA
9.9AAA
13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E482
B9B887
898978
8182AA
C3C3BA

Deuteranopia

E8EC88
BDC387
8B8D78
7A71AC
C0BCBD

Tritanopia

F89498
D68889
957878
52B1B3
B0C3C5

Achromatopsia

CDCDCD
A3A3A3
818181
9D9D9D
CACACA

Shades & Tints Shades & Tints

#FBC86C

Dark
Light

#DA8D85

Dark
Light

#967878

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbc86c;
  --color-2: #da8d85;
  --color-3: #967878;
  --color-4: #4cc6a1;
  --color-5: #addfae;
}

SCSS

$color-1: #fbc86c;
$color-2: #da8d85;
$color-3: #967878;
$color-4: #4cc6a1;
$color-5: #addfae;

TAILWIND

colors: {
  'brand-1': '#fbc86c',
  'brand-2': '#da8d85',
  'brand-3': '#967878',
  'brand-4': '#4cc6a1',
  'brand-5': '#addfae',
}

RGB Array

[251, 200, 108], [218, 141, 133], [150, 120, 120], [76, 198, 161], [173, 223, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FBC86C, #DA8D85, #967878, #4CC6A1, #ADDFAE 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: #fbc86c; --color-2: #da8d85; --color-3: #967878; --color-4: #4cc6a1; --color-5: #addfae. 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