← Back to Editor

#F5EA87 · #877A05 · #DC00BC · #66365F · #33042B

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#F5EA87

Fresh Green · Khaki · Sunflower

HEX
#F5EA87
RGB
rgb(245, 234, 135)
HSL
hsl(54, 85%, 75%)
HSB
hsb(54, 45%, 96%)
CMYK
cmyk(0%, 4%, 45%, 4%)
Oklch
oklch(92.5% 0.121 102.9)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#877A05

Autumn Sage · Olive · Honey Gold

HEX
#877A05
RGB
rgb(135, 122, 5)
HSL
hsl(54, 93%, 27%)
HSB
hsb(54, 96%, 53%)
CMYK
cmyk(0%, 10%, 96%, 47%)
Oklch
oklch(57.4% 0.119 101.9)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#DC00BC

Rose Purple · DeepPink · Violet

HEX
#DC00BC
RGB
rgb(220, 0, 188)
HSL
hsl(309, 100%, 43%)
HSB
hsb(309, 100%, 86%)
CMYK
cmyk(0%, 100%, 15%, 14%)
Oklch
oklch(61.0% 0.269 336.8)

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

#66365F

Rose Purple · DimGray · Eggplant

HEX
#66365F
RGB
rgb(102, 54, 95)
HSL
hsl(309, 31%, 31%)
HSB
hsb(309, 47%, 40%)
CMYK
cmyk(0%, 47%, 7%, 60%)
Oklch
oklch(40.9% 0.090 332.7)

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

#33042B

Rose Purple · Black · Dark Purple

HEX
#33042B
RGB
rgb(51, 4, 43)
HSL
hsl(310, 85%, 11%)
HSB
hsb(310, 92%, 20%)
CMYK
cmyk(0%, 92%, 16%, 80%)
Oklch
oklch(22.5% 0.090 336.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5EA87
8994F5

Analogous

F5B489
F5EA87
CAF589

Triadic

F5EA87
89F5EB
EB89F5

Split-Comp.

F5EA87
89CAF5
B489F5

Tetradic

F5EA87
89F5B4
8994F5
F589CA

Contrast Matrix WCAG 2.1 Contrast

F5EA87
877A05
DC00BC
66365F
33042B
—
3.5
AA Large
3.6
AA Large
7.5
AAA
14.3
AAA
3.5
AA Large
—
1.0
Fail
2.1
Fail
4.0
AA Large
3.6
AA Large
1.0
Fail
—
2.1
Fail
4.0
AA Large
7.5
AAA
2.1
Fail
2.1
Fail
—
1.9
Fail
14.3
AAA
4.0
AA Large
4.0
AA Large
1.9
Fail
—
White BG
1.2Fail
4.4AA Large
4.4AA Large
9.3AAA
17.6AAA
Black BG
17.0AAA
4.8AA
4.8AA
2.3Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F0F09F
818121
7D7B8F
515155
1F1E22

Deuteranopia

F1F2A5
828328
8A9A84
545853
21251F

Tritanopia

F4B2B6
86383D
D16B63
644D4C
311A18

Achromatopsia

E2E2E2
717171
575757
494949
161616

Shades & Tints Shades & Tints

#F5EA87

Dark
Light

#877A05

Dark
Light

#DC00BC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5ea87;
  --color-2: #877a05;
  --color-3: #dc00bc;
  --color-4: #66365f;
  --color-5: #33042b;
}

SCSS

$color-1: #f5ea87;
$color-2: #877a05;
$color-3: #dc00bc;
$color-4: #66365f;
$color-5: #33042b;

TAILWIND

colors: {
  'brand-1': '#f5ea87',
  'brand-2': '#877a05',
  'brand-3': '#dc00bc',
  'brand-4': '#66365f',
  'brand-5': '#33042b',
}

RGB Array

[245, 234, 135], [135, 122, 5], [220, 0, 188], [102, 54, 95], [51, 4, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5EA87, #877A05, #DC00BC, #66365F, #33042B is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f5ea87; --color-2: #877a05; --color-3: #dc00bc; --color-4: #66365f; --color-5: #33042b. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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