← Back to Editor

#D0746E · #CE7F63 · #CC8A58 · #CA954D · #C8A042

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

#D0746E

Peach Pink · LightCoral · Coral Red

HEX
#D0746E
RGB
rgb(208, 116, 110)
HSL
hsl(4, 51%, 62%)
HSB
hsb(4, 47%, 82%)
CMYK
cmyk(0%, 44%, 47%, 18%)
Oklch
oklch(66.0% 0.117 24.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#CE7F63

Tangerine · DarkSalmon · Warm Sun

HEX
#CE7F63
RGB
rgb(206, 127, 99)
HSL
hsl(16, 52%, 60%)
HSB
hsb(16, 52%, 81%)
CMYK
cmyk(0%, 38%, 52%, 19%)
Oklch
oklch(67.4% 0.106 40.2)

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

#CC8A58

Tangerine · DarkSalmon · Warm Sun

HEX
#CC8A58
RGB
rgb(204, 138, 88)
HSL
hsl(26, 53%, 57%)
HSB
hsb(26, 57%, 80%)
CMYK
cmyk(0%, 32%, 57%, 20%)
Oklch
oklch(68.9% 0.104 57.1)

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

#CA954D

Ginger · SandyBrown · Warm Sun

HEX
#CA954D
RGB
rgb(202, 149, 77)
HSL
hsl(35, 54%, 55%)
HSB
hsb(35, 62%, 79%)
CMYK
cmyk(0%, 26%, 62%, 21%)
Oklch
oklch(70.6% 0.110 72.8)

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

#C8A042

Ginger · GoldenRod · Sunflower

HEX
#C8A042
RGB
rgb(200, 160, 66)
HSL
hsl(42, 55%, 52%)
HSB
hsb(42, 67%, 78%)
CMYK
cmyk(0%, 20%, 67%, 22%)
Oklch
oklch(72.5% 0.120 85.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D0746E
6DC9D0

Analogous

D06D98
D0746E
D0A56D

Triadic

D0746E
6DD073
736DD0

Split-Comp.

D0746E
6DD0A5
6D98D0

Tetradic

D0746E
98D06D
6DC9D0
A56DD0

Contrast Matrix WCAG 2.1 Contrast

D0746E
CE7F63
CC8A58
CA954D
C8A042
—
1.1
Fail
1.1
Fail
1.2
Fail
1.3
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.3
Fail
1.1
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.2
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
White BG
3.3AA Large
3.1AA Large
2.9Fail
2.7Fail
2.5Fail
Black BG
6.4AA
6.8AA
7.3AAA
7.9AAA
8.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A76F
ACAB6A
AFAF64
B3B35E
B7B659

Deuteranopia

AEB470
B0B66B
B3B867
B6BA63
B9BC5E

Tritanopia

CB7171
CA6F70
C96E70
C76C6F
C66B6F

Achromatopsia

8F8F8F
939393
989898
9D9D9D
A1A1A1

Shades & Tints Shades & Tints

#D0746E

Dark
Light

#CE7F63

Dark
Light

#CC8A58

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d0746e;
  --color-2: #ce7f63;
  --color-3: #cc8a58;
  --color-4: #ca954d;
  --color-5: #c8a042;
}

SCSS

$color-1: #d0746e;
$color-2: #ce7f63;
$color-3: #cc8a58;
$color-4: #ca954d;
$color-5: #c8a042;

TAILWIND

colors: {
  'brand-1': '#d0746e',
  'brand-2': '#ce7f63',
  'brand-3': '#cc8a58',
  'brand-4': '#ca954d',
  'brand-5': '#c8a042',
}

RGB Array

[208, 116, 110], [206, 127, 99], [204, 138, 88], [202, 149, 77], [200, 160, 66]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D0746E, #CE7F63, #CC8A58, #CA954D, #C8A042 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: #d0746e; --color-2: #ce7f63; --color-3: #cc8a58; --color-4: #ca954d; --color-5: #c8a042. 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