← Back to Editor

#8BB29F · #D5BE8A · #C5996A · #663B35 · #C98D83

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

#8BB29F

Jade · DarkSeaGreen · Apple Green

HEX
#8BB29F
RGB
rgb(139, 178, 159)
HSL
hsl(151, 20%, 62%)
HSB
hsb(151, 22%, 70%)
CMYK
cmyk(22%, 0%, 11%, 30%)
Oklch
oklch(73.0% 0.050 163.8)

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

#D5BE8A

Ginger · Tan · Sunflower

HEX
#D5BE8A
RGB
rgb(213, 190, 138)
HSL
hsl(42, 47%, 69%)
HSB
hsb(42, 35%, 84%)
CMYK
cmyk(0%, 11%, 35%, 16%)
Oklch
oklch(80.9% 0.073 86.8)

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

#C5996A

Ginger · DarkSalmon · Warm Sun

HEX
#C5996A
RGB
rgb(197, 153, 106)
HSL
hsl(31, 44%, 59%)
HSB
hsb(31, 46%, 77%)
CMYK
cmyk(0%, 22%, 46%, 23%)
Oklch
oklch(71.3% 0.082 67.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#663B35

Crimson · DarkOliveGreen · Wine Red

HEX
#663B35
RGB
rgb(102, 59, 53)
HSL
hsl(7, 32%, 30%)
HSB
hsb(7, 48%, 40%)
CMYK
cmyk(0%, 42%, 48%, 60%)
Oklch
oklch(40.3% 0.062 28.6)

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

#C98D83

Peach Pink · DarkSalmon · Coral Red

HEX
#C98D83
RGB
rgb(201, 141, 131)
HSL
hsl(9, 39%, 65%)
HSB
hsb(9, 35%, 79%)
CMYK
cmyk(0%, 30%, 35%, 21%)
Oklch
oklch(70.0% 0.075 29.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8BB29F
B18B9D

Analogous

8BB18B
8BB29F
8BB1B1

Triadic

8BB29F
9F8BB1
B19F8B

Split-Comp.

8BB29F
B18BB1
B18B8B

Tetradic

8BB29F
8B8BB1
B18B9D
B1B18B

Contrast Matrix WCAG 2.1 Contrast

8BB29F
D5BE8A
C5996A
663B35
C98D83
—
1.3
Fail
1.1
Fail
4.0
AA Large
1.2
Fail
1.3
Fail
—
1.4
Fail
5.2
AA
1.5
Fail
1.1
Fail
1.4
Fail
—
3.6
AA Large
1.1
Fail
4.0
AA Large
5.2
AA
3.6
AA Large
—
3.4
AA Large
1.2
Fail
1.5
Fail
1.1
Fail
3.4
AA Large
—
White BG
2.3Fail
1.8Fail
2.6Fail
9.4AAA
2.8Fail
Black BG
9.0AAA
11.6AAA
8.1AAA
2.2Fail
7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9CA4
CBCB97
B2B275
535336
AFAE85

Deuteranopia

9A97A5
CCCE9A
B5B878
565937
B3B786

Tritanopia

8DA7A8
D4A1A3
C37E80
643838
C68788

Achromatopsia

A4A4A4
BFBFBF
A1A1A1
474747
9E9E9E

Shades & Tints Shades & Tints

#8BB29F

Dark
Light

#D5BE8A

Dark
Light

#C5996A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8bb29f;
  --color-2: #d5be8a;
  --color-3: #c5996a;
  --color-4: #663b35;
  --color-5: #c98d83;
}

SCSS

$color-1: #8bb29f;
$color-2: #d5be8a;
$color-3: #c5996a;
$color-4: #663b35;
$color-5: #c98d83;

TAILWIND

colors: {
  'brand-1': '#8bb29f',
  'brand-2': '#d5be8a',
  'brand-3': '#c5996a',
  'brand-4': '#663b35',
  'brand-5': '#c98d83',
}

RGB Array

[139, 178, 159], [213, 190, 138], [197, 153, 106], [102, 59, 53], [201, 141, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8BB29F, #D5BE8A, #C5996A, #663B35, #C98D83 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: #8bb29f; --color-2: #d5be8a; --color-3: #c5996a; --color-4: #663b35; --color-5: #c98d83. 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