← Back to Editor

#CF8A46 · #F3F5C8 · #B4C383 · #A1987A · #5E5041

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

#CF8A46

Ginger · GoldenRod · Warm Sun

HEX
#CF8A46
RGB
rgb(207, 138, 70)
HSL
hsl(30, 59%, 54%)
HSB
hsb(30, 66%, 81%)
CMYK
cmyk(0%, 33%, 66%, 19%)
Oklch
oklch(69.1% 0.119 63.1)

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

#F3F5C8

Fresh Green · Beige · Lemon Cream

HEX
#F3F5C8
RGB
rgb(243, 245, 200)
HSL
hsl(63, 69%, 87%)
HSB
hsb(63, 18%, 96%)
CMYK
cmyk(1%, 0%, 18%, 4%)
Oklch
oklch(95.7% 0.058 109.5)

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

#B4C383

Willow Green · Tan · Apple Green

HEX
#B4C383
RGB
rgb(180, 195, 131)
HSL
hsl(74, 35%, 64%)
HSB
hsb(74, 33%, 76%)
CMYK
cmyk(8%, 0%, 33%, 24%)
Oklch
oklch(79.0% 0.087 119.2)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#A1987A

Ginger · Gray · Sunflower

HEX
#A1987A
RGB
rgb(161, 152, 122)
HSL
hsl(46, 17%, 55%)
HSB
hsb(46, 24%, 63%)
CMYK
cmyk(0%, 6%, 24%, 37%)
Oklch
oklch(67.9% 0.043 93.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#5E5041

Ochre · DarkOliveGreen · Amber Brown

HEX
#5E5041
RGB
rgb(94, 80, 65)
HSL
hsl(31, 18%, 31%)
HSB
hsb(31, 31%, 37%)
CMYK
cmyk(0%, 15%, 31%, 63%)
Oklch
oklch(44.1% 0.030 68.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CF8A46
448ACF

Analogous

CF4444
CF8A46
CFCF44

Triadic

CF8A46
44CF8A
8A44CF

Split-Comp.

CF8A46
44CFCF
4444CF

Tetradic

CF8A46
44CF44
448ACF
CF44CF

Contrast Matrix WCAG 2.1 Contrast

CF8A46
F3F5C8
B4C383
A1987A
5E5041
—
2.5
Fail
1.5
Fail
1.0
Fail
2.7
Fail
2.5
Fail
—
1.7
Fail
2.6
Fail
6.9
AA
1.5
Fail
1.7
Fail
—
1.5
Fail
4.1
AA Large
1.0
Fail
2.6
Fail
1.5
Fail
—
2.7
Fail
2.7
Fail
6.9
AA
4.1
AA Large
2.7
Fail
—
White BG
2.8Fail
1.1Fail
1.9Fail
2.9Fail
7.8AAA
Black BG
7.4AAA
18.7AAA
11.1AAA
7.3AAA
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B156
F4F4D3
BABB92
9D9D81
585845

Deuteranopia

B5BA5A
F4F4D6
BAB996
9E9E83
595A46

Tritanopia

CC6366
F3DBDD
B59FA1
A18788
5D4748

Achromatopsia

979797
EFEFEF
B7B7B7
979797
525252

Shades & Tints Shades & Tints

#CF8A46

Dark
Light

#F3F5C8

Dark
Light

#B4C383

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cf8a46;
  --color-2: #f3f5c8;
  --color-3: #b4c383;
  --color-4: #a1987a;
  --color-5: #5e5041;
}

SCSS

$color-1: #cf8a46;
$color-2: #f3f5c8;
$color-3: #b4c383;
$color-4: #a1987a;
$color-5: #5e5041;

TAILWIND

colors: {
  'brand-1': '#cf8a46',
  'brand-2': '#f3f5c8',
  'brand-3': '#b4c383',
  'brand-4': '#a1987a',
  'brand-5': '#5e5041',
}

RGB Array

[207, 138, 70], [243, 245, 200], [180, 195, 131], [161, 152, 122], [94, 80, 65]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CF8A46, #F3F5C8, #B4C383, #A1987A, #5E5041 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: #cf8a46; --color-2: #f3f5c8; --color-3: #b4c383; --color-4: #a1987a; --color-5: #5e5041. 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