← Back to Editor

#8BAB8D · #F5CF66 · #EBAD60 · #D17869 · #96526B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8BAB8D

Celadon · DarkSeaGreen · Apple Green

HEX
#8BAB8D
RGB
rgb(139, 171, 141)
HSL
hsl(124, 16%, 61%)
HSB
hsb(124, 19%, 67%)
CMYK
cmyk(19%, 0%, 18%, 33%)
Oklch
oklch(70.9% 0.056 146.6)

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

#F5CF66

Ginger · SandyBrown · Sunflower

HEX
#F5CF66
RGB
rgb(245, 207, 102)
HSL
hsl(44, 88%, 68%)
HSB
hsb(44, 58%, 96%)
CMYK
cmyk(0%, 16%, 58%, 4%)
Oklch
oklch(86.7% 0.131 89.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#EBAD60

Ginger · SandyBrown · Warm Sun

HEX
#EBAD60
RGB
rgb(235, 173, 96)
HSL
hsl(33, 78%, 65%)
HSB
hsb(33, 59%, 92%)
CMYK
cmyk(0%, 26%, 59%, 8%)
Oklch
oklch(79.1% 0.119 70.6)

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

#D17869

Peach Pink · LightCoral · Coral Red

HEX
#D17869
RGB
rgb(209, 120, 105)
HSL
hsl(9, 53%, 62%)
HSB
hsb(9, 50%, 82%)
CMYK
cmyk(0%, 43%, 50%, 18%)
Oklch
oklch(66.7% 0.114 30.5)

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

#96526B

Dark Violet · DimGray · Camellia

HEX
#96526B
RGB
rgb(150, 82, 107)
HSL
hsl(338, 29%, 45%)
HSB
hsb(338, 45%, 59%)
CMYK
cmyk(0%, 45%, 29%, 41%)
Oklch
oklch(52.6% 0.095 357.4)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8BAB8D
AB8CA9

Analogous

99AB8C
8BAB8D
8CAB9E

Triadic

8BAB8D
8E8CAB
AB8E8C

Split-Comp.

8BAB8D
9E8CAB
AB8C99

Tetradic

8BAB8D
8C99AB
AB8CA9
AB9E8C

Contrast Matrix WCAG 2.1 Contrast

8BAB8D
F5CF66
EBAD60
D17869
96526B
—
1.7
Fail
1.3
Fail
1.3
Fail
2.2
Fail
1.7
Fail
—
1.3
Fail
2.1
Fail
3.8
AA Large
1.3
Fail
1.3
Fail
—
1.6
Fail
2.9
Fail
1.3
Fail
2.1
Fail
1.6
Fail
—
1.8
Fail
2.2
Fail
3.8
AA Large
2.9
Fail
1.8
Fail
—
White BG
2.5Fail
1.5Fail
2.0Fail
3.2AA Large
5.7AA
Black BG
8.3AAA
14.0AAA
10.7AAA
6.6AA
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

999994
E5E47F
D0D073
AAAA6D
797865

Deuteranopia

979596
E7EA86
D4D877
B0B66E
7D8263

Tritanopia

8D9A9B
F39398
E88185
CD6F70
93605F

Achromatopsia

9E9E9E
CECECE
B7B7B7
919191
696969

Shades & Tints Shades & Tints

#8BAB8D

Dark
Light

#F5CF66

Dark
Light

#EBAD60

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8bab8d;
  --color-2: #f5cf66;
  --color-3: #ebad60;
  --color-4: #d17869;
  --color-5: #96526b;
}

SCSS

$color-1: #8bab8d;
$color-2: #f5cf66;
$color-3: #ebad60;
$color-4: #d17869;
$color-5: #96526b;

TAILWIND

colors: {
  'brand-1': '#8bab8d',
  'brand-2': '#f5cf66',
  'brand-3': '#ebad60',
  'brand-4': '#d17869',
  'brand-5': '#96526b',
}

RGB Array

[139, 171, 141], [245, 207, 102], [235, 173, 96], [209, 120, 105], [150, 82, 107]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8BAB8D, #F5CF66, #EBAD60, #D17869, #96526B 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: #8bab8d; --color-2: #f5cf66; --color-3: #ebad60; --color-4: #d17869; --color-5: #96526b. 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