← Back to Editor

#CF4C4C · #E0CB80 · #705246 · #548782 · #C4B16C

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CF4C4C

Crimson · Tomato · Passion Red

HEX
#CF4C4C
RGB
rgb(207, 76, 76)
HSL
hsl(0, 58%, 55%)
HSB
hsb(0, 63%, 81%)
CMYK
cmyk(0%, 63%, 63%, 19%)
Oklch
oklch(59.4% 0.166 23.6)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#E0CB80

Ginger · BurlyWood · Sunflower

HEX
#E0CB80
RGB
rgb(224, 203, 128)
HSL
hsl(47, 61%, 69%)
HSB
hsb(47, 43%, 88%)
CMYK
cmyk(0%, 9%, 43%, 12%)
Oklch
oklch(84.3% 0.098 94.3)

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

#705246

Tangerine · DimGray · Amber Brown

HEX
#705246
RGB
rgb(112, 82, 70)
HSL
hsl(17, 23%, 36%)
HSB
hsb(17, 37%, 44%)
CMYK
cmyk(0%, 27%, 37%, 56%)
Oklch
oklch(46.7% 0.045 42.8)

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

#548782

Mineral Blue · SlateGray · Mint Ice

HEX
#548782
RGB
rgb(84, 135, 130)
HSL
hsl(174, 23%, 43%)
HSB
hsb(174, 38%, 53%)
CMYK
cmyk(38%, 0%, 4%, 47%)
Oklch
oklch(58.6% 0.055 187.9)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#C4B16C

Ginger · Tan · Sunflower

HEX
#C4B16C
RGB
rgb(196, 177, 108)
HSL
hsl(47, 43%, 60%)
HSB
hsb(47, 45%, 77%)
CMYK
cmyk(0%, 10%, 45%, 23%)
Oklch
oklch(76.1% 0.092 94.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CF4C4C
4ACFCF

Analogous

CF4A8C
CF4C4C
CF8C4A

Triadic

CF4C4C
4ACF4A
4A4ACF

Split-Comp.

CF4C4C
4ACF8C
4A8CCF

Tetradic

CF4C4C
8CCF4A
4ACFCF
8C4ACF

Contrast Matrix WCAG 2.1 Contrast

CF4C4C
E0CB80
705246
548782
C4B16C
—
2.7
Fail
1.6
Fail
1.1
Fail
2.1
Fail
2.7
Fail
—
4.4
AA Large
2.5
Fail
1.3
Fail
1.6
Fail
4.4
AA Large
—
1.7
Fail
3.3
AA Large
1.1
Fail
2.5
Fail
1.7
Fail
—
1.9
Fail
2.1
Fail
1.3
Fail
3.3
AA Large
1.9
Fail
—
White BG
4.4AA Large
1.6Fail
7.0AAA
4.1AA Large
2.1Fail
Black BG
4.8AA
13.0AAA
3.0Fail
5.2AA
9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

96954C
D7D792
636349
6A6B83
BCBC7D

Deuteranopia

9EA84C
D8DA97
65674A
676384
BDBE81

Tritanopia

C84C4C
DFA0A4
6E4B4C
578484
C38A8D

Achromatopsia

737373
C9C9C9
5A5A5A
777777
AFAFAF

Shades & Tints Shades & Tints

#CF4C4C

Dark
Light

#E0CB80

Dark
Light

#705246

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cf4c4c;
  --color-2: #e0cb80;
  --color-3: #705246;
  --color-4: #548782;
  --color-5: #c4b16c;
}

SCSS

$color-1: #cf4c4c;
$color-2: #e0cb80;
$color-3: #705246;
$color-4: #548782;
$color-5: #c4b16c;

TAILWIND

colors: {
  'brand-1': '#cf4c4c',
  'brand-2': '#e0cb80',
  'brand-3': '#705246',
  'brand-4': '#548782',
  'brand-5': '#c4b16c',
}

RGB Array

[207, 76, 76], [224, 203, 128], [112, 82, 70], [84, 135, 130], [196, 177, 108]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CF4C4C, #E0CB80, #705246, #548782, #C4B16C is ideal for: corporate websites, product showcases, portfolios. 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: #cf4c4c; --color-2: #e0cb80; --color-3: #705246; --color-4: #548782; --color-5: #c4b16c. 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. 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