← Back to Editor

#BA509F · #CCBEA3 · #E7DFB5 · #F5C042 · #A06C91

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

#BA509F

Rose Purple · MediumOrchid · Violet

HEX
#BA509F
RGB
rgb(186, 80, 159)
HSL
hsl(315, 43%, 52%)
HSB
hsb(315, 57%, 73%)
CMYK
cmyk(0%, 57%, 15%, 27%)
Oklch
oklch(59.3% 0.165 338.5)

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

#CCBEA3

Goose Yellow · Tan · Sunflower

HEX
#CCBEA3
RGB
rgb(204, 190, 163)
HSL
hsl(40, 29%, 72%)
HSB
hsb(40, 20%, 80%)
CMYK
cmyk(0%, 7%, 20%, 20%)
Oklch
oklch(80.6% 0.040 83.8)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#E7DFB5

Fresh Green · Wheat · Lemon Cream

HEX
#E7DFB5
RGB
rgb(231, 223, 181)
HSL
hsl(50, 51%, 81%)
HSB
hsb(50, 22%, 91%)
CMYK
cmyk(0%, 3%, 22%, 9%)
Oklch
oklch(89.9% 0.056 98.4)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#F5C042

Ginger · SandyBrown · Sunflower

HEX
#F5C042
RGB
rgb(245, 192, 66)
HSL
hsl(42, 90%, 61%)
HSB
hsb(42, 73%, 96%)
CMYK
cmyk(0%, 22%, 73%, 4%)
Oklch
oklch(83.4% 0.149 85.0)

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

#A06C91

Rose Purple · Gray · Violet

HEX
#A06C91
RGB
rgb(160, 108, 145)
HSL
hsl(317, 21%, 53%)
HSB
hsb(317, 33%, 63%)
CMYK
cmyk(0%, 32%, 9%, 37%)
Oklch
oklch(59.8% 0.083 337.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BA509F
50B96A

Analogous

9F50B9
BA509F
B9506A

Triadic

BA509F
9FB950
509FB9

Split-Comp.

BA509F
6AB950
50B99F

Tetradic

BA509F
B99F50
50B96A
506AB9

Contrast Matrix WCAG 2.1 Contrast

BA509F
CCBEA3
E7DFB5
F5C042
A06C91
—
2.4
Fail
3.3
AA Large
2.6
Fail
1.1
Fail
2.4
Fail
—
1.4
Fail
1.1
Fail
2.3
Fail
3.3
AA Large
1.4
Fail
—
1.2
Fail
3.1
AA Large
2.6
Fail
1.1
Fail
1.2
Fail
—
2.5
Fail
1.1
Fail
2.3
Fail
3.1
AA Large
2.5
Fail
—
White BG
4.4AA Large
1.8Fail
1.3Fail
1.7Fail
4.2AA Large
Black BG
4.7AA
11.5AAA
15.6AAA
12.5AAA
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8B8C
C6C6AA
E4E3BF
DEDE60
898988

Deuteranopia

929A87
C7C8AB
E4E5C2
E1E568
8D9086

Tritanopia

B57D79
CBAFB0
E7C7C9
F2797E
9D817F

Achromatopsia

797979
BFBFBF
DDDDDD
C1C1C1
808080

Shades & Tints Shades & Tints

#BA509F

Dark
Light

#CCBEA3

Dark
Light

#E7DFB5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ba509f;
  --color-2: #ccbea3;
  --color-3: #e7dfb5;
  --color-4: #f5c042;
  --color-5: #a06c91;
}

SCSS

$color-1: #ba509f;
$color-2: #ccbea3;
$color-3: #e7dfb5;
$color-4: #f5c042;
$color-5: #a06c91;

TAILWIND

colors: {
  'brand-1': '#ba509f',
  'brand-2': '#ccbea3',
  'brand-3': '#e7dfb5',
  'brand-4': '#f5c042',
  'brand-5': '#a06c91',
}

RGB Array

[186, 80, 159], [204, 190, 163], [231, 223, 181], [245, 192, 66], [160, 108, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BA509F, #CCBEA3, #E7DFB5, #F5C042, #A06C91 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: #ba509f; --color-2: #ccbea3; --color-3: #e7dfb5; --color-4: #f5c042; --color-5: #a06c91. 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