← Back to Editor

#D78A50 · #704D54 · #AB7877 · #F8C171 · #FAE57F

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 Library

Color Details Color Details

#D78A50

Tangerine · Coral · Warm Sun

HEX
#D78A50
RGB
rgb(215, 138, 80)
HSL
hsl(26, 63%, 58%)
HSB
hsb(26, 63%, 84%)
CMYK
cmyk(0%, 36%, 63%, 16%)
Oklch
oklch(70.1% 0.120 56.2)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#704D54

Crimson · DimGray · Wine Red

HEX
#704D54
RGB
rgb(112, 77, 84)
HSL
hsl(348, 19%, 37%)
HSB
hsb(348, 31%, 44%)
CMYK
cmyk(0%, 31%, 25%, 56%)
Oklch
oklch(46.1% 0.048 6.0)

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

#AB7877

Crimson · Gray · Passion Red

HEX
#AB7877
RGB
rgb(171, 120, 119)
HSL
hsl(1, 24%, 57%)
HSB
hsb(1, 30%, 67%)
CMYK
cmyk(0%, 30%, 30%, 33%)
Oklch
oklch(62.4% 0.064 20.3)

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

#F8C171

Goose Yellow · SandyBrown · Warm Sun

HEX
#F8C171
RGB
rgb(248, 193, 113)
HSL
hsl(36, 91%, 71%)
HSB
hsb(36, 54%, 97%)
CMYK
cmyk(0%, 22%, 54%, 3%)
Oklch
oklch(84.4% 0.116 75.4)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#FAE57F

Fresh Green · Khaki · Sunflower

HEX
#FAE57F
RGB
rgb(250, 229, 127)
HSL
hsl(50, 92%, 74%)
HSB
hsb(50, 49%, 98%)
CMYK
cmyk(0%, 8%, 49%, 2%)
Oklch
oklch(91.8% 0.125 98.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D78A50
509DD7

Analogous

D75059
D78A50
D7CE50

Triadic

D78A50
50D78B
8B50D7

Split-Comp.

D78A50
50D7CE
5059D7

Tetradic

D78A50
59D750
509DD7
CE50D7

Contrast Matrix WCAG 2.1 Contrast

D78A50
704D54
AB7877
F8C171
FAE57F
—
2.7
Fail
1.3
Fail
1.7
Fail
2.2
Fail
2.7
Fail
—
2.0
Fail
4.5
AA Large
5.8
AA
1.3
Fail
2.0
Fail
—
2.3
Fail
2.9
Fail
1.7
Fail
4.5
AA Large
2.3
Fail
—
1.3
Fail
2.2
Fail
5.8
AA
2.9
Fail
1.3
Fail
—
White BG
2.7Fail
7.3AAA
3.7AA Large
1.6Fail
1.3Fail
Black BG
7.6AAA
2.9Fail
5.7AA
12.9AAA
16.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B55E
616152
959477
E0E084
F1F198

Deuteranopia

BAC061
636552
989C77
E3E889
F2F49E

Tritanopia

D3696C
6E5151
A87777
F59497
F9ABAF

Achromatopsia

9A9A9A
585858
878787
C8C8C8
E0E0E0

Shades & Tints Shades & Tints

#D78A50

Dark
Light

#704D54

Dark
Light

#AB7877

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d78a50;
  --color-2: #704d54;
  --color-3: #ab7877;
  --color-4: #f8c171;
  --color-5: #fae57f;
}

SCSS

$color-1: #d78a50;
$color-2: #704d54;
$color-3: #ab7877;
$color-4: #f8c171;
$color-5: #fae57f;

TAILWIND

colors: {
  'brand-1': '#d78a50',
  'brand-2': '#704d54',
  'brand-3': '#ab7877',
  'brand-4': '#f8c171',
  'brand-5': '#fae57f',
}

RGB Array

[215, 138, 80], [112, 77, 84], [171, 120, 119], [248, 193, 113], [250, 229, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D78A50, #704D54, #AB7877, #F8C171, #FAE57F is ideal for: corporate websites, product showcases, portfolios. 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: #d78a50; --color-2: #704d54; --color-3: #ab7877; --color-4: #f8c171; --color-5: #fae57f. 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. 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