← Back to Editor

#CFBC94 · #433A33 · #5F5848 · #846F5E · #8C7D76

warm

A 5-color warm 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

#CFBC94

Ginger · Tan · Sunflower

HEX
#CFBC94
RGB
rgb(207, 188, 148)
HSL
hsl(41, 38%, 70%)
HSB
hsb(41, 29%, 81%)
CMYK
cmyk(0%, 9%, 29%, 19%)
Oklch
oklch(80.1% 0.058 85.5)

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

#433A33

Tangerine · DarkSlateGray · Cinnamon

HEX
#433A33
RGB
rgb(67, 58, 51)
HSL
hsl(26, 14%, 23%)
HSB
hsb(26, 24%, 26%)
CMYK
cmyk(0%, 13%, 24%, 74%)
Oklch
oklch(35.6% 0.017 60.1)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#5F5848

Ochre · DarkOliveGreen · Honey Gold

HEX
#5F5848
RGB
rgb(95, 88, 72)
HSL
hsl(42, 14%, 33%)
HSB
hsb(42, 24%, 37%)
CMYK
cmyk(0%, 7%, 24%, 63%)
Oklch
oklch(46.2% 0.026 87.2)

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

#846F5E

Tangerine · DimGray · Amber Brown

HEX
#846F5E
RGB
rgb(132, 111, 94)
HSL
hsl(27, 17%, 44%)
HSB
hsb(27, 29%, 52%)
CMYK
cmyk(0%, 16%, 29%, 48%)
Oklch
oklch(55.7% 0.037 60.9)

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

#8C7D76

Tangerine · Gray · Warm Gray

HEX
#8C7D76
RGB
rgb(140, 125, 118)
HSL
hsl(19, 9%, 51%)
HSB
hsb(19, 16%, 55%)
CMYK
cmyk(0%, 11%, 16%, 45%)
Oklch
oklch(60.1% 0.021 46.7)

Traditional「Tangerine」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFBC94
95A8D0

Analogous

D0A095
CFBC94
C5D095

Triadic

CFBC94
95D0BD
BD95D0

Split-Comp.

CFBC94
95C5D0
A095D0

Tetradic

CFBC94
95D0A0
95A8D0
D095C5

Contrast Matrix WCAG 2.1 Contrast

CFBC94
433A33
5F5848
846F5E
8C7D76
—
6.0
AA
3.8
AA Large
2.6
Fail
2.1
Fail
6.0
AA
—
1.6
Fail
2.3
Fail
2.8
Fail
3.8
AA Large
1.6
Fail
—
1.5
Fail
1.8
Fail
2.6
Fail
2.3
Fail
1.5
Fail
—
1.2
Fail
2.1
Fail
2.8
Fail
1.8
Fail
1.2
Fail
—
White BG
1.9Fail
11.1AAA
7.1AAA
4.8AA
4.0AA Large
Black BG
11.3AAA
1.9Fail
3.0Fail
4.4AA Large
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C79E
3F3F35
5C5C4C
7B7B62
868578

Deuteranopia

C8C9A0
404035
5C5D4D
7C7E63
868878

Tritanopia

CEA5A7
433636
5F4F50
836566
8B7979

Achromatopsia

BDBDBD
3C3C3C
585858
737373
818181

Shades & Tints Shades & Tints

#CFBC94

Dark
Light

#433A33

Dark
Light

#5F5848

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfbc94;
  --color-2: #433a33;
  --color-3: #5f5848;
  --color-4: #846f5e;
  --color-5: #8c7d76;
}

SCSS

$color-1: #cfbc94;
$color-2: #433a33;
$color-3: #5f5848;
$color-4: #846f5e;
$color-5: #8c7d76;

TAILWIND

colors: {
  'brand-1': '#cfbc94',
  'brand-2': '#433a33',
  'brand-3': '#5f5848',
  'brand-4': '#846f5e',
  'brand-5': '#8c7d76',
}

RGB Array

[207, 188, 148], [67, 58, 51], [95, 88, 72], [132, 111, 94], [140, 125, 118]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #CFBC94, #433A33, #5F5848, #846F5E, #8C7D76 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #cfbc94; --color-2: #433a33; --color-3: #5f5848; --color-4: #846f5e; --color-5: #8c7d76. 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 warm-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco 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