← Back to Editor

#4C486C · #99565F · #EB735B · #F59D67 · #EBAE86

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4C486C

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX
#4C486C
RGB
rgb(76, 72, 108)
HSL
hsl(247, 20%, 35%)
HSB
hsb(247, 33%, 42%)
CMYK
cmyk(30%, 33%, 0%, 58%)
Oklch
oklch(42.1% 0.059 288.7)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#99565F

Crimson · Sienna · Passion Red

HEX
#99565F
RGB
rgb(153, 86, 95)
HSL
hsl(352, 28%, 47%)
HSB
hsb(352, 44%, 60%)
CMYK
cmyk(0%, 44%, 38%, 40%)
Oklch
oklch(53.3% 0.089 11.9)

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

#EB735B

Peach Pink · Coral · Coral Red

HEX
#EB735B
RGB
rgb(235, 115, 91)
HSL
hsl(10, 78%, 64%)
HSB
hsb(10, 61%, 92%)
CMYK
cmyk(0%, 51%, 61%, 8%)
Oklch
oklch(69.1% 0.154 32.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F59D67

Apricot · SandyBrown · Warm Sun

HEX
#F59D67
RGB
rgb(245, 157, 103)
HSL
hsl(23, 88%, 68%)
HSB
hsb(23, 58%, 96%)
CMYK
cmyk(0%, 36%, 58%, 4%)
Oklch
oklch(77.4% 0.126 51.5)

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

#EBAE86

Apricot · BurlyWood · Warm Sun

HEX
#EBAE86
RGB
rgb(235, 174, 134)
HSL
hsl(24, 72%, 72%)
HSB
hsb(24, 43%, 92%)
CMYK
cmyk(0%, 26%, 43%, 8%)
Oklch
oklch(79.8% 0.090 54.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4C486C
676B47

Analogous

47556B
4C486C
5D476B

Triadic

4C486C
6B4C47
476B4C

Split-Comp.

4C486C
6B5D47
556B47

Tetradic

4C486C
6B4755
676B47
476B5D

Contrast Matrix WCAG 2.1 Contrast

4C486C
99565F
EB735B
F59D67
EBAE86
—
1.6
Fail
2.9
Fail
4.0
AA Large
4.5
AA Large
1.6
Fail
—
1.9
Fail
2.6
Fail
2.8
Fail
2.9
Fail
1.9
Fail
—
1.4
Fail
1.5
Fail
4.0
AA Large
2.6
Fail
1.4
Fail
—
1.1
Fail
4.5
AA Large
2.8
Fail
1.5
Fail
1.1
Fail
—
White BG
8.6AAA
5.5AA
2.9Fail
2.1Fail
1.9Fail
Black BG
2.5Fail
3.9AA Large
7.1AAA
9.9AAA
10.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4A4A63
7C7B5D
B7B661
CFCE74
D1D090

Deuteranopia

4B4B61
80855C
BEC762
D4DB77
D4D992

Tritanopia

4C5C5B
965B5B
E56566
F17E81
E89799

Achromatopsia

4D4D4D
6B6B6B
949494
B1B1B1
BCBCBC

Shades & Tints Shades & Tints

#4C486C

Dark
Light

#99565F

Dark
Light

#EB735B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4c486c;
  --color-2: #99565f;
  --color-3: #eb735b;
  --color-4: #f59d67;
  --color-5: #ebae86;
}

SCSS

$color-1: #4c486c;
$color-2: #99565f;
$color-3: #eb735b;
$color-4: #f59d67;
$color-5: #ebae86;

TAILWIND

colors: {
  'brand-1': '#4c486c',
  'brand-2': '#99565f',
  'brand-3': '#eb735b',
  'brand-4': '#f59d67',
  'brand-5': '#ebae86',
}

RGB Array

[76, 72, 108], [153, 86, 95], [235, 115, 91], [245, 157, 103], [235, 174, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4C486C, #99565F, #EB735B, #F59D67, #EBAE86 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: #4c486c; --color-2: #99565f; --color-3: #eb735b; --color-4: #f59d67; --color-5: #ebae86. 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