← Back to Editor

#E09C4F · #CFA08A · #A7A3B5 · #6BABD5 · #636785

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

#E09C4F

Ginger · SandyBrown · Warm Sun

HEX
#E09C4F
RGB
rgb(224, 156, 79)
HSL
hsl(32, 70%, 59%)
HSB
hsb(32, 65%, 88%)
CMYK
cmyk(0%, 30%, 65%, 12%)
Oklch
oklch(74.5% 0.124 67.2)

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

#CFA08A

Apricot · Tan · Warm Sun

HEX
#CFA08A
RGB
rgb(207, 160, 138)
HSL
hsl(19, 42%, 68%)
HSB
hsb(19, 33%, 81%)
CMYK
cmyk(0%, 23%, 33%, 19%)
Oklch
oklch(74.4% 0.064 46.3)

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

#A7A3B5

Wisteria · DarkGray · Cobalt Blue

HEX
#A7A3B5
RGB
rgb(167, 163, 181)
HSL
hsl(253, 11%, 67%)
HSB
hsb(253, 10%, 71%)
CMYK
cmyk(8%, 10%, 0%, 29%)
Oklch
oklch(72.5% 0.026 295.9)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#6BABD5

Sky Blue · CornflowerBlue · Cobalt Blue

HEX
#6BABD5
RGB
rgb(107, 171, 213)
HSL
hsl(204, 56%, 63%)
HSB
hsb(204, 50%, 84%)
CMYK
cmyk(50%, 20%, 0%, 16%)
Oklch
oklch(71.4% 0.090 238.6)

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

#636785

Indigo · DimGray · Navy Blue

HEX
#636785
RGB
rgb(99, 103, 133)
HSL
hsl(233, 15%, 45%)
HSB
hsb(233, 26%, 52%)
CMYK
cmyk(26%, 23%, 0%, 48%)
Oklch
oklch(52.2% 0.048 278.7)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E09C4F
4D92E0

Analogous

E0524D
E09C4F
DBE04D

Triadic

E09C4F
4DE09B
9B4DE0

Split-Comp.

E09C4F
4DDBE0
524DE0

Tetradic

E09C4F
4DE052
4D92E0
E04DDB

Contrast Matrix WCAG 2.1 Contrast

E09C4F
CFA08A
A7A3B5
6BABD5
636785
—
1.0
Fail
1.1
Fail
1.1
Fail
2.4
Fail
1.0
Fail
—
1.1
Fail
1.1
Fail
2.4
Fail
1.1
Fail
1.1
Fail
—
1.0
Fail
2.2
Fail
1.1
Fail
1.1
Fail
1.0
Fail
—
2.2
Fail
2.4
Fail
2.4
Fail
2.2
Fail
2.2
Fail
—
White BG
2.3Fail
2.3Fail
2.5Fail
2.5Fail
5.5AA
Black BG
9.0AAA
9.0AAA
8.5AAA
8.4AAA
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C262
BBBA8F
A5A5B1
8787CB
65657E

Deuteranopia

C7CC66
BDC191
A6A6B0
837EC8
65647C

Tritanopia

DD7074
CD9494
A7ADAC
6EC3C1
637877

Achromatopsia

A8A8A8
ACACAC
A6A6A6
9D9D9D
696969

Shades & Tints Shades & Tints

#E09C4F

Dark
Light

#CFA08A

Dark
Light

#A7A3B5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e09c4f;
  --color-2: #cfa08a;
  --color-3: #a7a3b5;
  --color-4: #6babd5;
  --color-5: #636785;
}

SCSS

$color-1: #e09c4f;
$color-2: #cfa08a;
$color-3: #a7a3b5;
$color-4: #6babd5;
$color-5: #636785;

TAILWIND

colors: {
  'brand-1': '#e09c4f',
  'brand-2': '#cfa08a',
  'brand-3': '#a7a3b5',
  'brand-4': '#6babd5',
  'brand-5': '#636785',
}

RGB Array

[224, 156, 79], [207, 160, 138], [167, 163, 181], [107, 171, 213], [99, 103, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E09C4F, #CFA08A, #A7A3B5, #6BABD5, #636785 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: #e09c4f; --color-2: #cfa08a; --color-3: #a7a3b5; --color-4: #6babd5; --color-5: #636785. 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