← Back to Editor

#9A8E82 · #B4A38F · #FFD595 · #E0A690 · #CD9F85

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9A8E82

Ginger · Gray · Warm Sun

HEX
#9A8E82
RGB
rgb(154, 142, 130)
HSL
hsl(30, 11%, 56%)
HSB
hsb(30, 16%, 60%)
CMYK
cmyk(0%, 8%, 16%, 40%)
Oklch
oklch(65.4% 0.023 67.4)

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

#B4A38F

Ginger · DarkGray · Warm Sun

HEX
#B4A38F
RGB
rgb(180, 163, 143)
HSL
hsl(32, 20%, 63%)
HSB
hsb(32, 21%, 71%)
CMYK
cmyk(0%, 9%, 21%, 29%)
Oklch
oklch(72.5% 0.034 71.7)

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

#FFD595

Goose Yellow · Khaki · Peach Orange

HEX
#FFD595
RGB
rgb(255, 213, 149)
HSL
hsl(36, 100%, 79%)
HSB
hsb(36, 42%, 100%)
CMYK
cmyk(0%, 16%, 42%, 0%)
Oklch
oklch(89.5% 0.094 77.6)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#E0A690

Apricot · Tan · Warm Sun

HEX
#E0A690
RGB
rgb(224, 166, 144)
HSL
hsl(17, 56%, 72%)
HSB
hsb(17, 36%, 88%)
CMYK
cmyk(0%, 26%, 36%, 12%)
Oklch
oklch(77.4% 0.076 41.7)

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

#CD9F85

Apricot · Tan · Warm Sun

HEX
#CD9F85
RGB
rgb(205, 159, 133)
HSL
hsl(22, 42%, 66%)
HSB
hsb(22, 35%, 80%)
CMYK
cmyk(0%, 22%, 35%, 20%)
Oklch
oklch(73.9% 0.066 50.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9A8E82
828F9B

Analogous

9B8282
9A8E82
9B9B82

Triadic

9A8E82
829B8F
8F829B

Split-Comp.

9A8E82
829B9B
82829B

Tetradic

9A8E82
829B82
828F9B
9B829B

Contrast Matrix WCAG 2.1 Contrast

9A8E82
B4A38F
FFD595
E0A690
CD9F85
—
1.3
Fail
2.3
Fail
1.5
Fail
1.4
Fail
1.3
Fail
—
1.8
Fail
1.2
Fail
1.0
Fail
2.3
Fail
1.8
Fail
—
1.5
Fail
1.7
Fail
1.5
Fail
1.2
Fail
1.5
Fail
—
1.1
Fail
1.4
Fail
1.0
Fail
1.7
Fail
1.1
Fail
—
White BG
3.2AA Large
2.4Fail
1.4Fail
2.1Fail
2.4Fail
Black BG
6.6AA
8.6AAA
15.2AAA
10.0AAA
8.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

959585
ADAC94
EDECA4
C7C695
B9B98B

Deuteranopia

969686
AEAF95
EFF2A8
CACF97
BCBF8D

Tritanopia

998788
B39899
FDB1B3
DD9A9A
CB9091

Achromatopsia

909090
A6A6A6
DADADA
B5B5B5
AAAAAA

Shades & Tints Shades & Tints

#9A8E82

Dark
Light

#B4A38F

Dark
Light

#FFD595

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9a8e82;
  --color-2: #b4a38f;
  --color-3: #ffd595;
  --color-4: #e0a690;
  --color-5: #cd9f85;
}

SCSS

$color-1: #9a8e82;
$color-2: #b4a38f;
$color-3: #ffd595;
$color-4: #e0a690;
$color-5: #cd9f85;

TAILWIND

colors: {
  'brand-1': '#9a8e82',
  'brand-2': '#b4a38f',
  'brand-3': '#ffd595',
  'brand-4': '#e0a690',
  'brand-5': '#cd9f85',
}

RGB Array

[154, 142, 130], [180, 163, 143], [255, 213, 149], [224, 166, 144], [205, 159, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9A8E82, #B4A38F, #FFD595, #E0A690, #CD9F85 is ideal for: health products, baby brands, fresh-style blogs. 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: #9a8e82; --color-2: #b4a38f; --color-3: #ffd595; --color-4: #e0a690; --color-5: #cd9f85. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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