← Back to Editor

#709271 · #CC884D · #DB6450 · #D44661 · #4D4340

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 Library

Color Details Color Details

#709271

Celadon · Gray · Olive Green

HEX
#709271
RGB
rgb(112, 146, 113)
HSL
hsl(122, 13%, 51%)
HSB
hsb(122, 23%, 57%)
CMYK
cmyk(23%, 0%, 23%, 43%)
Oklch
oklch(62.5% 0.062 145.5)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#CC884D

Tangerine · Coral · Warm Sun

HEX
#CC884D
RGB
rgb(204, 136, 77)
HSL
hsl(28, 55%, 55%)
HSB
hsb(28, 62%, 80%)
CMYK
cmyk(0%, 33%, 62%, 20%)
Oklch
oklch(68.4% 0.112 60.1)

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

#DB6450

Vermilion · Tomato · Passion Red

HEX
#DB6450
RGB
rgb(219, 100, 80)
HSL
hsl(9, 66%, 59%)
HSB
hsb(9, 63%, 86%)
CMYK
cmyk(0%, 54%, 63%, 14%)
Oklch
oklch(64.5% 0.154 31.4)

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

#D44661

Vermilion · Tomato · Passion Red

HEX
#D44661
RGB
rgb(212, 70, 97)
HSL
hsl(349, 62%, 55%)
HSB
hsb(349, 67%, 83%)
CMYK
cmyk(0%, 67%, 54%, 17%)
Oklch
oklch(60.0% 0.178 13.1)

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

#4D4340

Crimson · DarkSlateGray · Charcoal

HEX
#4D4340
RGB
rgb(77, 67, 64)
HSL
hsl(14, 9%, 28%)
HSB
hsb(14, 17%, 30%)
CMYK
cmyk(0%, 13%, 17%, 70%)
Oklch
oklch(39.2% 0.015 37.4)

Traditional「Crimson」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

709271
927291

Analogous

819272
709271
729283

Triadic

709271
737292
927372

Split-Comp.

709271
837292
927281

Tetradic

709271
728192
927291
928372

Contrast Matrix WCAG 2.1 Contrast

709271
CC884D
DB6450
D44661
4D4340
—
1.2
Fail
1.0
Fail
1.2
Fail
2.8
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
3.3
AA Large
1.0
Fail
1.2
Fail
—
1.2
Fail
2.7
Fail
1.2
Fail
1.5
Fail
1.2
Fail
—
2.2
Fail
2.8
Fail
3.3
AA Large
2.7
Fail
2.2
Fail
—
White BG
3.5AA Large
2.9Fail
3.5AA Large
4.3AA Large
9.6AAA
Black BG
6.0AA
7.2AAA
6.0AA
4.8AA
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7F7F79
AFAE5B
A7A655
97955A
494941

Deuteranopia

7D7A7B
B3B85F
AEB756
9FA959
494A41

Tritanopia

727F81
C96769
D5595A
CD5554
4C4141

Achromatopsia

848484
969696
858585
747474
464646

Shades & Tints Shades & Tints

#709271

Dark
Light

#CC884D

Dark
Light

#DB6450

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #709271;
  --color-2: #cc884d;
  --color-3: #db6450;
  --color-4: #d44661;
  --color-5: #4d4340;
}

SCSS

$color-1: #709271;
$color-2: #cc884d;
$color-3: #db6450;
$color-4: #d44661;
$color-5: #4d4340;

TAILWIND

colors: {
  'brand-1': '#709271',
  'brand-2': '#cc884d',
  'brand-3': '#db6450',
  'brand-4': '#d44661',
  'brand-5': '#4d4340',
}

RGB Array

[112, 146, 113], [204, 136, 77], [219, 100, 80], [212, 70, 97], [77, 67, 64]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #709271, #CC884D, #DB6450, #D44661, #4D4340 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: #709271; --color-2: #cc884d; --color-3: #db6450; --color-4: #d44661; --color-5: #4d4340. 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