← Back to Editor

#563E32 · #F3D283 · #500D2C · #14042B · #556121

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

#563E32

Tangerine · DarkOliveGreen · Amber Brown

HEX
#563E32
RGB
rgb(86, 62, 50)
HSL
hsl(20, 26%, 27%)
HSB
hsb(20, 42%, 34%)
CMYK
cmyk(0%, 28%, 42%, 66%)
Oklch
oklch(38.7% 0.039 47.7)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#F3D283

Goose Yellow · Khaki · Sunflower

HEX
#F3D283
RGB
rgb(243, 210, 131)
HSL
hsl(42, 82%, 73%)
HSB
hsb(42, 46%, 95%)
CMYK
cmyk(0%, 14%, 46%, 5%)
Oklch
oklch(87.5% 0.105 87.6)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#500D2C

Dark Violet · Maroon · Raspberry

HEX
#500D2C
RGB
rgb(80, 13, 44)
HSL
hsl(332, 72%, 18%)
HSB
hsb(332, 84%, 31%)
CMYK
cmyk(0%, 84%, 45%, 69%)
Oklch
oklch(29.3% 0.101 357.7)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#14042B

Deep Indigo · Black · Dark Purple

HEX
#14042B
RGB
rgb(20, 4, 43)
HSL
hsl(265, 83%, 9%)
HSB
hsb(265, 91%, 17%)
CMYK
cmyk(53%, 91%, 0%, 83%)
Oklch
oklch(16.9% 0.076 297.2)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#556121

Grass Green · DarkOliveGreen · Forest Green

HEX
#556121
RGB
rgb(85, 97, 33)
HSL
hsl(71, 49%, 25%)
HSB
hsb(71, 66%, 38%)
CMYK
cmyk(12%, 0%, 66%, 62%)
Oklch
oklch(46.8% 0.089 119.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

563E32
334B57

Analogous

573339
563E32
575133

Triadic

563E32
33573F
3F3357

Split-Comp.

563E32
335751
333957

Tetradic

563E32
395733
334B57
513357

Contrast Matrix WCAG 2.1 Contrast

563E32
F3D283
500D2C
14042B
556121
—
6.7
AA
1.5
Fail
2.0
Fail
1.5
Fail
6.7
AA
—
10.0
AAA
13.3
AAA
4.6
AA
1.5
Fail
10.0
AAA
—
1.3
Fail
2.2
Fail
2.0
Fail
13.3
AAA
1.3
Fail
—
2.9
Fail
1.5
Fail
4.6
AA
2.2
Fail
2.9
Fail
—
White BG
9.9AAA
1.5Fail
14.6AAA
19.4AAA
6.7AA
Black BG
2.1Fail
14.4AAA
1.4Fail
1.1Fail
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

4C4B35
E5E496
333224
0D0D22
5A5A30

Deuteranopia

4D4F36
E7E99B
373C23
0E0F1F
5A5934

Tritanopia

553738
F1A5A9
4D1F1D
131A18
563D3F

Achromatopsia

444444
D3D3D3
252525
0D0D0D
565656

Shades & Tints Shades & Tints

#563E32

Dark
Light

#F3D283

Dark
Light

#500D2C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #563e32;
  --color-2: #f3d283;
  --color-3: #500d2c;
  --color-4: #14042b;
  --color-5: #556121;
}

SCSS

$color-1: #563e32;
$color-2: #f3d283;
$color-3: #500d2c;
$color-4: #14042b;
$color-5: #556121;

TAILWIND

colors: {
  'brand-1': '#563e32',
  'brand-2': '#f3d283',
  'brand-3': '#500d2c',
  'brand-4': '#14042b',
  'brand-5': '#556121',
}

RGB Array

[86, 62, 50], [243, 210, 131], [80, 13, 44], [20, 4, 43], [85, 97, 33]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #563E32, #F3D283, #500D2C, #14042B, #556121 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: #563e32; --color-2: #f3d283; --color-3: #500d2c; --color-4: #14042b; --color-5: #556121. 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