#E27530 + #D9A08C + #D9B8B3 + #E2CDDC + #E5E8ED · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E27530

Tangerine · Chocolate · Warm Sun

HEX

#E27530

RGB

rgb(226, 117, 48)

HSL

hsl(23, 75%, 54%)

HSB

hsb(23, 79%, 89%)

CMYK

cmyk(0%, 48%, 79%, 11%)

Oklch

oklch(67.7% 0.157 49.2)

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

#D9A08C

Apricot · Tan · Warm Sun

HEX

#D9A08C

RGB

rgb(217, 160, 140)

HSL

hsl(16, 50%, 70%)

HSB

hsb(16, 35%, 85%)

CMYK

cmyk(0%, 26%, 35%, 15%)

Oklch

oklch(75.5% 0.074 40.2)

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

#D9B8B3

Peach Pink · Silver · Coral Red

HEX

#D9B8B3

RGB

rgb(217, 184, 179)

HSL

hsl(8, 33%, 78%)

HSB

hsb(8, 18%, 85%)

CMYK

cmyk(0%, 15%, 18%, 15%)

Oklch

oklch(81.0% 0.039 28.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#E2CDDC

Mauve · LightGray · Lavender

HEX

#E2CDDC

RGB

rgb(226, 205, 220)

HSL

hsl(317, 27%, 85%)

HSB

hsb(317, 9%, 89%)

CMYK

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

Oklch

oklch(87.0% 0.031 335.9)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

#E5E8ED

Azure · Lavender · Sky Blue

HEX

#E5E8ED

RGB

rgb(229, 232, 237)

HSL

hsl(218, 18%, 91%)

HSB

hsb(218, 3%, 93%)

CMYK

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

Oklch

oklch(93.0% 0.007 260.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E27530

329EE2

Analogous

E23246

E27530

E2CD32

Triadic

E27530

32E275

7532E2

Split-Comp.

E27530

32E2CD

3246E2

Tetradic

E27530

46E232

329EE2

CD32E2

Contrast Matrix WCAG 2.1 Contrast

E27530	D9A08C	D9B8B3	E2CDDC	E5E8ED
—	1.4 Fail	1.7 Fail	2.1 Fail	2.5 Fail
1.4 Fail	—	1.2 Fail	1.5 Fail	1.8 Fail
1.7 Fail	1.2 Fail	—	1.2 Fail	1.5 Fail
2.1 Fail	1.5 Fail	1.2 Fail	—	1.2 Fail
2.5 Fail	1.8 Fail	1.5 Fail	1.2 Fail	—

White BG

3.1AA Large

2.2Fail

1.8Fail

1.5Fail

1.2Fail

Black BG

6.8AA

9.4AAA

11.5AAA

14.0AAA

17.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B241

C0C091

CBCAB4

D9D9D8

E6E6EC

Deuteranopia

B9C145

C4C892

CDCFB5

DADCD8

E6E6EB

Tritanopia

DD4E51

D69596

D7B5B5

E1D6D5

E5EBEB

Achromatopsia

8E8E8E

AFAFAF

C1C1C1

D5D5D5

E8E8E8

Shades & Tints Shades & Tints

#E27530

Dark

Light

#D9A08C

Dark

Light

#D9B8B3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e27530;
  --color-2: #d9a08c;
  --color-3: #d9b8b3;
  --color-4: #e2cddc;
  --color-5: #e5e8ed;
}

SCSS

$color-1: #e27530;
$color-2: #d9a08c;
$color-3: #d9b8b3;
$color-4: #e2cddc;
$color-5: #e5e8ed;

TAILWIND

colors: {
  'brand-1': '#e27530',
  'brand-2': '#d9a08c',
  'brand-3': '#d9b8b3',
  'brand-4': '#e2cddc',
  'brand-5': '#e5e8ed',
}

RGB Array

[226, 117, 48], [217, 160, 140], [217, 184, 179], [226, 205, 220], [229, 232, 237]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #E27530, #D9A08C, #D9B8B3, #E2CDDC, #E5E8ED 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: #e27530; --color-2: #d9a08c; --color-3: #d9b8b3; --color-4: #e2cddc; --color-5: #e5e8ed. 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 warm-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