← Back to Editor

#E1DFCA · #F6921A · #ED4E6C · #AF417E · #A69689

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

#E1DFCA

Fresh Green · LightGray · Lemon Cream

HEX
#E1DFCA
RGB
rgb(225, 223, 202)
HSL
hsl(55, 28%, 84%)
HSB
hsb(55, 10%, 88%)
CMYK
cmyk(0%, 1%, 10%, 12%)
Oklch
oklch(90.0% 0.028 102.5)

TraditionalFresh Green」· PaintLemon Cream」· Creative Lemon Fizz

#F6921A

Ginger · Orange · Warm Sun

HEX
#F6921A
RGB
rgb(246, 146, 26)
HSL
hsl(33, 92%, 53%)
HSB
hsb(33, 89%, 96%)
CMYK
cmyk(0%, 41%, 89%, 4%)
Oklch
oklch(74.9% 0.166 62.4)

TraditionalGinger」· PaintWarm Sun」· Creative Blush Sunrise

#ED4E6C

Peach Pink · Tomato · Coral Red

HEX
#ED4E6C
RGB
rgb(237, 78, 108)
HSL
hsl(349, 82%, 62%)
HSB
hsb(349, 67%, 93%)
CMYK
cmyk(0%, 67%, 54%, 7%)
Oklch
oklch(65.1% 0.195 13.4)

TraditionalPeach Pink」· PaintCoral Red」· Creative Rose Petal

#AF417E

Rose Purple · MediumVioletRed · Camellia

HEX
#AF417E
RGB
rgb(175, 65, 126)
HSL
hsl(327, 46%, 47%)
HSB
hsb(327, 63%, 69%)
CMYK
cmyk(0%, 63%, 28%, 31%)
Oklch
oklch(54.5% 0.157 349.2)

TraditionalRose Purple」· PaintCamellia」· Creative Blush Sunrise

#A69689

Tangerine · DarkGray · Warm Sun

HEX
#A69689
RGB
rgb(166, 150, 137)
HSL
hsl(27, 14%, 59%)
HSB
hsb(27, 17%, 65%)
CMYK
cmyk(0%, 10%, 17%, 35%)
Oklch
oklch(68.3% 0.027 61.5)

TraditionalTangerine」· PaintWarm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E1DFCA
CBCDE2

Analogous

E2D4CB
E1DFCA
D8E2CB

Triadic

E1DFCA
CBE2E0
E0CBE2

Split-Comp.

E1DFCA
CBD8E2
D4CBE2

Tetradic

E1DFCA
CBE2D4
CBCDE2
E2CBD8

Contrast Matrix WCAG 2.1 Contrast

E1DFCA
F6921A
ED4E6C
AF417E
A69689
1.7
Fail
2.6
Fail
4.0
AA Large
2.1
Fail
1.7
Fail
1.5
Fail
2.3
Fail
1.2
Fail
2.6
Fail
1.5
Fail
1.5
Fail
1.2
Fail
4.0
AA Large
2.3
Fail
1.5
Fail
1.9
Fail
2.1
Fail
1.2
Fail
1.2
Fail
1.9
Fail
White BG
1.3Fail
2.3Fail
3.6AA Large
5.4AA
2.9Fail
Black BG
15.6AAA
9.0AAA
5.9AA
3.9AA Large
7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E0CF
CBCA37
A8A765
7F7E6F
9F9F8C

Deuteranopia

E0E0D0
D1D83E
B1BD63
868E6C
A0A18D

Tritanopia

E1D3D4
F14E53
E55F5E
AA6461
A58F8F

Achromatopsia

DDDDDD
A2A2A2
818181
696969
999999

Shades & Tints Shades & Tints

#E1DFCA

Dark
Light

#F6921A

Dark
Light

#ED4E6C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e1dfca;
  --color-2: #f6921a;
  --color-3: #ed4e6c;
  --color-4: #af417e;
  --color-5: #a69689;
}

SCSS

$color-1: #e1dfca;
$color-2: #f6921a;
$color-3: #ed4e6c;
$color-4: #af417e;
$color-5: #a69689;

TAILWIND

colors: {
  'brand-1': '#e1dfca',
  'brand-2': '#f6921a',
  'brand-3': '#ed4e6c',
  'brand-4': '#af417e',
  'brand-5': '#a69689',
}

RGB Array

[225, 223, 202], [246, 146, 26], [237, 78, 108], [175, 65, 126], [166, 150, 137]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E1DFCA, #F6921A, #ED4E6C, #AF417E, #A69689 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: #e1dfca; --color-2: #f6921a; --color-3: #ed4e6c; --color-4: #af417e; --color-5: #a69689. 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