#9966CC + #B380B3 + #CC9999 + #E6B380 + #FFCC66 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#9966CC

Dark Plum · MediumOrchid · Violet

HEX

#9966CC

RGB

rgb(153, 102, 204)

HSL

hsl(270, 50%, 60%)

HSB

hsb(270, 50%, 80%)

CMYK

cmyk(25%, 50%, 0%, 20%)

Oklch

oklch(60.8% 0.156 305.3)

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

#B380B3

Rose Purple · DarkGray · Violet

HEX

#B380B3

RGB

rgb(179, 128, 179)

HSL

hsl(300, 25%, 60%)

HSB

hsb(300, 28%, 70%)

CMYK

cmyk(0%, 28%, 0%, 30%)

Oklch

oklch(66.8% 0.094 326.6)

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

#CC9999

Peach Pink · Tan · Coral Red

HEX

#CC9999

RGB

rgb(204, 153, 153)

HSL

hsl(0, 33%, 70%)

HSB

hsb(0, 25%, 80%)

CMYK

cmyk(0%, 25%, 25%, 20%)

Oklch

oklch(73.1% 0.061 18.7)

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

#E6B380

Ginger · BurlyWood · Warm Sun

HEX

#E6B380

RGB

rgb(230, 179, 128)

HSL

hsl(30, 67%, 70%)

HSB

hsb(30, 44%, 90%)

CMYK

cmyk(0%, 22%, 44%, 10%)

Oklch

oklch(80.2% 0.089 66.0)

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

#FFCC66

Ginger · SandyBrown · Sunflower

HEX

#FFCC66

RGB

rgb(255, 204, 102)

HSL

hsl(40, 100%, 70%)

HSB

hsb(40, 60%, 100%)

CMYK

cmyk(0%, 20%, 60%, 0%)

Oklch

oklch(87.1% 0.133 82.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9966CC

99CC66

Analogous

6666CC

9966CC

CC66CC

Triadic

9966CC

CC9966

66CC99

Split-Comp.

9966CC

CCCC66

66CC66

Tetradic

9966CC

CC6666

99CC66

66CCCC

Contrast Matrix WCAG 2.1 Contrast

9966CC	B380B3	CC9999	E6B380	FFCC66
—	1.3 Fail	1.7 Fail	2.2 Fail	2.7 Fail
1.3 Fail	—	1.3 Fail	1.7 Fail	2.1 Fail
1.7 Fail	1.3 Fail	—	1.3 Fail	1.6 Fail
2.2 Fail	1.7 Fail	1.3 Fail	—	1.3 Fail
2.7 Fail	2.1 Fail	1.6 Fail	1.3 Fail	—

White BG

4.1AA Large

3.2AA Large

2.4Fail

1.9Fail

1.5Fail

Black BG

5.1AA

6.7AA

8.6AAA

11.1AAA

14.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8382B3

9D9CA7

B6B599

D0CF8C

E9E87F

Deuteranopia

868AAD

A0A4A4

B9BD99

D3D78F

ECF085

Tritanopia

96A09C

B09D9B

C99999

E39698

FC9296

Achromatopsia

818181

959595

A8A8A8

BCBCBC

D0D0D0

Shades & Tints Shades & Tints

#9966CC

Dark

Light

#B380B3

Dark

Light

#CC9999

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9966cc;
  --color-2: #b380b3;
  --color-3: #cc9999;
  --color-4: #e6b380;
  --color-5: #ffcc66;
}

SCSS

$color-1: #9966cc;
$color-2: #b380b3;
$color-3: #cc9999;
$color-4: #e6b380;
$color-5: #ffcc66;

TAILWIND

colors: {
  'brand-1': '#9966cc',
  'brand-2': '#b380b3',
  'brand-3': '#cc9999',
  'brand-4': '#e6b380',
  'brand-5': '#ffcc66',
}

RGB Array

[153, 102, 204], [179, 128, 179], [204, 153, 153], [230, 179, 128], [255, 204, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #9966CC, #B380B3, #CC9999, #E6B380, #FFCC66 is ideal for: health products, baby brands, fresh-style blogs. 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: #9966cc; --color-2: #b380b3; --color-3: #cc9999; --color-4: #e6b380; --color-5: #ffcc66. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 nature-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