← Back to Editor

#CC6699 · #BF8099 · #B39999 · #A6B399 · #99CC99

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

#CC6699

Dark Violet · LightCoral · Rose Pink

HEX
#CC6699
RGB
rgb(204, 102, 153)
HSL
hsl(330, 50%, 60%)
HSB
hsb(330, 50%, 80%)
CMYK
cmyk(0%, 50%, 25%, 20%)
Oklch
oklch(64.5% 0.141 350.5)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#BF8099

Rouge · DarkGray · Rose Pink

HEX
#BF8099
RGB
rgb(191, 128, 153)
HSL
hsl(336, 33%, 63%)
HSB
hsb(336, 33%, 75%)
CMYK
cmyk(0%, 33%, 20%, 25%)
Oklch
oklch(67.1% 0.084 354.1)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#B39999

Peach Pink · DarkGray · Coral Red

HEX
#B39999
RGB
rgb(179, 153, 153)
HSL
hsl(0, 15%, 65%)
HSB
hsb(0, 15%, 70%)
CMYK
cmyk(0%, 15%, 15%, 30%)
Oklch
oklch(70.6% 0.031 17.9)

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

#A6B399

Celadon · DarkGray · Apple Green

HEX
#A6B399
RGB
rgb(166, 179, 153)
HSL
hsl(90, 15%, 65%)
HSB
hsb(90, 15%, 70%)
CMYK
cmyk(7%, 0%, 15%, 30%)
Oklch
oklch(74.9% 0.039 129.1)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#99CC99

Celadon · DarkSeaGreen · Apple Green

HEX
#99CC99
RGB
rgb(153, 204, 153)
HSL
hsl(120, 33%, 70%)
HSB
hsb(120, 25%, 80%)
CMYK
cmyk(25%, 0%, 25%, 20%)
Oklch
oklch(79.6% 0.089 144.7)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC6699
66CC99

Analogous

CC66CC
CC6699
CC6666

Triadic

CC6699
99CC66
6699CC

Split-Comp.

CC6699
66CC66
66CCCC

Tetradic

CC6699
CCCC66
66CC99
6666CC

Contrast Matrix WCAG 2.1 Contrast

CC6699
BF8099
B39999
A6B399
99CC99
—
1.1
Fail
1.3
Fail
1.6
Fail
1.9
Fail
1.1
Fail
—
1.2
Fail
1.4
Fail
1.7
Fail
1.3
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
1.6
Fail
1.4
Fail
1.2
Fail
—
1.2
Fail
1.9
Fail
1.7
Fail
1.4
Fail
1.2
Fail
—
White BG
3.5AA Large
3.1AA Large
2.6Fail
2.2Fail
1.8Fail
Black BG
5.9AA
6.8AA
7.9AAA
9.5AAA
11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A09F8D
A4A393
A8A899
ACAC9F
AFB0A5

Deuteranopia

A6AD8A
A7AC92
A9AB99
ABAAA1
ACA8A8

Tritanopia

C78381
BC8E8D
B29999
A7A4A5
9CAFB1

Achromatopsia

8A8A8A
969696
A1A1A1
ACACAC
B7B7B7

Shades & Tints Shades & Tints

#CC6699

Dark
Light

#BF8099

Dark
Light

#B39999

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc6699;
  --color-2: #bf8099;
  --color-3: #b39999;
  --color-4: #a6b399;
  --color-5: #99cc99;
}

SCSS

$color-1: #cc6699;
$color-2: #bf8099;
$color-3: #b39999;
$color-4: #a6b399;
$color-5: #99cc99;

TAILWIND

colors: {
  'brand-1': '#cc6699',
  'brand-2': '#bf8099',
  'brand-3': '#b39999',
  'brand-4': '#a6b399',
  'brand-5': '#99cc99',
}

RGB Array

[204, 102, 153], [191, 128, 153], [179, 153, 153], [166, 179, 153], [153, 204, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CC6699, #BF8099, #B39999, #A6B399, #99CC99 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #cc6699; --color-2: #bf8099; --color-3: #b39999; --color-4: #a6b399; --color-5: #99cc99. 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. Restrained colors convey professionalism and trust. 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