← Back to Editor

#CAAD7D · #AEA78D · #BD9394 · #C7807A · #D45528

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

#CAAD7D

Ginger · Tan · Warm Sun

HEX
#CAAD7D
RGB
rgb(202, 173, 125)
HSL
hsl(37, 42%, 64%)
HSB
hsb(37, 38%, 79%)
CMYK
cmyk(0%, 14%, 38%, 21%)
Oklch
oklch(76.2% 0.072 79.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#AEA78D

Ginger · DarkGray · Sunflower

HEX
#AEA78D
RGB
rgb(174, 167, 141)
HSL
hsl(47, 17%, 62%)
HSB
hsb(47, 19%, 68%)
CMYK
cmyk(0%, 4%, 19%, 32%)
Oklch
oklch(72.7% 0.037 94.7)

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

#BD9394

Peach Pink · DarkGray · Coral Red

HEX
#BD9394
RGB
rgb(189, 147, 148)
HSL
hsl(359, 24%, 66%)
HSB
hsb(359, 22%, 74%)
CMYK
cmyk(0%, 22%, 22%, 26%)
Oklch
oklch(70.3% 0.051 16.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#C7807A

Peach Pink · DarkSalmon · Coral Red

HEX
#C7807A
RGB
rgb(199, 128, 122)
HSL
hsl(5, 41%, 63%)
HSB
hsb(5, 39%, 78%)
CMYK
cmyk(0%, 36%, 39%, 22%)
Oklch
oklch(67.2% 0.089 25.0)

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

#D45528

Tangerine · Chocolate · Amber Brown

HEX
#D45528
RGB
rgb(212, 85, 40)
HSL
hsl(16, 68%, 49%)
HSB
hsb(16, 81%, 83%)
CMYK
cmyk(0%, 60%, 81%, 17%)
Oklch
oklch(60.9% 0.170 38.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CAAD7D
7D9ACA

Analogous

CA867D
CAAD7D
C1CA7D

Triadic

CAAD7D
7DCAAC
AC7DCA

Split-Comp.

CAAD7D
7DC1CA
867DCA

Tetradic

CAAD7D
7DCA86
7D9ACA
CA7DC1

Contrast Matrix WCAG 2.1 Contrast

CAAD7D
AEA78D
BD9394
C7807A
D45528
—
1.1
Fail
1.3
Fail
1.4
Fail
1.9
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
1.7
Fail
1.3
Fail
1.1
Fail
—
1.1
Fail
1.5
Fail
1.4
Fail
1.3
Fail
1.1
Fail
—
1.3
Fail
1.9
Fail
1.7
Fail
1.5
Fail
1.3
Fail
—
White BG
2.1Fail
2.4Fail
2.7Fail
3.1AA Large
4.1AA Large
Black BG
9.8AAA
8.7AAA
7.8AAA
6.8AA
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBD89
ABAB93
ABAA94
A8A87B
9D9C33

Deuteranopia

BFC18B
ABAC95
ADB094
ACB27C
A4AE36

Tritanopia

C99294
AE9899
BB9494
C37D7D
CE3B3D

Achromatopsia

B0B0B0
A6A6A6
A0A0A0
959595
767676

Shades & Tints Shades & Tints

#CAAD7D

Dark
Light

#AEA78D

Dark
Light

#BD9394

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #caad7d;
  --color-2: #aea78d;
  --color-3: #bd9394;
  --color-4: #c7807a;
  --color-5: #d45528;
}

SCSS

$color-1: #caad7d;
$color-2: #aea78d;
$color-3: #bd9394;
$color-4: #c7807a;
$color-5: #d45528;

TAILWIND

colors: {
  'brand-1': '#caad7d',
  'brand-2': '#aea78d',
  'brand-3': '#bd9394',
  'brand-4': '#c7807a',
  'brand-5': '#d45528',
}

RGB Array

[202, 173, 125], [174, 167, 141], [189, 147, 148], [199, 128, 122], [212, 85, 40]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CAAD7D, #AEA78D, #BD9394, #C7807A, #D45528 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: #caad7d; --color-2: #aea78d; --color-3: #bd9394; --color-4: #c7807a; --color-5: #d45528. 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