← Back to Editor

#E2E6DF · #DEDE99 · #F6B953 · #FF8F57 · #BA868E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E2E6DF

Celadon · Beige · Mint Green

HEX
#E2E6DF
RGB
rgb(226, 230, 223)
HSL
hsl(94, 12%, 89%)
HSB
hsb(94, 3%, 90%)
CMYK
cmyk(2%, 0%, 3%, 10%)
Oklch
oklch(92.0% 0.010 131.4)

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

#DEDE99

Fresh Green · Khaki · Sunflower

HEX
#DEDE99
RGB
rgb(222, 222, 153)
HSL
hsl(60, 51%, 74%)
HSB
hsb(60, 31%, 87%)
CMYK
cmyk(0%, 0%, 31%, 13%)
Oklch
oklch(88.5% 0.089 108.1)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#F6B953

Ginger · SandyBrown · Warm Sun

HEX
#F6B953
RGB
rgb(246, 185, 83)
HSL
hsl(38, 90%, 65%)
HSB
hsb(38, 66%, 96%)
CMYK
cmyk(0%, 25%, 66%, 4%)
Oklch
oklch(82.3% 0.137 77.6)

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

#FF8F57

Apricot · Coral · Warm Sun

HEX
#FF8F57
RGB
rgb(255, 143, 87)
HSL
hsl(20, 100%, 67%)
HSB
hsb(20, 66%, 100%)
CMYK
cmyk(0%, 44%, 66%, 0%)
Oklch
oklch(76.1% 0.153 46.1)

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

#BA868E

Peach Pink · DarkGray · Coral Red

HEX
#BA868E
RGB
rgb(186, 134, 142)
HSL
hsl(351, 27%, 63%)
HSB
hsb(351, 28%, 73%)
CMYK
cmyk(0%, 28%, 24%, 27%)
Oklch
oklch(67.3% 0.065 8.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E2E6DF
E3E0E6

Analogous

E6E6E0
E2E6DF
E0E6E0

Triadic

E2E6DF
E0E3E6
E6E0E3

Split-Comp.

E2E6DF
E0E0E6
E6E0E6

Tetradic

E2E6DF
E0E6E6
E3E0E6
E6E0E0

Contrast Matrix WCAG 2.1 Contrast

E2E6DF
DEDE99
F6B953
FF8F57
BA868E
—
1.1
Fail
1.4
Fail
1.8
Fail
2.4
Fail
1.1
Fail
—
1.3
Fail
1.6
Fail
2.2
Fail
1.4
Fail
1.3
Fail
—
1.3
Fail
1.7
Fail
1.8
Fail
1.6
Fail
1.3
Fail
—
1.4
Fail
2.4
Fail
2.2
Fail
1.7
Fail
1.4
Fail
—
White BG
1.3Fail
1.4Fail
1.8Fail
2.3Fail
3.0AA Large
Black BG
16.6AAA
15.0AAA
12.0AAA
9.3AAA
6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E4E4E1
DEDEAA
DCDB6C
CFCD65
A3A38C

Deuteranopia

E4E3E1
DEDEAE
DFE472
D5DD68
A7AA8C

Tritanopia

E2E2E2
DEB7BA
F37F83
F96F72
B78B8A

Achromatopsia

E4E4E4
D6D6D6
C0C0C0
AAAAAA
969696

Shades & Tints Shades & Tints

#E2E6DF

Dark
Light

#DEDE99

Dark
Light

#F6B953

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e2e6df;
  --color-2: #dede99;
  --color-3: #f6b953;
  --color-4: #ff8f57;
  --color-5: #ba868e;
}

SCSS

$color-1: #e2e6df;
$color-2: #dede99;
$color-3: #f6b953;
$color-4: #ff8f57;
$color-5: #ba868e;

TAILWIND

colors: {
  'brand-1': '#e2e6df',
  'brand-2': '#dede99',
  'brand-3': '#f6b953',
  'brand-4': '#ff8f57',
  'brand-5': '#ba868e',
}

RGB Array

[226, 230, 223], [222, 222, 153], [246, 185, 83], [255, 143, 87], [186, 134, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E2E6DF, #DEDE99, #F6B953, #FF8F57, #BA868E is ideal for: health products, baby brands, fresh-style blogs. 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: #e2e6df; --color-2: #dede99; --color-3: #f6b953; --color-4: #ff8f57; --color-5: #ba868e. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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