← Back to Editor

#85694C · #C99348 · #F5E858 · #F1EAAF · #DFD6C8

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#85694C

Ochre · DimGray · Amber Brown

HEX
#85694C
RGB
rgb(133, 105, 76)
HSL
hsl(31, 27%, 41%)
HSB
hsb(31, 43%, 52%)
CMYK
cmyk(0%, 21%, 43%, 48%)
Oklch
oklch(54.1% 0.055 67.2)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#C99348

Ginger · GoldenRod · Warm Sun

HEX
#C99348
RGB
rgb(201, 147, 72)
HSL
hsl(35, 54%, 54%)
HSB
hsb(35, 64%, 79%)
CMYK
cmyk(0%, 27%, 64%, 21%)
Oklch
oklch(70.1% 0.113 73.0)

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

#F5E858

Fresh Green · Khaki · Sunflower

HEX
#F5E858
RGB
rgb(245, 232, 88)
HSL
hsl(55, 89%, 65%)
HSB
hsb(55, 64%, 96%)
CMYK
cmyk(0%, 5%, 64%, 4%)
Oklch
oklch(91.6% 0.161 104.2)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#F1EAAF

Fresh Green · Wheat · Lemon Cream

HEX
#F1EAAF
RGB
rgb(241, 234, 175)
HSL
hsl(54, 70%, 82%)
HSB
hsb(54, 27%, 95%)
CMYK
cmyk(0%, 3%, 27%, 5%)
Oklch
oklch(92.8% 0.076 102.1)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#DFD6C8

Goose Yellow · LightGray · Peach Orange

HEX
#DFD6C8
RGB
rgb(223, 214, 200)
HSL
hsl(37, 26%, 83%)
HSB
hsb(37, 10%, 87%)
CMYK
cmyk(0%, 4%, 10%, 13%)
Oklch
oklch(87.9% 0.021 79.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

85694C
4C6885

Analogous

854D4C
85694C
84854C

Triadic

85694C
4C8569
694C85

Split-Comp.

85694C
4C8485
4D4C85

Tetradic

85694C
4C854D
4C6885
854C84

Contrast Matrix WCAG 2.1 Contrast

85694C
C99348
F5E858
F1EAAF
DFD6C8
—
1.9
Fail
4.0
AA Large
4.2
AA Large
3.5
AA Large
1.9
Fail
—
2.1
Fail
2.2
Fail
1.9
Fail
4.0
AA Large
2.1
Fail
—
1.0
Fail
1.1
Fail
4.2
AA Large
2.2
Fail
1.0
Fail
—
1.2
Fail
3.5
AA Large
1.9
Fail
1.1
Fail
1.2
Fail
—
White BG
5.1AA
2.7Fail
1.3Fail
1.2Fail
1.4Fail
Black BG
4.1AA Large
7.8AAA
16.6AAA
17.1AAA
14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

797953
B2B15A
EFEF7B
EEEEBD
DBDBCB

Deuteranopia

7B7D55
B5B95F
F0F183
EEEFC1
DCDCCC

Tritanopia

84595A
C6686C
F4969C
F1C9CB
DFCECF

Achromatopsia

6E6E6E
9B9B9B
DBDBDB
E5E5E5
D7D7D7

Shades & Tints Shades & Tints

#85694C

Dark
Light

#C99348

Dark
Light

#F5E858

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #85694c;
  --color-2: #c99348;
  --color-3: #f5e858;
  --color-4: #f1eaaf;
  --color-5: #dfd6c8;
}

SCSS

$color-1: #85694c;
$color-2: #c99348;
$color-3: #f5e858;
$color-4: #f1eaaf;
$color-5: #dfd6c8;

TAILWIND

colors: {
  'brand-1': '#85694c',
  'brand-2': '#c99348',
  'brand-3': '#f5e858',
  'brand-4': '#f1eaaf',
  'brand-5': '#dfd6c8',
}

RGB Array

[133, 105, 76], [201, 147, 72], [245, 232, 88], [241, 234, 175], [223, 214, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #85694C, #C99348, #F5E858, #F1EAAF, #DFD6C8 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #85694c; --color-2: #c99348; --color-3: #f5e858; --color-4: #f1eaaf; --color-5: #dfd6c8. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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