← Back to Editor

#ACC66B · #FFFFFF · #301832 · #553C64 · #BD7C9E

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 LibraryData Visualization

Color Details Color Details

#ACC66B

Grass Green · DarkSeaGreen · Olive Green

HEX
#ACC66B
RGB
rgb(172, 198, 107)
HSL
hsl(77, 44%, 60%)
HSB
hsb(77, 46%, 78%)
CMYK
cmyk(13%, 0%, 46%, 22%)
Oklch
oklch(78.7% 0.121 122.3)

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

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#301832

Dark Plum · DarkSlateGray · Dark Purple

HEX
#301832
RGB
rgb(48, 24, 50)
HSL
hsl(295, 35%, 15%)
HSB
hsb(295, 52%, 20%)
CMYK
cmyk(4%, 52%, 0%, 80%)
Oklch
oklch(25.4% 0.058 324.3)

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

#553C64

Dark Plum · DarkSlateBlue · Eggplant

HEX
#553C64
RGB
rgb(85, 60, 100)
HSL
hsl(278, 25%, 31%)
HSB
hsb(278, 40%, 39%)
CMYK
cmyk(15%, 40%, 0%, 61%)
Oklch
oklch(40.1% 0.072 312.1)

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

#BD7C9E

Mauve · DarkGray · Rose Pink

HEX
#BD7C9E
RGB
rgb(189, 124, 158)
HSL
hsl(329, 33%, 61%)
HSB
hsb(329, 34%, 74%)
CMYK
cmyk(0%, 34%, 16%, 26%)
Oklch
oklch(66.4% 0.092 347.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ACC66B
866CC6

Analogous

C6B26C
ACC66B
80C66C

Triadic

ACC66B
6CACC6
C66CAC

Split-Comp.

ACC66B
6C80C6
B26CC6

Tetradic

ACC66B
6CC6B2
866CC6
C66C80

Contrast Matrix WCAG 2.1 Contrast

ACC66B
FFFFFF
301832
553C64
BD7C9E
—
1.9
Fail
8.5
AAA
5.0
AA
1.7
Fail
1.9
Fail
—
16.1
AAA
9.5
AAA
3.2
AA Large
8.5
AAA
16.1
AAA
—
1.7
Fail
5.0
AA
5.0
AA
9.5
AAA
1.7
Fail
—
3.0
Fail
1.7
Fail
3.2
AA Large
5.0
AA
3.0
Fail
—
White BG
1.9Fail
1.0Fail
16.1AAA
9.5AAA
3.2AA Large
Black BG
11.0AAA
21.0AAA
1.3Fail
2.2Fail
6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B781
FFFFFF
26252C
4A4A5A
A1A096

Deuteranopia

B6B486
FFFFFF
27292A
4C4E58
A5A994

Tritanopia

AD9296
FFFFFF
2F2726
545351
BA8F8E

Achromatopsia

B4B4B4
FFFFFF
222222
484848
939393

Shades & Tints Shades & Tints

#ACC66B

Dark
Light

#FFFFFF

Dark
Light

#301832

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #acc66b;
  --color-2: #ffffff;
  --color-3: #301832;
  --color-4: #553c64;
  --color-5: #bd7c9e;
}

SCSS

$color-1: #acc66b;
$color-2: #ffffff;
$color-3: #301832;
$color-4: #553c64;
$color-5: #bd7c9e;

TAILWIND

colors: {
  'brand-1': '#acc66b',
  'brand-2': '#ffffff',
  'brand-3': '#301832',
  'brand-4': '#553c64',
  'brand-5': '#bd7c9e',
}

RGB Array

[172, 198, 107], [255, 255, 255], [48, 24, 50], [85, 60, 100], [189, 124, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ACC66B, #FFFFFF, #301832, #553C64, #BD7C9E is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #acc66b; --color-2: #ffffff; --color-3: #301832; --color-4: #553c64; --color-5: #bd7c9e. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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