← Back to Editor

#97865D · #C4B286 · #D5C190 · #F0DCAD · #F0CDAD

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

#97865D

Ochre · Gray · Honey Gold

HEX
#97865D
RGB
rgb(151, 134, 93)
HSL
hsl(42, 24%, 48%)
HSB
hsb(42, 38%, 59%)
CMYK
cmyk(0%, 11%, 38%, 41%)
Oklch
oklch(62.5% 0.061 88.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#C4B286

Ginger · Tan · Sunflower

HEX
#C4B286
RGB
rgb(196, 178, 134)
HSL
hsl(43, 34%, 65%)
HSB
hsb(43, 32%, 77%)
CMYK
cmyk(0%, 9%, 32%, 23%)
Oklch
oklch(76.8% 0.063 88.4)

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

#D5C190

Ginger · Tan · Sunflower

HEX
#D5C190
RGB
rgb(213, 193, 144)
HSL
hsl(43, 45%, 70%)
HSB
hsb(43, 32%, 84%)
CMYK
cmyk(0%, 9%, 32%, 16%)
Oklch
oklch(81.6% 0.068 88.4)

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

#F0DCAD

Goose Yellow · Wheat · Lemon Cream

HEX
#F0DCAD
RGB
rgb(240, 220, 173)
HSL
hsl(42, 69%, 81%)
HSB
hsb(42, 28%, 94%)
CMYK
cmyk(0%, 8%, 28%, 6%)
Oklch
oklch(89.9% 0.065 87.7)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#F0CDAD

Apricot · Wheat · Peach Orange

HEX
#F0CDAD
RGB
rgb(240, 205, 173)
HSL
hsl(29, 69%, 81%)
HSB
hsb(29, 28%, 94%)
CMYK
cmyk(0%, 15%, 28%, 6%)
Oklch
oklch(87.0% 0.058 64.4)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

97865D
5D6F98

Analogous

98695D
97865D
8C985D

Triadic

97865D
5D9886
865D98

Split-Comp.

97865D
5D8C98
695D98

Tetradic

97865D
5D9869
5D6F98
985D8C

Contrast Matrix WCAG 2.1 Contrast

97865D
C4B286
D5C190
F0DCAD
F0CDAD
—
1.7
Fail
2.0
Fail
2.6
Fail
2.4
Fail
1.7
Fail
—
1.2
Fail
1.5
Fail
1.4
Fail
2.0
Fail
1.2
Fail
—
1.3
Fail
1.2
Fail
2.6
Fail
1.5
Fail
1.3
Fail
—
1.1
Fail
2.4
Fail
1.4
Fail
1.2
Fail
1.1
Fail
—
White BG
3.6AA Large
2.1Fail
1.8Fail
1.4Fail
1.5Fail
Black BG
5.9AA
10.1AAA
11.9AAA
15.5AAA
14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

908F67
BCBC91
CCCC9C
E7E7B8
E1E1B5

Deuteranopia

919269
BDBF93
CECF9F
E9EABB
E3E6B7

Tritanopia

966F70
C3999B
D4A5A7
EFC1C3
EEBBBC

Achromatopsia

868686
B2B2B2
C1C1C1
DDDDDD
D4D4D4

Shades & Tints Shades & Tints

#97865D

Dark
Light

#C4B286

Dark
Light

#D5C190

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #97865d;
  --color-2: #c4b286;
  --color-3: #d5c190;
  --color-4: #f0dcad;
  --color-5: #f0cdad;
}

SCSS

$color-1: #97865d;
$color-2: #c4b286;
$color-3: #d5c190;
$color-4: #f0dcad;
$color-5: #f0cdad;

TAILWIND

colors: {
  'brand-1': '#97865d',
  'brand-2': '#c4b286',
  'brand-3': '#d5c190',
  'brand-4': '#f0dcad',
  'brand-5': '#f0cdad',
}

RGB Array

[151, 134, 93], [196, 178, 134], [213, 193, 144], [240, 220, 173], [240, 205, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #97865D, #C4B286, #D5C190, #F0DCAD, #F0CDAD 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: #97865d; --color-2: #c4b286; --color-3: #d5c190; --color-4: #f0dcad; --color-5: #f0cdad. 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