#E34733 + #E36352 + #E3A47D + #A8E3D6 + #E3DED1 · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E34733

Vermilion · Chocolate · Passion Red

HEX

#E34733

RGB

rgb(227, 71, 51)

HSL

hsl(7, 76%, 55%)

HSB

hsb(7, 78%, 89%)

CMYK

cmyk(0%, 69%, 78%, 11%)

Oklch

oklch(61.8% 0.196 30.6)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#E36352

Peach Pink · Tomato · Coral Red

HEX

#E36352

RGB

rgb(227, 99, 82)

HSL

hsl(7, 72%, 61%)

HSB

hsb(7, 64%, 89%)

CMYK

cmyk(0%, 56%, 64%, 11%)

Oklch

oklch(65.6% 0.163 29.8)

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

#E3A47D

Apricot · DarkSalmon · Warm Sun

HEX

#E3A47D

RGB

rgb(227, 164, 125)

HSL

hsl(23, 65%, 69%)

HSB

hsb(23, 45%, 89%)

CMYK

cmyk(0%, 28%, 45%, 11%)

Oklch

oklch(77.0% 0.092 52.7)

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

#A8E3D6

Jade · LightBlue · Glacier Blue

HEX

#A8E3D6

RGB

rgb(168, 227, 214)

HSL

hsl(167, 51%, 77%)

HSB

hsb(167, 26%, 89%)

CMYK

cmyk(26%, 0%, 6%, 11%)

Oklch

oklch(87.2% 0.063 179.6)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#E3DED1

Goose Yellow · LightGray · Lemon Cream

HEX

#E3DED1

RGB

rgb(227, 222, 209)

HSL

hsl(43, 24%, 85%)

HSB

hsb(43, 8%, 89%)

CMYK

cmyk(0%, 2%, 8%, 11%)

Oklch

oklch(90.1% 0.018 89.4)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E34733

35CFE3

Analogous

E33578

E34733

E3A135

Triadic

E34733

35E349

4935E3

Split-Comp.

E34733

35E3A1

3578E3

Tetradic

E34733

78E335

35CFE3

A135E3

Contrast Matrix WCAG 2.1 Contrast

E34733	E36352	E3A47D	A8E3D6	E3DED1
—	1.2 Fail	1.9 Fail	2.8 Fail	3.0 Fail
1.2 Fail	—	1.6 Fail	2.4 Fail	2.5 Fail
1.9 Fail	1.6 Fail	—	1.5 Fail	1.6 Fail
2.8 Fail	2.4 Fail	1.5 Fail	—	1.1 Fail
3.0 Fail	2.5 Fail	1.6 Fail	1.1 Fail	—

White BG

4.0AA Large

3.4AA Large

2.1Fail

1.4Fail

1.3Fail

Black BG

5.2AA

6.2AA

9.9AAA

14.6AAA

15.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9F9E38

ACAA56

C8C786

C2C2D9

E1E1D4

Deuteranopia

A9B439

B3BD57

CBD089

BEBADA

E1E1D5

Tritanopia

DB3C3D

DD595A

E08E90

ABDCDC

E3D7D7

Achromatopsia

737373

878787

B2B2B2

D0D0D0

DEDEDE

Shades & Tints Shades & Tints

#E34733

Dark

Light

#E36352

Dark

Light

#E3A47D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e34733;
  --color-2: #e36352;
  --color-3: #e3a47d;
  --color-4: #a8e3d6;
  --color-5: #e3ded1;
}

SCSS

$color-1: #e34733;
$color-2: #e36352;
$color-3: #e3a47d;
$color-4: #a8e3d6;
$color-5: #e3ded1;

TAILWIND

colors: {
  'brand-1': '#e34733',
  'brand-2': '#e36352',
  'brand-3': '#e3a47d',
  'brand-4': '#a8e3d6',
  'brand-5': '#e3ded1',
}

RGB Array

[227, 71, 51], [227, 99, 82], [227, 164, 125], [168, 227, 214], [227, 222, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #E34733, #E36352, #E3A47D, #A8E3D6, #E3DED1 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: #e34733; --color-2: #e36352; --color-3: #e3a47d; --color-4: #a8e3d6; --color-5: #e3ded1. 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 summer-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