← Back to Editor

#837B68 · #CFC8B5 · #C68583 · #D9D7CA · #B9C1B4

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

#837B68

Ochre · Gray · Honey Gold

HEX
#837B68
RGB
rgb(131, 123, 104)
HSL
hsl(42, 11%, 46%)
HSB
hsb(42, 21%, 51%)
CMYK
cmyk(0%, 6%, 21%, 49%)
Oklch
oklch(58.5% 0.030 87.9)

TraditionalOchre」· PaintHoney Gold」· Creative Blush Sunrise

#CFC8B5

Goose Yellow · Silver · Lemon Cream

HEX
#CFC8B5
RGB
rgb(207, 200, 181)
HSL
hsl(44, 21%, 76%)
HSB
hsb(44, 13%, 81%)
CMYK
cmyk(0%, 3%, 13%, 19%)
Oklch
oklch(83.3% 0.027 90.1)

TraditionalGoose Yellow」· PaintLemon Cream」· Creative Lemon Fizz

#C68583

Peach Pink · DarkSalmon · Coral Red

HEX
#C68583
RGB
rgb(198, 133, 131)
HSL
hsl(2, 37%, 65%)
HSB
hsb(2, 34%, 78%)
CMYK
cmyk(0%, 33%, 34%, 22%)
Oklch
oklch(68.2% 0.081 21.3)

TraditionalPeach Pink」· PaintCoral Red」· Creative Blush Sunrise

#D9D7CA

Fresh Green · LightGray · Lemon Cream

HEX
#D9D7CA
RGB
rgb(217, 215, 202)
HSL
hsl(52, 16%, 82%)
HSB
hsb(52, 7%, 85%)
CMYK
cmyk(0%, 1%, 7%, 15%)
Oklch
oklch(87.7% 0.018 99.6)

TraditionalFresh Green」· PaintLemon Cream」· Creative Lemon Fizz

#B9C1B4

Celadon · Silver · Pearl Gray

HEX
#B9C1B4
RGB
rgb(185, 193, 180)
HSL
hsl(97, 9%, 73%)
HSB
hsb(97, 7%, 76%)
CMYK
cmyk(4%, 0%, 7%, 24%)
Oklch
oklch(80.1% 0.020 133.1)

TraditionalCeladon」· PaintPearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

837B68
687082

Analogous

826E68
837B68
7D8268

Triadic

837B68
68827A
7A6882

Split-Comp.

837B68
687D82
6E6882

Tetradic

837B68
68826E
687082
82687D

Contrast Matrix WCAG 2.1 Contrast

837B68
CFC8B5
C68583
D9D7CA
B9C1B4
2.5
Fail
1.4
Fail
2.9
Fail
2.3
Fail
2.5
Fail
1.8
Fail
1.2
Fail
1.1
Fail
1.4
Fail
1.8
Fail
2.1
Fail
1.6
Fail
2.9
Fail
1.2
Fail
2.1
Fail
1.3
Fail
2.3
Fail
1.1
Fail
1.6
Fail
1.3
Fail
White BG
4.2AA Large
1.7Fail
3.0Fail
1.4Fail
1.9Fail
Black BG
5.0AA
12.6AAA
7.1AAA
14.5AAA
11.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

807F6D
CCCCBA
AAA983
D8D8CD
BCBDB7

Deuteranopia

80816E
CCCDBB
AEB384
D8D8CE
BCBBB8

Tritanopia

837071
CFBDBE
C38484
D9D0D0
B9BABA

Achromatopsia

7B7B7B
C8C8C8
989898
D6D6D6
BDBDBD

Shades & Tints Shades & Tints

#837B68

Dark
Light

#CFC8B5

Dark
Light

#C68583

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #837b68;
  --color-2: #cfc8b5;
  --color-3: #c68583;
  --color-4: #d9d7ca;
  --color-5: #b9c1b4;
}

SCSS

$color-1: #837b68;
$color-2: #cfc8b5;
$color-3: #c68583;
$color-4: #d9d7ca;
$color-5: #b9c1b4;

TAILWIND

colors: {
  'brand-1': '#837b68',
  'brand-2': '#cfc8b5',
  'brand-3': '#c68583',
  'brand-4': '#d9d7ca',
  'brand-5': '#b9c1b4',
}

RGB Array

[131, 123, 104], [207, 200, 181], [198, 133, 131], [217, 215, 202], [185, 193, 180]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #837B68, #CFC8B5, #C68583, #D9D7CA, #B9C1B4 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: #837b68; --color-2: #cfc8b5; --color-3: #c68583; --color-4: #d9d7ca; --color-5: #b9c1b4. 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