← Back to Editor

#FC5821 · #DB6E38 · #BA844F · #999A66 · #78B07D

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

#FC5821

Tangerine · OrangeRed · Warm Sun

HEX
#FC5821
RGB
rgb(252, 88, 33)
HSL
hsl(15, 97%, 56%)
HSB
hsb(15, 87%, 99%)
CMYK
cmyk(0%, 65%, 87%, 1%)
Oklch
oklch(67.5% 0.209 37.1)

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

#DB6E38

Tangerine · Chocolate · Warm Sun

HEX
#DB6E38
RGB
rgb(219, 110, 56)
HSL
hsl(20, 69%, 54%)
HSB
hsb(20, 74%, 86%)
CMYK
cmyk(0%, 50%, 74%, 14%)
Oklch
oklch(65.7% 0.152 44.9)

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

#BA844F

Ginger · Chocolate · Warm Sun

HEX
#BA844F
RGB
rgb(186, 132, 79)
HSL
hsl(30, 44%, 52%)
HSB
hsb(30, 58%, 73%)
CMYK
cmyk(0%, 29%, 58%, 27%)
Oklch
oklch(65.6% 0.096 64.3)

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

#999A66

Autumn Sage · Gray · Honey Gold

HEX
#999A66
RGB
rgb(153, 154, 102)
HSL
hsl(61, 20%, 50%)
HSB
hsb(61, 34%, 60%)
CMYK
cmyk(1%, 0%, 34%, 40%)
Oklch
oklch(67.3% 0.071 109.1)

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

#78B07D

Celadon · DarkSeaGreen · Olive Green

HEX
#78B07D
RGB
rgb(120, 176, 125)
HSL
hsl(125, 26%, 58%)
HSB
hsb(125, 32%, 69%)
CMYK
cmyk(32%, 0%, 29%, 31%)
Oklch
oklch(70.5% 0.094 146.7)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FC5821
22C5FC

Analogous

FC2258
FC5821
FCC522

Triadic

FC5821
22FC58
5822FC

Split-Comp.

FC5821
22FCC5
2258FC

Tetradic

FC5821
58FC22
22C5FC
C522FC

Contrast Matrix WCAG 2.1 Contrast

FC5821
DB6E38
BA844F
999A66
78B07D
—
1.0
Fail
1.0
Fail
1.1
Fail
1.3
Fail
1.0
Fail
—
1.0
Fail
1.1
Fail
1.3
Fail
1.0
Fail
1.0
Fail
—
1.1
Fail
1.3
Fail
1.1
Fail
1.1
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.3
Fail
1.3
Fail
1.2
Fail
—
White BG
3.2AA Large
3.3AA Large
3.2AA Large
2.9Fail
2.5Fail
Black BG
6.6AA
6.3AA
6.5AA
7.2AAA
8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B42E
ACAB45
A3A25C
999973
909189

Deuteranopia

BFCB32
B2BA48
A6AA5F
999976
8D898C

Tritanopia

F4393B
D64F52
B76668
997D7F
7B9395

Achromatopsia

838383
888888
8E8E8E
949494
999999

Shades & Tints Shades & Tints

#FC5821

Dark
Light

#DB6E38

Dark
Light

#BA844F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fc5821;
  --color-2: #db6e38;
  --color-3: #ba844f;
  --color-4: #999a66;
  --color-5: #78b07d;
}

SCSS

$color-1: #fc5821;
$color-2: #db6e38;
$color-3: #ba844f;
$color-4: #999a66;
$color-5: #78b07d;

TAILWIND

colors: {
  'brand-1': '#fc5821',
  'brand-2': '#db6e38',
  'brand-3': '#ba844f',
  'brand-4': '#999a66',
  'brand-5': '#78b07d',
}

RGB Array

[252, 88, 33], [219, 110, 56], [186, 132, 79], [153, 154, 102], [120, 176, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FC5821, #DB6E38, #BA844F, #999A66, #78B07D 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: #fc5821; --color-2: #db6e38; --color-3: #ba844f; --color-4: #999a66; --color-5: #78b07d. 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