← Back to Editor

#383838 · #CCCA68 · #E39D71 · #E36694 · #CB15B7

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

#383838

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#383838
RGB
rgb(56, 56, 56)
HSL
hsl(0, 0%, 22%)
HSB
hsb(0, 0%, 22%)
CMYK
cmyk(0%, 0%, 0%, 78%)
Oklch
oklch(34.1% 0.000 89.9)

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

#CCCA68

Autumn Sage · BurlyWood · Sunflower

HEX
#CCCA68
RGB
rgb(204, 202, 104)
HSL
hsl(59, 50%, 60%)
HSB
hsb(59, 49%, 80%)
CMYK
cmyk(0%, 1%, 49%, 20%)
Oklch
oklch(82.0% 0.121 107.7)

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

#E39D71

Apricot · DarkSalmon · Warm Sun

HEX
#E39D71
RGB
rgb(227, 157, 113)
HSL
hsl(23, 67%, 67%)
HSB
hsb(23, 50%, 89%)
CMYK
cmyk(0%, 31%, 50%, 11%)
Oklch
oklch(75.5% 0.102 52.7)

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

#E36694

Rouge · LightCoral · Rose Pink

HEX
#E36694
RGB
rgb(227, 102, 148)
HSL
hsl(338, 69%, 65%)
HSB
hsb(338, 55%, 89%)
CMYK
cmyk(0%, 55%, 35%, 11%)
Oklch
oklch(67.5% 0.162 359.3)

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

#CB15B7

Rose Purple · MediumVioletRed · Violet

HEX
#CB15B7
RGB
rgb(203, 21, 183)
HSL
hsl(307, 81%, 44%)
HSB
hsb(307, 90%, 80%)
CMYK
cmyk(0%, 90%, 10%, 20%)
Oklch
oklch(58.4% 0.252 333.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

383838
383838

Analogous

383838
383838
383838

Triadic

383838
383838
383838

Split-Comp.

383838
383838
383838

Tetradic

383838
383838
383838
383838

Contrast Matrix WCAG 2.1 Contrast

383838
CCCA68
E39D71
E36694
CB15B7
—
6.8
AA
5.2
AA
3.7
AA Large
2.4
Fail
6.8
AA
—
1.3
Fail
1.9
Fail
2.8
Fail
5.2
AA
1.3
Fail
—
1.4
Fail
2.2
Fail
3.7
AA Large
1.9
Fail
1.4
Fail
—
1.5
Fail
2.4
Fail
2.8
Fail
2.2
Fail
1.5
Fail
—
White BG
11.7AAA
1.7Fail
2.3Fail
3.2AA Large
4.8AA
Black BG
1.8Fail
12.2AAA
9.3AAA
6.6AA
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

383838
CBCB80
C5C47C
ADAC89
7C7B90

Deuteranopia

383838
CBCB85
C9CE7E
B4BD86
879486

Tritanopia

383838
CC9297
DF8486
DD807E
C2716A

Achromatopsia

383838
BFBFBF
ADADAD
919191
5E5E5E

Shades & Tints Shades & Tints

#383838

Dark
Light

#CCCA68

Dark
Light

#E39D71

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #383838;
  --color-2: #ccca68;
  --color-3: #e39d71;
  --color-4: #e36694;
  --color-5: #cb15b7;
}

SCSS

$color-1: #383838;
$color-2: #ccca68;
$color-3: #e39d71;
$color-4: #e36694;
$color-5: #cb15b7;

TAILWIND

colors: {
  'brand-1': '#383838',
  'brand-2': '#ccca68',
  'brand-3': '#e39d71',
  'brand-4': '#e36694',
  'brand-5': '#cb15b7',
}

RGB Array

[56, 56, 56], [204, 202, 104], [227, 157, 113], [227, 102, 148], [203, 21, 183]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #383838, #CCCA68, #E39D71, #E36694, #CB15B7 is ideal for: 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: #383838; --color-2: #ccca68; --color-3: #e39d71; --color-4: #e36694; --color-5: #cb15b7. 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. 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