← Back to Editor

#993161 · #CC7357 · #CCA557 · #E3DB47 · #B2D132

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

#993161

Dark Violet · Brown · Camellia

HEX
#993161
RGB
rgb(153, 49, 97)
HSL
hsl(332, 51%, 40%)
HSB
hsb(332, 68%, 60%)
CMYK
cmyk(0%, 68%, 37%, 40%)
Oklch
oklch(48.1% 0.146 355.6)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#CC7357

Crimson · Coral · Passion Red

HEX
#CC7357
RGB
rgb(204, 115, 87)
HSL
hsl(14, 53%, 57%)
HSB
hsb(14, 57%, 80%)
CMYK
cmyk(0%, 44%, 57%, 20%)
Oklch
oklch(64.9% 0.120 38.2)

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

#CCA557

Ginger · SandyBrown · Sunflower

HEX
#CCA557
RGB
rgb(204, 165, 87)
HSL
hsl(40, 53%, 57%)
HSB
hsb(40, 57%, 80%)
CMYK
cmyk(0%, 19%, 57%, 20%)
Oklch
oklch(74.1% 0.107 83.1)

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

#E3DB47

Autumn Sage · SandyBrown · Sunflower

HEX
#E3DB47
RGB
rgb(227, 219, 71)
HSL
hsl(57, 74%, 58%)
HSB
hsb(57, 69%, 89%)
CMYK
cmyk(0%, 4%, 69%, 11%)
Oklch
oklch(87.2% 0.163 106.2)

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

#B2D132

Grass Green · GreenYellow · Olive Green

HEX
#B2D132
RGB
rgb(178, 209, 50)
HSL
hsl(72, 63%, 51%)
HSB
hsb(72, 76%, 82%)
CMYK
cmyk(15%, 0%, 76%, 18%)
Oklch
oklch(81.0% 0.178 120.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

993161
329A69

Analogous

9A3297
993161
9A3532

Triadic

993161
639A32
32639A

Split-Comp.

993161
329A35
32979A

Tetradic

993161
979A32
329A69
35329A

Contrast Matrix WCAG 2.1 Contrast

993161
CC7357
CCA557
E3DB47
B2D132
—
2.1
Fail
3.1
AA Large
4.9
AA
4.1
AA Large
2.1
Fail
—
1.5
Fail
2.4
Fail
2.0
Fail
3.1
AA Large
1.5
Fail
—
1.6
Fail
1.3
Fail
4.9
AA
2.4
Fail
1.6
Fail
—
1.2
Fail
4.1
AA Large
2.0
Fail
1.3
Fail
1.2
Fail
—
White BG
7.1AAA
3.4AA Large
2.3Fail
1.4Fail
1.7Fail
Black BG
3.0Fail
6.2AA
9.1AAA
14.5AAA
12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6C6B55
A5A55E
BBBB6A
E0DF6B
BFC058

Deuteranopia

727A53
ABB15F
BDC06E
E0E173
BEBB62

Tritanopia

944C4A
C86364
CA797C
E3878D
B4777E

Achromatopsia

565656
8A8A8A
A8A8A8
CDCDCD
B6B6B6

Shades & Tints Shades & Tints

#993161

Dark
Light

#CC7357

Dark
Light

#CCA557

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #993161;
  --color-2: #cc7357;
  --color-3: #cca557;
  --color-4: #e3db47;
  --color-5: #b2d132;
}

SCSS

$color-1: #993161;
$color-2: #cc7357;
$color-3: #cca557;
$color-4: #e3db47;
$color-5: #b2d132;

TAILWIND

colors: {
  'brand-1': '#993161',
  'brand-2': '#cc7357',
  'brand-3': '#cca557',
  'brand-4': '#e3db47',
  'brand-5': '#b2d132',
}

RGB Array

[153, 49, 97], [204, 115, 87], [204, 165, 87], [227, 219, 71], [178, 209, 50]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #993161, #CC7357, #CCA557, #E3DB47, #B2D132 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: #993161; --color-2: #cc7357; --color-3: #cca557; --color-4: #e3db47; --color-5: #b2d132. 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