← Back to Editor

#87B9B0 · #84879A · #97565E · #F84348 · #FDAC03

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

#87B9B0

Jade · DarkSeaGreen · Lake Green

HEX
#87B9B0
RGB
rgb(135, 185, 176)
HSL
hsl(169, 26%, 63%)
HSB
hsb(169, 27%, 73%)
CMYK
cmyk(27%, 0%, 5%, 27%)
Oklch
oklch(74.8% 0.054 182.4)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#84879A

Azure · LightSlateGray · Navy Blue

HEX
#84879A
RGB
rgb(132, 135, 154)
HSL
hsl(232, 10%, 56%)
HSB
hsb(232, 14%, 60%)
CMYK
cmyk(14%, 12%, 0%, 40%)
Oklch
oklch(62.7% 0.029 278.4)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#97565E

Crimson · Sienna · Passion Red

HEX
#97565E
RGB
rgb(151, 86, 94)
HSL
hsl(353, 27%, 46%)
HSB
hsb(353, 43%, 59%)
CMYK
cmyk(0%, 43%, 38%, 41%)
Oklch
oklch(53.1% 0.086 12.5)

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

#F84348

Peach Pink · Tomato · Coral Red

HEX
#F84348
RGB
rgb(248, 67, 72)
HSL
hsl(358, 93%, 62%)
HSB
hsb(358, 73%, 97%)
CMYK
cmyk(0%, 73%, 71%, 3%)
Oklch
oklch(65.2% 0.217 24.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#FDAC03

Ochre · Orange · Honey Gold

HEX
#FDAC03
RGB
rgb(253, 172, 3)
HSL
hsl(41, 98%, 50%)
HSB
hsb(41, 99%, 99%)
CMYK
cmyk(0%, 32%, 99%, 1%)
Oklch
oklch(80.3% 0.169 74.9)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

87B9B0
B98891

Analogous

88B998
87B9B0
88AAB9

Triadic

87B9B0
B088B9
B9B088

Split-Comp.

87B9B0
B988AA
B99888

Tetradic

87B9B0
9888B9
B98891
AAB988

Contrast Matrix WCAG 2.1 Contrast

87B9B0
84879A
97565E
F84348
FDAC03
—
1.6
Fail
2.5
Fail
1.6
Fail
1.2
Fail
1.6
Fail
—
1.6
Fail
1.0
Fail
1.9
Fail
2.5
Fail
1.6
Fail
—
1.5
Fail
2.9
Fail
1.6
Fail
1.0
Fail
1.5
Fail
—
1.9
Fail
1.2
Fail
1.9
Fail
2.9
Fail
1.9
Fail
—
White BG
2.2Fail
3.6AA Large
5.5AA
3.6AA Large
1.9Fail
Black BG
9.6AAA
5.9AA
3.8AA Large
5.9AA
11.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9D9DB2
858595
7B7A5C
AAA847
DAD92C

Deuteranopia

9A96B3
858594
7F845C
B4C247
DFE536

Tritanopia

8AB4B4
849291
945B5A
EF4646
F94C53

Achromatopsia

A9A9A9
888888
6A6A6A
7A7A7A
B1B1B1

Shades & Tints Shades & Tints

#87B9B0

Dark
Light

#84879A

Dark
Light

#97565E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #87b9b0;
  --color-2: #84879a;
  --color-3: #97565e;
  --color-4: #f84348;
  --color-5: #fdac03;
}

SCSS

$color-1: #87b9b0;
$color-2: #84879a;
$color-3: #97565e;
$color-4: #f84348;
$color-5: #fdac03;

TAILWIND

colors: {
  'brand-1': '#87b9b0',
  'brand-2': '#84879a',
  'brand-3': '#97565e',
  'brand-4': '#f84348',
  'brand-5': '#fdac03',
}

RGB Array

[135, 185, 176], [132, 135, 154], [151, 86, 94], [248, 67, 72], [253, 172, 3]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #87B9B0, #84879A, #97565E, #F84348, #FDAC03 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: #87b9b0; --color-2: #84879a; --color-3: #97565e; --color-4: #f84348; --color-5: #fdac03. 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