#F0CCA8 + #C3B3A3 + #A38D80 + #FE8D85 + #E27E7E · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F0CCA8

Goose Yellow · Wheat · Peach Orange

HEX

#F0CCA8

RGB

rgb(240, 204, 168)

HSL

hsl(30, 71%, 80%)

HSB

hsb(30, 30%, 94%)

CMYK

cmyk(0%, 15%, 30%, 6%)

Oklch

oklch(86.7% 0.063 66.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#C3B3A3

Ginger · Tan · Warm Sun

HEX

#C3B3A3

RGB

rgb(195, 179, 163)

HSL

hsl(30, 21%, 70%)

HSB

hsb(30, 16%, 76%)

CMYK

cmyk(0%, 8%, 16%, 24%)

Oklch

oklch(77.6% 0.029 67.4)

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

#A38D80

Tangerine · Gray · Warm Sun

HEX

#A38D80

RGB

rgb(163, 141, 128)

HSL

hsl(22, 16%, 57%)

HSB

hsb(22, 21%, 64%)

CMYK

cmyk(0%, 13%, 21%, 36%)

Oklch

oklch(66.0% 0.033 52.5)

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

#FE8D85

Peach Pink · LightCoral · Coral Red

HEX

#FE8D85

RGB

rgb(254, 141, 133)

HSL

hsl(4, 98%, 76%)

HSB

hsb(4, 48%, 100%)

CMYK

cmyk(0%, 44%, 48%, 0%)

Oklch

oklch(76.4% 0.138 25.1)

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

#E27E7E

Peach Pink · LightCoral · Coral Red

HEX

#E27E7E

RGB

rgb(226, 126, 126)

HSL

hsl(0, 63%, 69%)

HSB

hsb(0, 44%, 89%)

CMYK

cmyk(0%, 44%, 44%, 11%)

Oklch

oklch(70.3% 0.124 20.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0CCA8

A8CCF0

Analogous

F0A8A8

F0CCA8

F0F0A8

Triadic

F0CCA8

A8F0CC

CCA8F0

Split-Comp.

F0CCA8

A8F0F0

A8A8F0

Tetradic

F0CCA8

A8F0A8

A8CCF0

F0A8F0

Contrast Matrix WCAG 2.1 Contrast

F0CCA8	C3B3A3	A38D80	FE8D85	E27E7E
—	1.4 Fail	2.1 Fail	1.5 Fail	1.8 Fail
1.4 Fail	—	1.5 Fail	1.1 Fail	1.4 Fail
2.1 Fail	1.5 Fail	—	1.4 Fail	1.1 Fail
1.5 Fail	1.1 Fail	1.4 Fail	—	1.2 Fail
1.8 Fail	1.4 Fail	1.1 Fail	1.2 Fail	—

White BG

1.5Fail

2.0Fail

3.1AA Large

2.2Fail

2.8Fail

Black BG

13.9AAA

10.3AAA

6.7AA

9.4AAA

7.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E0B1

BCBCA7

999983

CDCC87

B7B67E

Deuteranopia

E3E5B3

BDBEA8

9B9C84

D4DC87

BDC47E

Tritanopia

EEB8B9

C2AAAB

A28686

F88889

DD7E7E

Achromatopsia

D3D3D3

B6B6B6

929292

AEAEAE

9C9C9C

Shades & Tints Shades & Tints

#F0CCA8

Dark

Light

#C3B3A3

Dark

Light

#A38D80

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0cca8;
  --color-2: #c3b3a3;
  --color-3: #a38d80;
  --color-4: #fe8d85;
  --color-5: #e27e7e;
}

SCSS

$color-1: #f0cca8;
$color-2: #c3b3a3;
$color-3: #a38d80;
$color-4: #fe8d85;
$color-5: #e27e7e;

TAILWIND

colors: {
  'brand-1': '#f0cca8',
  'brand-2': '#c3b3a3',
  'brand-3': '#a38d80',
  'brand-4': '#fe8d85',
  'brand-5': '#e27e7e',
}

RGB Array

[240, 204, 168], [195, 179, 163], [163, 141, 128], [254, 141, 133], [226, 126, 126]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #F0CCA8, #C3B3A3, #A38D80, #FE8D85, #E27E7E 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: #f0cca8; --color-2: #c3b3a3; --color-3: #a38d80; --color-4: #fe8d85; --color-5: #e27e7e. 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