← Back to Editor

#CCAA78 · #C99F5A · #2B2924 · #BD04CF · #230219

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

#CCAA78

Ginger · Tan · Warm Sun

HEX
#CCAA78
RGB
rgb(204, 170, 120)
HSL
hsl(36, 45%, 64%)
HSB
hsb(36, 41%, 80%)
CMYK
cmyk(0%, 17%, 41%, 20%)
Oklch
oklch(75.7% 0.077 76.8)

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

#C99F5A

Ginger · SandyBrown · Warm Sun

HEX
#C99F5A
RGB
rgb(201, 159, 90)
HSL
hsl(37, 51%, 57%)
HSB
hsb(37, 55%, 79%)
CMYK
cmyk(0%, 21%, 55%, 21%)
Oklch
oklch(72.7% 0.100 78.5)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#2B2924

Ochre · DarkSlateGray · Dark Stone

HEX
#2B2924
RGB
rgb(43, 41, 36)
HSL
hsl(43, 9%, 15%)
HSB
hsb(43, 16%, 17%)
CMYK
cmyk(0%, 5%, 16%, 83%)
Oklch
oklch(28.1% 0.009 88.8)

Traditional「Ochre」· Paint「Dark Stone」· Creative Midnight Shadow

#BD04CF

Royal Purple · DarkViolet · Violet

HEX
#BD04CF
RGB
rgb(189, 4, 207)
HSL
hsl(295, 96%, 41%)
HSB
hsb(295, 98%, 81%)
CMYK
cmyk(9%, 98%, 0%, 19%)
Oklch
oklch(57.3% 0.268 323.5)

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

#230219

Rose Purple · Black · Dark Purple

HEX
#230219
RGB
rgb(35, 2, 25)
HSL
hsl(318, 89%, 7%)
HSB
hsb(318, 94%, 14%)
CMYK
cmyk(0%, 94%, 29%, 86%)
Oklch
oklch(17.7% 0.068 342.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCAA78
7A9BCD

Analogous

CD827A
CCAA78
C4CD7A

Triadic

CCAA78
7ACDAB
AB7ACD

Split-Comp.

CCAA78
7AC4CD
827ACD

Tetradic

CCAA78
7ACD82
7A9BCD
CD7AC4

Contrast Matrix WCAG 2.1 Contrast

CCAA78
C99F5A
2B2924
BD04CF
230219
—
1.1
Fail
6.6
AA
2.3
Fail
8.8
AAA
1.1
Fail
—
5.9
AA
2.1
Fail
7.9
AAA
6.6
AA
5.9
AA
—
2.8
Fail
1.3
Fail
2.3
Fail
2.1
Fail
2.8
Fail
—
3.7
AA Large
8.8
AAA
7.9
AAA
1.3
Fail
3.7
AA Large
—
White BG
2.2Fail
2.4Fail
14.5AAA
5.1AA
19.2AAA
Black BG
9.6AAA
8.6AAA
1.4Fail
4.1AA Large
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBD84
B7B66B
2A2A25
6D6B9E
151413

Deuteranopia

BFC287
B9BC6F
2A2A26
788592
171912

Tritanopia

CA8E90
C7787B
2B2626
B4776F
210F0E

Achromatopsia

AEAEAE
A4A4A4
292929
525252
0E0E0E

Shades & Tints Shades & Tints

#CCAA78

Dark
Light

#C99F5A

Dark
Light

#2B2924

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccaa78;
  --color-2: #c99f5a;
  --color-3: #2b2924;
  --color-4: #bd04cf;
  --color-5: #230219;
}

SCSS

$color-1: #ccaa78;
$color-2: #c99f5a;
$color-3: #2b2924;
$color-4: #bd04cf;
$color-5: #230219;

TAILWIND

colors: {
  'brand-1': '#ccaa78',
  'brand-2': '#c99f5a',
  'brand-3': '#2b2924',
  'brand-4': '#bd04cf',
  'brand-5': '#230219',
}

RGB Array

[204, 170, 120], [201, 159, 90], [43, 41, 36], [189, 4, 207], [35, 2, 25]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCAA78, #C99F5A, #2B2924, #BD04CF, #230219 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #ccaa78; --color-2: #c99f5a; --color-3: #2b2924; --color-4: #bd04cf; --color-5: #230219. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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. 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