← Back to Editor

#413323 · #CE3523 · #F3CC63 · #ACB021 · #0E5D57

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#413323

Ochre · DarkSlateGray · Cinnamon

HEX
#413323
RGB
rgb(65, 51, 35)
HSL
hsl(32, 30%, 20%)
HSB
hsb(32, 46%, 25%)
CMYK
cmyk(0%, 22%, 46%, 75%)
Oklch
oklch(33.2% 0.033 70.0)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#CE3523

Vermilion · FireBrick · Passion Red

HEX
#CE3523
RGB
rgb(206, 53, 35)
HSL
hsl(6, 71%, 47%)
HSB
hsb(6, 83%, 81%)
CMYK
cmyk(0%, 74%, 83%, 19%)
Oklch
oklch(56.3% 0.192 30.5)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#F3CC63

Ginger · SandyBrown · Sunflower

HEX
#F3CC63
RGB
rgb(243, 204, 99)
HSL
hsl(44, 86%, 67%)
HSB
hsb(44, 59%, 95%)
CMYK
cmyk(0%, 16%, 59%, 5%)
Oklch
oklch(85.9% 0.131 89.0)

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

#ACB021

Autumn Sage · GoldenRod · Honey Gold

HEX
#ACB021
RGB
rgb(172, 176, 33)
HSL
hsl(62, 68%, 41%)
HSB
hsb(62, 81%, 69%)
CMYK
cmyk(2%, 0%, 81%, 31%)
Oklch
oklch(73.0% 0.152 111.3)

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

#0E5D57

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#0E5D57
RGB
rgb(14, 93, 87)
HSL
hsl(175, 74%, 21%)
HSB
hsb(175, 85%, 36%)
CMYK
cmyk(85%, 0%, 6%, 64%)
Oklch
oklch(43.3% 0.071 186.9)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

413323
243242

Analogous

422524
413323
414224

Triadic

413323
244234
342442

Split-Comp.

413323
244142
252442

Tetradic

413323
244225
243242
422441

Contrast Matrix WCAG 2.1 Contrast

413323
CE3523
F3CC63
ACB021
0E5D57
—
2.4
Fail
7.9
AAA
5.2
AA
1.6
Fail
2.4
Fail
—
3.3
AA Large
2.2
Fail
1.5
Fail
7.9
AAA
3.3
AA Large
—
1.5
Fail
5.0
AA
5.2
AA
2.2
Fail
1.5
Fail
—
3.3
AA Large
1.6
Fail
1.5
Fail
5.0
AA
3.3
AA Large
—
White BG
12.2AAA
5.1AA
1.5Fail
2.3Fail
7.7AAA
Black BG
1.7Fail
4.2AA Large
13.6AAA
9.0AAA
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

3B3B27
8C8A27
E2E27C
AEAE44
303158

Deuteranopia

3C3D28
95A028
E4E783
AEAD4C
2C2659

Tritanopia

402A2B
C62B2C
F19095
AC5F65
125A5A

Achromatopsia

353535
616161
CCCCCC
9F9F9F
454545

Shades & Tints Shades & Tints

#413323

Dark
Light

#CE3523

Dark
Light

#F3CC63

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #413323;
  --color-2: #ce3523;
  --color-3: #f3cc63;
  --color-4: #acb021;
  --color-5: #0e5d57;
}

SCSS

$color-1: #413323;
$color-2: #ce3523;
$color-3: #f3cc63;
$color-4: #acb021;
$color-5: #0e5d57;

TAILWIND

colors: {
  'brand-1': '#413323',
  'brand-2': '#ce3523',
  'brand-3': '#f3cc63',
  'brand-4': '#acb021',
  'brand-5': '#0e5d57',
}

RGB Array

[65, 51, 35], [206, 53, 35], [243, 204, 99], [172, 176, 33], [14, 93, 87]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #413323, #CE3523, #F3CC63, #ACB021, #0E5D57 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: #413323; --color-2: #ce3523; --color-3: #f3cc63; --color-4: #acb021; --color-5: #0e5d57. 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