← Back to Editor

#F0E5DA · #FFFFFF · #2FA7B3 · #EF4E4E · #E3BD23

summer

A 5-color summer palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#F0E5DA

Goose Yellow · Beige · Peach Orange

HEX
#F0E5DA
RGB
rgb(240, 229, 218)
HSL
hsl(30, 42%, 90%)
HSB
hsb(30, 9%, 94%)
CMYK
cmyk(0%, 5%, 9%, 6%)
Oklch
oklch(92.8% 0.019 67.6)

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

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#2FA7B3

Lake Blue · LightSeaGreen · Mint Ice

HEX
#2FA7B3
RGB
rgb(47, 167, 179)
HSL
hsl(185, 58%, 44%)
HSB
hsb(185, 74%, 70%)
CMYK
cmyk(74%, 7%, 0%, 30%)
Oklch
oklch(67.0% 0.103 205.0)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#EF4E4E

Peach Pink · Tomato · Coral Red

HEX
#EF4E4E
RGB
rgb(239, 78, 78)
HSL
hsl(0, 83%, 62%)
HSB
hsb(0, 67%, 94%)
CMYK
cmyk(0%, 67%, 67%, 6%)
Oklch
oklch(64.8% 0.198 24.5)

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

#E3BD23

Ginger · GoldenRod · Sunflower

HEX
#E3BD23
RGB
rgb(227, 189, 35)
HSL
hsl(48, 77%, 51%)
HSB
hsb(48, 85%, 89%)
CMYK
cmyk(0%, 17%, 85%, 11%)
Oklch
oklch(80.9% 0.158 93.4)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0E5DA
DBE6F0

Analogous

F0DBDB
F0E5DA
F0F0DB

Triadic

F0E5DA
DBF0E6
E6DBF0

Split-Comp.

F0E5DA
DBF0F0
DBDBF0

Tetradic

F0E5DA
DBF0DB
DBE6F0
F0DBF0

Contrast Matrix WCAG 2.1 Contrast

F0E5DA
FFFFFF
2FA7B3
EF4E4E
E3BD23
—
1.2
Fail
2.3
Fail
2.9
Fail
1.5
Fail
1.2
Fail
—
2.9
Fail
3.6
AA Large
1.8
Fail
2.3
Fail
2.9
Fail
—
1.2
Fail
1.6
Fail
2.9
Fail
3.6
AA Large
1.2
Fail
—
2.0
Fail
1.5
Fail
1.8
Fail
1.6
Fail
2.0
Fail
—
White BG
1.2Fail
1.0Fail
2.9Fail
3.6AA Large
1.8Fail
Black BG
16.9AAA
21.0AAA
7.3AAA
5.9AA
11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEBDD
FFFFFF
6364B0
A9A84E
D3D248

Deuteranopia

ECEDDD
FFFFFF
5C53AF
B3BF4E
D5D851

Tritanopia

EFDFDF
FFFFFF
35AEAD
E74E4E
E1666C

Achromatopsia

E7E7E7
FFFFFF
848484
7E7E7E
B7B7B7

Shades & Tints Shades & Tints

#F0E5DA

Dark
Light

#FFFFFF

Dark
Light

#2FA7B3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0e5da;
  --color-2: #ffffff;
  --color-3: #2fa7b3;
  --color-4: #ef4e4e;
  --color-5: #e3bd23;
}

SCSS

$color-1: #f0e5da;
$color-2: #ffffff;
$color-3: #2fa7b3;
$color-4: #ef4e4e;
$color-5: #e3bd23;

TAILWIND

colors: {
  'brand-1': '#f0e5da',
  'brand-2': '#ffffff',
  'brand-3': '#2fa7b3',
  'brand-4': '#ef4e4e',
  'brand-5': '#e3bd23',
}

RGB Array

[240, 229, 218], [255, 255, 255], [47, 167, 179], [239, 78, 78], [227, 189, 35]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #F0E5DA, #FFFFFF, #2FA7B3, #EF4E4E, #E3BD23 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f0e5da; --color-2: #ffffff; --color-3: #2fa7b3; --color-4: #ef4e4e; --color-5: #e3bd23. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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