← Back to Editor

#9FD3C1 · #9B5370 · #BD6868 · #DB9F7C · #EEC58B

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

#9FD3C1

Jade · LightSteelBlue · Apple Green

HEX
#9FD3C1
RGB
rgb(159, 211, 193)
HSL
hsl(159, 37%, 73%)
HSB
hsb(159, 25%, 83%)
CMYK
cmyk(25%, 0%, 9%, 17%)
Oklch
oklch(82.5% 0.060 171.5)

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

#9B5370

Dark Violet · Gray · Camellia

HEX
#9B5370
RGB
rgb(155, 83, 112)
HSL
hsl(336, 30%, 47%)
HSB
hsb(336, 46%, 61%)
CMYK
cmyk(0%, 46%, 28%, 39%)
Oklch
oklch(53.6% 0.101 355.5)

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

#BD6868

Crimson · LightCoral · Passion Red

HEX
#BD6868
RGB
rgb(189, 104, 104)
HSL
hsl(0, 39%, 57%)
HSB
hsb(0, 45%, 74%)
CMYK
cmyk(0%, 45%, 45%, 26%)
Oklch
oklch(61.4% 0.109 20.7)

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

#DB9F7C

Apricot · DarkSalmon · Warm Sun

HEX
#DB9F7C
RGB
rgb(219, 159, 124)
HSL
hsl(22, 57%, 67%)
HSB
hsb(22, 43%, 86%)
CMYK
cmyk(0%, 27%, 43%, 14%)
Oklch
oklch(75.2% 0.086 51.3)

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

#EEC58B

Goose Yellow · BurlyWood · Warm Sun

HEX
#EEC58B
RGB
rgb(238, 197, 139)
HSL
hsl(35, 74%, 74%)
HSB
hsb(35, 42%, 93%)
CMYK
cmyk(0%, 17%, 42%, 7%)
Oklch
oklch(84.6% 0.088 75.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9FD3C1
D4A1B3

Analogous

A1D4A8
9FD3C1
A1CCD4

Triadic

9FD3C1
C2A1D4
D4C2A1

Split-Comp.

9FD3C1
D4A1CC
D4A8A1

Tetradic

9FD3C1
A8A1D4
D4A1B3
CCD4A1

Contrast Matrix WCAG 2.1 Contrast

9FD3C1
9B5370
BD6868
DB9F7C
EEC58B
—
3.3
AA Large
2.4
Fail
1.4
Fail
1.0
Fail
3.3
AA Large
—
1.4
Fail
2.4
Fail
3.4
AA Large
2.4
Fail
1.4
Fail
—
1.7
Fail
2.4
Fail
1.4
Fail
2.4
Fail
1.7
Fail
—
1.4
Fail
1.0
Fail
3.4
AA Large
2.4
Fail
1.4
Fail
—
White BG
1.7Fail
5.4AA
3.9AA Large
2.3Fail
1.6Fail
Black BG
12.6AAA
3.9AA Large
5.3AA
9.3AAA
13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B6C5
7C7B69
989768
C1C084
DCDC99

Deuteranopia

B3AFC6
808567
9DA368
C5C987
DFE29C

Tritanopia

A2C9CA
976362
B96868
D88B8D
ECA4A7

Achromatopsia

C1C1C1
6C6C6C
818181
ADADAD
CBCBCB

Shades & Tints Shades & Tints

#9FD3C1

Dark
Light

#9B5370

Dark
Light

#BD6868

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9fd3c1;
  --color-2: #9b5370;
  --color-3: #bd6868;
  --color-4: #db9f7c;
  --color-5: #eec58b;
}

SCSS

$color-1: #9fd3c1;
$color-2: #9b5370;
$color-3: #bd6868;
$color-4: #db9f7c;
$color-5: #eec58b;

TAILWIND

colors: {
  'brand-1': '#9fd3c1',
  'brand-2': '#9b5370',
  'brand-3': '#bd6868',
  'brand-4': '#db9f7c',
  'brand-5': '#eec58b',
}

RGB Array

[159, 211, 193], [155, 83, 112], [189, 104, 104], [219, 159, 124], [238, 197, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9FD3C1, #9B5370, #BD6868, #DB9F7C, #EEC58B 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: #9fd3c1; --color-2: #9b5370; --color-3: #bd6868; --color-4: #db9f7c; --color-5: #eec58b. 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