#E4ECD7 + #F82768 + #F57B26 + #A5D4C2 + #82B4B3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E4ECD7

Willow Green · Beige · Mint Green

HEX

#E4ECD7

RGB

rgb(228, 236, 215)

HSL

hsl(83, 36%, 88%)

HSB

hsb(83, 9%, 93%)

CMYK

cmyk(3%, 0%, 9%, 7%)

Oklch

oklch(93.1% 0.029 124.0)

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

#F82768

Dark Violet · DeepPink · Rose Pink

HEX

#F82768

RGB

rgb(248, 39, 104)

HSL

hsl(341, 94%, 56%)

HSB

hsb(341, 84%, 97%)

CMYK

cmyk(0%, 84%, 58%, 3%)

Oklch

oklch(63.8% 0.237 10.7)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#F57B26

Tangerine · Chocolate · Warm Sun

HEX

#F57B26

RGB

rgb(245, 123, 38)

HSL

hsl(25, 91%, 55%)

HSB

hsb(25, 84%, 96%)

CMYK

cmyk(0%, 50%, 84%, 4%)

Oklch

oklch(71.2% 0.174 49.8)

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

#A5D4C2

Jade · Silver · Apple Green

HEX

#A5D4C2

RGB

rgb(165, 212, 194)

HSL

hsl(157, 35%, 74%)

HSB

hsb(157, 22%, 83%)

CMYK

cmyk(22%, 0%, 8%, 17%)

Oklch

oklch(83.2% 0.055 169.5)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#82B4B3

Jade · MediumAquaMarine · Lake Green

HEX

#82B4B3

RGB

rgb(130, 180, 179)

HSL

hsl(179, 25%, 61%)

HSB

hsb(179, 28%, 71%)

CMYK

cmyk(28%, 0%, 1%, 29%)

Oklch

oklch(73.4% 0.053 194.5)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E4ECD7

DED5EB

Analogous

EBE9D5

E4ECD7

D8EBD5

Triadic

E4ECD7

D5E3EB

EBD5E3

Split-Comp.

E4ECD7

D5D8EB

E9D5EB

Tetradic

E4ECD7

D5EBE9

DED5EB

EBD5D8

Contrast Matrix WCAG 2.1 Contrast

E4ECD7	F82768	F57B26	A5D4C2	82B4B3
—	3.2 AA Large	2.2 Fail	1.4 Fail	1.9 Fail
3.2 AA Large	—	1.4 Fail	2.3 Fail	1.7 Fail
2.2 Fail	1.4 Fail	—	1.7 Fail	1.2 Fail
1.4 Fail	2.3 Fail	1.7 Fail	—	1.4 Fail
1.9 Fail	1.7 Fail	1.2 Fail	1.4 Fail	—

White BG

1.2Fail

3.8AA Large

2.7Fail

1.6Fail

2.3Fail

Black BG

17.3AAA

5.5AA

7.7AAA

12.8AAA

9.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E8DC

9E9C58

C0BF3B

B9BAC6

9898B3

Deuteranopia

E7E6DD

AAB955

C7D040

B7B3C7

9591B3

Tritanopia

E4E0E1

EE4C49

EF4B4E

A7CACB

85B3B3

Achromatopsia

E7E7E7

6D6D6D

969696

C4C4C4

A5A5A5

Shades & Tints Shades & Tints

#E4ECD7

Dark

Light

#F82768

Dark

Light

#F57B26

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e4ecd7;
  --color-2: #f82768;
  --color-3: #f57b26;
  --color-4: #a5d4c2;
  --color-5: #82b4b3;
}

SCSS

$color-1: #e4ecd7;
$color-2: #f82768;
$color-3: #f57b26;
$color-4: #a5d4c2;
$color-5: #82b4b3;

TAILWIND

colors: {
  'brand-1': '#e4ecd7',
  'brand-2': '#f82768',
  'brand-3': '#f57b26',
  'brand-4': '#a5d4c2',
  'brand-5': '#82b4b3',
}

RGB Array

[228, 236, 215], [248, 39, 104], [245, 123, 38], [165, 212, 194], [130, 180, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E4ECD7, #F82768, #F57B26, #A5D4C2, #82B4B3 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: #e4ecd7; --color-2: #f82768; --color-3: #f57b26; --color-4: #a5d4c2; --color-5: #82b4b3. 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