← Back to Editor

#803C70 · #A3537D · #AE757A · #B89676 · #C2B772

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

#803C70

Rose Purple · DimGray · Eggplant

HEX
#803C70
RGB
rgb(128, 60, 112)
HSL
hsl(314, 36%, 37%)
HSB
hsb(314, 53%, 50%)
CMYK
cmyk(0%, 53%, 13%, 50%)
Oklch
oklch(46.3% 0.116 337.1)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#A3537D

Rose Purple · Gray · Camellia

HEX
#A3537D
RGB
rgb(163, 83, 125)
HSL
hsl(329, 33%, 48%)
HSB
hsb(329, 49%, 64%)
CMYK
cmyk(0%, 49%, 23%, 36%)
Oklch
oklch(55.2% 0.117 348.9)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#AE757A

Crimson · Gray · Passion Red

HEX
#AE757A
RGB
rgb(174, 117, 122)
HSL
hsl(355, 26%, 57%)
HSB
hsb(355, 33%, 68%)
CMYK
cmyk(0%, 33%, 30%, 32%)
Oklch
oklch(62.3% 0.072 13.6)

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

#B89676

Tangerine · Tan · Warm Sun

HEX
#B89676
RGB
rgb(184, 150, 118)
HSL
hsl(29, 32%, 59%)
HSB
hsb(29, 36%, 72%)
CMYK
cmyk(0%, 18%, 36%, 28%)
Oklch
oklch(69.6% 0.060 64.8)

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

#C2B772

Autumn Sage · Tan · Sunflower

HEX
#C2B772
RGB
rgb(194, 183, 114)
HSL
hsl(52, 40%, 60%)
HSB
hsb(52, 41%, 76%)
CMYK
cmyk(0%, 6%, 41%, 24%)
Oklch
oklch(77.3% 0.090 100.3)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

803C70
3C804C

Analogous

6E3C80
803C70
803C4E

Triadic

803C70
70803C
3C7080

Split-Comp.

803C70
4E803C
3C806E

Tetradic

803C70
806E3C
3C804C
3C4E80

Contrast Matrix WCAG 2.1 Contrast

803C70
A3537D
AE757A
B89676
C2B772
—
1.5
Fail
2.0
Fail
2.7
Fail
3.7
AA Large
1.5
Fail
—
1.4
Fail
1.9
Fail
2.5
Fail
2.0
Fail
1.4
Fail
—
1.4
Fail
1.8
Fail
2.7
Fail
1.9
Fail
1.4
Fail
—
1.3
Fail
3.7
AA Large
2.5
Fail
1.8
Fail
1.3
Fail
—
White BG
7.5AAA
5.1AA
3.7AA Large
2.7Fail
2.0Fail
Black BG
2.8Fail
4.1AA Large
5.6AA
7.7AAA
10.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

636263
808073
959579
A9A97E
BDBD83

Deuteranopia

676C60
858B70
999D79
ABAE80
BEBF87

Tritanopia

7D5957
9F6B69
AB7878
B68485
C19093

Achromatopsia

565656
707070
878787
9D9D9D
B2B2B2

Shades & Tints Shades & Tints

#803C70

Dark
Light

#A3537D

Dark
Light

#AE757A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #803c70;
  --color-2: #a3537d;
  --color-3: #ae757a;
  --color-4: #b89676;
  --color-5: #c2b772;
}

SCSS

$color-1: #803c70;
$color-2: #a3537d;
$color-3: #ae757a;
$color-4: #b89676;
$color-5: #c2b772;

TAILWIND

colors: {
  'brand-1': '#803c70',
  'brand-2': '#a3537d',
  'brand-3': '#ae757a',
  'brand-4': '#b89676',
  'brand-5': '#c2b772',
}

RGB Array

[128, 60, 112], [163, 83, 125], [174, 117, 122], [184, 150, 118], [194, 183, 114]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #803C70, #A3537D, #AE757A, #B89676, #C2B772 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: #803c70; --color-2: #a3537d; --color-3: #ae757a; --color-4: #b89676; --color-5: #c2b772. 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