← Back to Editor

#E48755 · #C3947B · #A2A2A1 · #81AEC6 · #6DB6DD

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

#E48755

Apricot · Coral · Warm Sun

HEX
#E48755
RGB
rgb(228, 135, 85)
HSL
hsl(21, 73%, 61%)
HSB
hsb(21, 63%, 89%)
CMYK
cmyk(0%, 41%, 63%, 11%)
Oklch
oklch(71.3% 0.131 48.0)

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

#C3947B

Apricot · DarkSalmon · Warm Sun

HEX
#C3947B
RGB
rgb(195, 148, 123)
HSL
hsl(21, 37%, 62%)
HSB
hsb(21, 37%, 76%)
CMYK
cmyk(0%, 24%, 37%, 24%)
Oklch
oklch(70.5% 0.067 49.2)

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

#A2A2A1

Ash · DarkGray · Silver Sand

HEX
#A2A2A1
RGB
rgb(162, 162, 161)
HSL
hsl(60, 1%, 63%)
HSB
hsb(60, 1%, 64%)
CMYK
cmyk(0%, 0%, 1%, 36%)
Oklch
oklch(71.2% 0.001 106.4)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#81AEC6

Sky Blue · SkyBlue · Cobalt Blue

HEX
#81AEC6
RGB
rgb(129, 174, 198)
HSL
hsl(201, 38%, 64%)
HSB
hsb(201, 35%, 78%)
CMYK
cmyk(35%, 12%, 0%, 22%)
Oklch
oklch(72.7% 0.059 231.9)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#6DB6DD

Sky Blue · CornflowerBlue · Cobalt Blue

HEX
#6DB6DD
RGB
rgb(109, 182, 221)
HSL
hsl(201, 62%, 65%)
HSB
hsb(201, 51%, 87%)
CMYK
cmyk(51%, 18%, 0%, 13%)
Oklch
oklch(74.3% 0.092 233.2)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E48755
53B1E4

Analogous

E45369
E48755
E4CE53

Triadic

E48755
53E486
8653E4

Split-Comp.

E48755
53E4CE
5369E4

Tetradic

E48755
69E453
53B1E4
CE53E4

Contrast Matrix WCAG 2.1 Contrast

E48755
C3947B
A2A2A1
81AEC6
6DB6DD
—
1.0
Fail
1.0
Fail
1.1
Fail
1.2
Fail
1.0
Fail
—
1.0
Fail
1.1
Fail
1.2
Fail
1.0
Fail
1.0
Fail
—
1.1
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.2
Fail
1.1
Fail
1.1
Fail
—
White BG
2.7Fail
2.7Fail
2.6Fail
2.4Fail
2.2Fail
Black BG
7.9AAA
7.8AAA
8.2AAA
8.8AAA
9.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBB61
AFAE81
A2A2A1
9495C0
8D8DD4

Deuteranopia

C1C864
B1B583
A2A2A1
928FBF
8883D1

Tritanopia

DF6B6D
C18687
A2A1A1
83BCBB
71CCCA

Achromatopsia

9D9D9D
9F9F9F
A2A2A2
A3A3A3
A5A5A5

Shades & Tints Shades & Tints

#E48755

Dark
Light

#C3947B

Dark
Light

#A2A2A1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e48755;
  --color-2: #c3947b;
  --color-3: #a2a2a1;
  --color-4: #81aec6;
  --color-5: #6db6dd;
}

SCSS

$color-1: #e48755;
$color-2: #c3947b;
$color-3: #a2a2a1;
$color-4: #81aec6;
$color-5: #6db6dd;

TAILWIND

colors: {
  'brand-1': '#e48755',
  'brand-2': '#c3947b',
  'brand-3': '#a2a2a1',
  'brand-4': '#81aec6',
  'brand-5': '#6db6dd',
}

RGB Array

[228, 135, 85], [195, 148, 123], [162, 162, 161], [129, 174, 198], [109, 182, 221]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E48755, #C3947B, #A2A2A1, #81AEC6, #6DB6DD 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: #e48755; --color-2: #c3947b; --color-3: #a2a2a1; --color-4: #81aec6; --color-5: #6db6dd. 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