#E8C979 + #F1E287 + #CDC793 + #8B9F9D + #89949A · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E8C979

Ginger · BurlyWood · Sunflower

HEX

#E8C979

RGB

rgb(232, 201, 121)

HSL

hsl(43, 71%, 69%)

HSB

hsb(43, 48%, 91%)

CMYK

cmyk(0%, 13%, 48%, 9%)

Oklch

oklch(84.5% 0.105 88.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#F1E287

Fresh Green · Khaki · Sunflower

HEX

#F1E287

RGB

rgb(241, 226, 135)

HSL

hsl(52, 79%, 74%)

HSB

hsb(52, 44%, 95%)

CMYK

cmyk(0%, 6%, 44%, 5%)

Oklch

oklch(90.5% 0.113 100.1)

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

#CDC793

Fresh Green · Tan · Sunflower

HEX

#CDC793

RGB

rgb(205, 199, 147)

HSL

hsl(54, 37%, 69%)

HSB

hsb(54, 28%, 80%)

CMYK

cmyk(0%, 3%, 28%, 20%)

Oklch

oklch(82.2% 0.069 102.2)

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

#8B9F9D

Mineral Blue · LightSlateGray · Silver Sand

HEX

#8B9F9D

RGB

rgb(139, 159, 157)

HSL

hsl(174, 9%, 58%)

HSB

hsb(174, 13%, 62%)

CMYK

cmyk(13%, 0%, 1%, 38%)

Oklch

oklch(68.6% 0.023 189.3)

Traditional「Mineral Blue」· Paint「Silver Sand」· Creative Urban Concrete

#89949A

Slate Blue · LightSlateGray · Silver Sand

HEX

#89949A

RGB

rgb(137, 148, 154)

HSL

hsl(201, 8%, 57%)

HSB

hsb(201, 11%, 60%)

CMYK

cmyk(11%, 4%, 0%, 40%)

Oklch

oklch(66.0% 0.016 231.3)

Traditional「Slate Blue」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E8C979

7898E8

Analogous

E89078

E8C979

D0E878

Triadic

E8C979

78E8C8

C878E8

Split-Comp.

E8C979

78D0E8

9078E8

Tetradic

E8C979

78E890

7898E8

E878D0

Contrast Matrix WCAG 2.1 Contrast

E8C979	F1E287	CDC793	8B9F9D	89949A
—	1.2 Fail	1.1 Fail	1.7 Fail	1.9 Fail
1.2 Fail	—	1.3 Fail	2.1 Fail	2.4 Fail
1.1 Fail	1.3 Fail	—	1.6 Fail	1.8 Fail
1.7 Fail	2.1 Fail	1.6 Fail	—	1.1 Fail
1.9 Fail	2.4 Fail	1.8 Fail	1.1 Fail	—

White BG

1.6Fail

1.3Fail

1.7Fail

2.8Fail

3.1AA Large

Black BG

13.1AAA

16.0AAA

12.2AAA

7.5AAA

6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDA8C

EBEA9D

CACAA0

94949D

8E8E99

Deuteranopia

DCDF91

EBEDA2

CBCBA3

93919E

8D8C98

Tritanopia

E69C9F

F0AEB2

CDAAAC

8C9E9E

8A9797

Achromatopsia

C9C9C9

DCDCDC

C3C3C3

999999

919191

Shades & Tints Shades & Tints

#E8C979

Dark

Light

#F1E287

Dark

Light

#CDC793

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e8c979;
  --color-2: #f1e287;
  --color-3: #cdc793;
  --color-4: #8b9f9d;
  --color-5: #89949a;
}

SCSS

$color-1: #e8c979;
$color-2: #f1e287;
$color-3: #cdc793;
$color-4: #8b9f9d;
$color-5: #89949a;

TAILWIND

colors: {
  'brand-1': '#e8c979',
  'brand-2': '#f1e287',
  'brand-3': '#cdc793',
  'brand-4': '#8b9f9d',
  'brand-5': '#89949a',
}

RGB Array

[232, 201, 121], [241, 226, 135], [205, 199, 147], [139, 159, 157], [137, 148, 154]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #E8C979, #F1E287, #CDC793, #8B9F9D, #89949A 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: #e8c979; --color-2: #f1e287; --color-3: #cdc793; --color-4: #8b9f9d; --color-5: #89949a. 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