← Back to Editor

#5C5654 · #A29181 · #ECBE94 · #F4AA7C · #F4823C

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

#5C5654

Ink Gray · DimGray · Charcoal

HEX
#5C5654
RGB
rgb(92, 86, 84)
HSL
hsl(15, 5%, 35%)
HSB
hsb(15, 9%, 36%)
CMYK
cmyk(0%, 7%, 9%, 64%)
Oklch
oklch(45.8% 0.008 39.4)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#A29181

Tangerine · Gray · Warm Sun

HEX
#A29181
RGB
rgb(162, 145, 129)
HSL
hsl(29, 15%, 57%)
HSB
hsb(29, 20%, 64%)
CMYK
cmyk(0%, 10%, 20%, 36%)
Oklch
oklch(66.7% 0.031 65.5)

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

#ECBE94

Apricot · BurlyWood · Warm Sun

HEX
#ECBE94
RGB
rgb(236, 190, 148)
HSL
hsl(29, 70%, 75%)
HSB
hsb(29, 37%, 93%)
CMYK
cmyk(0%, 19%, 37%, 7%)
Oklch
oklch(83.2% 0.077 63.9)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#F4AA7C

Apricot · LightSalmon · Warm Sun

HEX
#F4AA7C
RGB
rgb(244, 170, 124)
HSL
hsl(23, 85%, 72%)
HSB
hsb(23, 49%, 96%)
CMYK
cmyk(0%, 30%, 49%, 4%)
Oklch
oklch(79.9% 0.106 52.5)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#F4823C

Tangerine · Coral · Warm Sun

HEX
#F4823C
RGB
rgb(244, 130, 60)
HSL
hsl(23, 89%, 60%)
HSB
hsb(23, 75%, 96%)
CMYK
cmyk(0%, 47%, 75%, 4%)
Oklch
oklch(72.3% 0.162 49.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5C5654
555B5E

Analogous

5E5557
5C5654
5E5B55

Triadic

5C5654
555E57
57555E

Split-Comp.

5C5654
555E5B
55575E

Tetradic

5C5654
575E55
555B5E
5B555E

Contrast Matrix WCAG 2.1 Contrast

5C5654
A29181
ECBE94
F4AA7C
F4823C
—
2.4
Fail
4.2
AA Large
3.7
AA Large
2.8
Fail
2.4
Fail
—
1.8
Fail
1.6
Fail
1.2
Fail
4.2
AA Large
1.8
Fail
—
1.1
Fail
1.5
Fail
3.7
AA Large
1.6
Fail
1.1
Fail
—
1.3
Fail
2.8
Fail
1.2
Fail
1.5
Fail
1.3
Fail
—
White BG
7.2AAA
3.0AA Large
1.7Fail
1.9Fail
2.6Fail
Black BG
2.9Fail
6.9AA
12.4AAA
10.9AAA
8.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

595954
9B9A85
D8D89E
D4D387
C3C24D

Deuteranopia

5A5A55
9C9D86
DBDEA1
D8DE8A
C9D251

Tritanopia

5C5555
A18889
EAA6A8
F09092
EE5A5D

Achromatopsia

585858
949494
C7C7C7
BBBBBB
9C9C9C

Shades & Tints Shades & Tints

#5C5654

Dark
Light

#A29181

Dark
Light

#ECBE94

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5c5654;
  --color-2: #a29181;
  --color-3: #ecbe94;
  --color-4: #f4aa7c;
  --color-5: #f4823c;
}

SCSS

$color-1: #5c5654;
$color-2: #a29181;
$color-3: #ecbe94;
$color-4: #f4aa7c;
$color-5: #f4823c;

TAILWIND

colors: {
  'brand-1': '#5c5654',
  'brand-2': '#a29181',
  'brand-3': '#ecbe94',
  'brand-4': '#f4aa7c',
  'brand-5': '#f4823c',
}

RGB Array

[92, 86, 84], [162, 145, 129], [236, 190, 148], [244, 170, 124], [244, 130, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5C5654, #A29181, #ECBE94, #F4AA7C, #F4823C 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: #5c5654; --color-2: #a29181; --color-3: #ecbe94; --color-4: #f4aa7c; --color-5: #f4823c. 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