← Back to Editor

#503C3E · #785D54 · #FFB399 · #EDD8C3 · #D5C093

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

#503C3E

Crimson · DarkSlateGray · Wine Red

HEX
#503C3E
RGB
rgb(80, 60, 62)
HSL
hsl(354, 14%, 27%)
HSB
hsb(354, 25%, 31%)
CMYK
cmyk(0%, 25%, 22%, 69%)
Oklch
oklch(37.9% 0.028 11.8)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#785D54

Tangerine · DimGray · Amber Brown

HEX
#785D54
RGB
rgb(120, 93, 84)
HSL
hsl(15, 18%, 40%)
HSB
hsb(15, 30%, 47%)
CMYK
cmyk(0%, 22%, 30%, 53%)
Oklch
oklch(50.3% 0.038 39.2)

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

#FFB399

Apricot · LightSalmon · Peach Orange

HEX
#FFB399
RGB
rgb(255, 179, 153)
HSL
hsl(15, 100%, 80%)
HSB
hsb(15, 40%, 100%)
CMYK
cmyk(0%, 30%, 40%, 0%)
Oklch
oklch(83.3% 0.096 39.7)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#EDD8C3

Goose Yellow · Wheat · Peach Orange

HEX
#EDD8C3
RGB
rgb(237, 216, 195)
HSL
hsl(30, 54%, 85%)
HSB
hsb(30, 18%, 93%)
CMYK
cmyk(0%, 9%, 18%, 7%)
Oklch
oklch(89.4% 0.037 67.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#D5C093

Goose Yellow · Tan · Sunflower

HEX
#D5C093
RGB
rgb(213, 192, 147)
HSL
hsl(41, 44%, 71%)
HSB
hsb(41, 31%, 84%)
CMYK
cmyk(0%, 10%, 31%, 16%)
Oklch
oklch(81.4% 0.064 85.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

503C3E
3B4E4D

Analogous

4E3B47
503C3E
4E433B

Triadic

503C3E
3D4E3B
3B3D4E

Split-Comp.

503C3E
3B4E43
3B474E

Tetradic

503C3E
474E3B
3B4E4D
433B4E

Contrast Matrix WCAG 2.1 Contrast

503C3E
785D54
FFB399
EDD8C3
D5C093
—
1.7
Fail
5.9
AA
7.4
AAA
5.7
AA
1.7
Fail
—
3.5
AA Large
4.4
AA Large
3.4
AA Large
5.9
AA
3.5
AA Large
—
1.3
Fail
1.0
Fail
7.4
AAA
4.4
AA Large
1.3
Fail
—
1.3
Fail
5.7
AA
3.4
AA Large
1.0
Fail
1.3
Fail
—
White BG
10.2AAA
6.0AA
1.7Fail
1.4Fail
1.8Fail
Black BG
2.1Fail
3.5AA Large
12.2AAA
15.2AAA
11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

47473E
6C6C56
DEDD9F
E4E4C8
CCCC9E

Deuteranopia

494A3D
6E7057
E3E8A1
E5E7C9
CDCFA1

Tritanopia

4F3D3D
775858
FBA4A5
ECCCCD
D4A6A8

Achromatopsia

424242
646464
C7C7C7
DCDCDC
C1C1C1

Shades & Tints Shades & Tints

#503C3E

Dark
Light

#785D54

Dark
Light

#FFB399

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #503c3e;
  --color-2: #785d54;
  --color-3: #ffb399;
  --color-4: #edd8c3;
  --color-5: #d5c093;
}

SCSS

$color-1: #503c3e;
$color-2: #785d54;
$color-3: #ffb399;
$color-4: #edd8c3;
$color-5: #d5c093;

TAILWIND

colors: {
  'brand-1': '#503c3e',
  'brand-2': '#785d54',
  'brand-3': '#ffb399',
  'brand-4': '#edd8c3',
  'brand-5': '#d5c093',
}

RGB Array

[80, 60, 62], [120, 93, 84], [255, 179, 153], [237, 216, 195], [213, 192, 147]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #503C3E, #785D54, #FFB399, #EDD8C3, #D5C093 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: #503c3e; --color-2: #785d54; --color-3: #ffb399; --color-4: #edd8c3; --color-5: #d5c093. 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