← Back to Editor

#5C5E4E · #AB531D · #F5460C · #FCDDBD · #CAE0C3

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

#5C5E4E

Autumn Sage · DimGray · Charcoal

HEX
#5C5E4E
RGB
rgb(92, 94, 78)
HSL
hsl(68, 9%, 34%)
HSB
hsb(68, 17%, 37%)
CMYK
cmyk(2%, 0%, 17%, 63%)
Oklch
oklch(47.5% 0.025 113.1)

Traditional「Autumn Sage」· Paint「Charcoal」· Creative Midnight Shadow

#AB531D

Tangerine · Sienna · Amber Brown

HEX
#AB531D
RGB
rgb(171, 83, 29)
HSL
hsl(23, 71%, 39%)
HSB
hsb(23, 83%, 67%)
CMYK
cmyk(0%, 51%, 83%, 33%)
Oklch
oklch(54.3% 0.132 47.9)

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

#F5460C

Tangerine · OrangeRed · Amber Brown

HEX
#F5460C
RGB
rgb(245, 70, 12)
HSL
hsl(15, 92%, 50%)
HSB
hsb(15, 95%, 96%)
CMYK
cmyk(0%, 71%, 95%, 4%)
Oklch
oklch(64.5% 0.219 35.5)

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

#FCDDBD

Goose Yellow · Bisque · Peach Orange

HEX
#FCDDBD
RGB
rgb(252, 221, 189)
HSL
hsl(30, 91%, 86%)
HSB
hsb(30, 25%, 99%)
CMYK
cmyk(0%, 12%, 25%, 1%)
Oklch
oklch(91.5% 0.054 68.0)

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

#CAE0C3

Celadon · LightGray · Mint Green

HEX
#CAE0C3
RGB
rgb(202, 224, 195)
HSL
hsl(106, 32%, 82%)
HSB
hsb(106, 13%, 88%)
CMYK
cmyk(10%, 0%, 13%, 12%)
Oklch
oklch(88.3% 0.046 138.1)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5C5E4E
514F5F

Analogous

5F594F
5C5E4E
555F4F

Triadic

5C5E4E
4F5C5F
5F4F5C

Split-Comp.

5C5E4E
4F555F
594F5F

Tetradic

5C5E4E
4F5F59
514F5F
5F4F55

Contrast Matrix WCAG 2.1 Contrast

5C5E4E
AB531D
F5460C
FCDDBD
CAE0C3
—
1.3
Fail
1.8
Fail
5.1
AA
4.7
AA
1.3
Fail
—
1.4
Fail
4.1
AA Large
3.8
AA Large
1.8
Fail
1.4
Fail
—
2.8
Fail
2.6
Fail
5.1
AA
4.1
AA Large
2.8
Fail
—
1.1
Fail
4.7
AA
3.8
AA Large
2.6
Fail
1.1
Fail
—
White BG
6.6AA
5.3AA
3.6AA Large
1.3Fail
1.4Fail
Black BG
3.2AA Large
4.0AA Large
5.8AA
16.2AAA
15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5D5D52
85842A
A9A81A
EFEEC5
D4D4CA

Deuteranopia

5D5D53
8A912D
B3C11D
F0F3C7
D2D1CC

Tritanopia

5C5556
A73437
EC2528
FACBCC
CBD0D1

Achromatopsia

5C5C5C
676767
747474
E3E3E3
D6D6D6

Shades & Tints Shades & Tints

#5C5E4E

Dark
Light

#AB531D

Dark
Light

#F5460C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5c5e4e;
  --color-2: #ab531d;
  --color-3: #f5460c;
  --color-4: #fcddbd;
  --color-5: #cae0c3;
}

SCSS

$color-1: #5c5e4e;
$color-2: #ab531d;
$color-3: #f5460c;
$color-4: #fcddbd;
$color-5: #cae0c3;

TAILWIND

colors: {
  'brand-1': '#5c5e4e',
  'brand-2': '#ab531d',
  'brand-3': '#f5460c',
  'brand-4': '#fcddbd',
  'brand-5': '#cae0c3',
}

RGB Array

[92, 94, 78], [171, 83, 29], [245, 70, 12], [252, 221, 189], [202, 224, 195]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5C5E4E, #AB531D, #F5460C, #FCDDBD, #CAE0C3 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: #5c5e4e; --color-2: #ab531d; --color-3: #f5460c; --color-4: #fcddbd; --color-5: #cae0c3. 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