← Back to Editor

#9C938A · #D58C85 · #C1A597 · #BFC8C5 · #E4E2E3

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9C938A

Ginger · Gray · Silver Sand

HEX
#9C938A
RGB
rgb(156, 147, 138)
HSL
hsl(30, 8%, 58%)
HSB
hsb(30, 12%, 61%)
CMYK
cmyk(0%, 6%, 12%, 39%)
Oklch
oklch(66.8% 0.017 67.5)

Traditional「Ginger」· Paint「Silver Sand」· Creative Urban Concrete

#D58C85

Peach Pink · DarkSalmon · Coral Red

HEX
#D58C85
RGB
rgb(213, 140, 133)
HSL
hsl(5, 49%, 68%)
HSB
hsb(5, 38%, 84%)
CMYK
cmyk(0%, 34%, 38%, 16%)
Oklch
oklch(71.2% 0.090 25.6)

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

#C1A597

Apricot · Tan · Warm Sun

HEX
#C1A597
RGB
rgb(193, 165, 151)
HSL
hsl(20, 25%, 67%)
HSB
hsb(20, 22%, 76%)
CMYK
cmyk(0%, 15%, 22%, 24%)
Oklch
oklch(74.3% 0.039 48.2)

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

#BFC8C5

Jade · Silver · Pearl Gray

HEX
#BFC8C5
RGB
rgb(191, 200, 197)
HSL
hsl(160, 8%, 77%)
HSB
hsb(160, 4%, 78%)
CMYK
cmyk(4%, 0%, 1%, 22%)
Oklch
oklch(82.5% 0.011 174.2)

Traditional「Jade」· Paint「Pearl Gray」· Creative Silver Lining

#E4E2E3

Plain White · Lavender · Cloud White

HEX
#E4E2E3
RGB
rgb(228, 226, 227)
HSL
hsl(330, 4%, 89%)
HSB
hsb(330, 1%, 89%)
CMYK
cmyk(0%, 1%, 0%, 11%)
Oklch
oklch(91.5% 0.003 345.2)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9C938A
8B949C

Analogous

9C8B8B
9C938A
9C9C8B

Triadic

9C938A
8B9C94
948B9C

Split-Comp.

9C938A
8B9C9C
8B8B9C

Tetradic

9C938A
8B9C8B
8B949C
9C8B9C

Contrast Matrix WCAG 2.1 Contrast

9C938A
D58C85
C1A597
BFC8C5
E4E2E3
—
1.1
Fail
1.3
Fail
1.8
Fail
2.3
Fail
1.1
Fail
—
1.1
Fail
1.6
Fail
2.1
Fail
1.3
Fail
1.1
Fail
—
1.4
Fail
1.8
Fail
1.8
Fail
1.6
Fail
1.4
Fail
—
1.3
Fail
2.3
Fail
2.1
Fail
1.8
Fail
1.3
Fail
—
White BG
3.0AA Large
2.7Fail
2.3Fail
1.7Fail
1.3Fail
Black BG
7.0AA
7.9AAA
9.1AAA
12.3AAA
16.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

98988C
B5B587
B5B59A
C3C3C6
E3E3E3

Deuteranopia

99998D
BABF87
B7B99B
C2C2C6
E3E3E3

Tritanopia

9C8E8E
D18888
C09D9E
BFC6C6
E4E3E3

Achromatopsia

959595
A1A1A1
ACACAC
C5C5C5
E3E3E3

Shades & Tints Shades & Tints

#9C938A

Dark
Light

#D58C85

Dark
Light

#C1A597

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9c938a;
  --color-2: #d58c85;
  --color-3: #c1a597;
  --color-4: #bfc8c5;
  --color-5: #e4e2e3;
}

SCSS

$color-1: #9c938a;
$color-2: #d58c85;
$color-3: #c1a597;
$color-4: #bfc8c5;
$color-5: #e4e2e3;

TAILWIND

colors: {
  'brand-1': '#9c938a',
  'brand-2': '#d58c85',
  'brand-3': '#c1a597',
  'brand-4': '#bfc8c5',
  'brand-5': '#e4e2e3',
}

RGB Array

[156, 147, 138], [213, 140, 133], [193, 165, 151], [191, 200, 197], [228, 226, 227]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9C938A, #D58C85, #C1A597, #BFC8C5, #E4E2E3 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #9c938a; --color-2: #d58c85; --color-3: #c1a597; --color-4: #bfc8c5; --color-5: #e4e2e3. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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