← Back to Editor

#FFBB86 · #D6B795 · #8ABBC2 · #A39C9C · #0986B1

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

#FFBB86

Apricot · LightSalmon · Peach Orange

HEX
#FFBB86
RGB
rgb(255, 187, 134)
HSL
hsl(26, 100%, 76%)
HSB
hsb(26, 47%, 100%)
CMYK
cmyk(0%, 27%, 47%, 0%)
Oklch
oklch(84.3% 0.104 58.7)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#D6B795

Goose Yellow · Tan · Warm Sun

HEX
#D6B795
RGB
rgb(214, 183, 149)
HSL
hsl(31, 44%, 71%)
HSB
hsb(31, 30%, 84%)
CMYK
cmyk(0%, 14%, 30%, 16%)
Oklch
oklch(79.8% 0.058 69.4)

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

#8ABBC2

Sky Blue · DarkGray · Lake Green

HEX
#8ABBC2
RGB
rgb(138, 187, 194)
HSL
hsl(188, 31%, 65%)
HSB
hsb(188, 29%, 76%)
CMYK
cmyk(29%, 4%, 0%, 24%)
Oklch
oklch(76.0% 0.052 207.1)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#A39C9C

Ash · DarkGray · Silver Sand

HEX
#A39C9C
RGB
rgb(163, 156, 156)
HSL
hsl(0, 4%, 63%)
HSB
hsb(0, 4%, 64%)
CMYK
cmyk(0%, 4%, 4%, 36%)
Oklch
oklch(69.9% 0.008 17.4)

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

#0986B1

Lake Blue · LightSeaGreen · Mint Ice

HEX
#0986B1
RGB
rgb(9, 134, 177)
HSL
hsl(195, 90%, 36%)
HSB
hsb(195, 95%, 69%)
CMYK
cmyk(95%, 24%, 0%, 31%)
Oklch
oklch(58.1% 0.114 230.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFBB86
85CAFF

Analogous

FF858D
FFBB86
FFF785

Triadic

FFBB86
85FFBA
BA85FF

Split-Comp.

FFBB86
85FFF7
858DFF

Tetradic

FFBB86
8DFF85
85CAFF
F785FF

Contrast Matrix WCAG 2.1 Contrast

FFBB86
D6B795
8ABBC2
A39C9C
0986B1
—
1.1
Fail
1.3
Fail
1.6
Fail
2.5
Fail
1.1
Fail
—
1.1
Fail
1.4
Fail
2.2
Fail
1.3
Fail
1.1
Fail
—
1.3
Fail
2.0
Fail
1.6
Fail
1.4
Fail
1.3
Fail
—
1.5
Fail
2.5
Fail
2.2
Fail
2.0
Fail
1.5
Fail
—
White BG
1.7Fail
1.9Fail
2.1Fail
2.7Fail
4.2AA Large
Black BG
12.7AAA
11.1AAA
10.0AAA
7.8AAA
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E193
C9C89D
9FA0C0
A0A09C
3F40A7

Deuteranopia

E6EB96
CACD9F
9C99C0
A0A19C
382EA4

Tritanopia

FC9D9F
D4A4A5
8CBFBF
A39C9C
0F9E9D

Achromatopsia

C9C9C9
BCBCBC
ADADAD
9E9E9E
666666

Shades & Tints Shades & Tints

#FFBB86

Dark
Light

#D6B795

Dark
Light

#8ABBC2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffbb86;
  --color-2: #d6b795;
  --color-3: #8abbc2;
  --color-4: #a39c9c;
  --color-5: #0986b1;
}

SCSS

$color-1: #ffbb86;
$color-2: #d6b795;
$color-3: #8abbc2;
$color-4: #a39c9c;
$color-5: #0986b1;

TAILWIND

colors: {
  'brand-1': '#ffbb86',
  'brand-2': '#d6b795',
  'brand-3': '#8abbc2',
  'brand-4': '#a39c9c',
  'brand-5': '#0986b1',
}

RGB Array

[255, 187, 134], [214, 183, 149], [138, 187, 194], [163, 156, 156], [9, 134, 177]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFBB86, #D6B795, #8ABBC2, #A39C9C, #0986B1 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: #ffbb86; --color-2: #d6b795; --color-3: #8abbc2; --color-4: #a39c9c; --color-5: #0986b1. 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