#F66A6B + #EBA47B + #D8DABD + #BDD6BE + #9CCDBF · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F66A6B

Peach Pink · Salmon · Coral Red

HEX

#F66A6B

RGB

rgb(246, 106, 107)

HSL

hsl(360, 89%, 69%)

HSB

hsb(360, 57%, 96%)

CMYK

cmyk(0%, 57%, 57%, 4%)

Oklch

oklch(69.7% 0.173 22.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Soft Aurora

#EBA47B

Apricot · DarkSalmon · Warm Sun

HEX

#EBA47B

RGB

rgb(235, 164, 123)

HSL

hsl(22, 74%, 70%)

HSB

hsb(22, 48%, 92%)

CMYK

cmyk(0%, 30%, 48%, 8%)

Oklch

oklch(77.8% 0.101 50.8)

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

#D8DABD

Fresh Green · LightGray · Lemon Cream

HEX

#D8DABD

RGB

rgb(216, 218, 189)

HSL

hsl(64, 28%, 80%)

HSB

hsb(64, 13%, 85%)

CMYK

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

Oklch

oklch(87.9% 0.039 110.4)

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

#BDD6BE

Celadon · Silver · Apple Green

HEX

#BDD6BE

RGB

rgb(189, 214, 190)

HSL

hsl(122, 23%, 79%)

HSB

hsb(122, 12%, 84%)

CMYK

cmyk(12%, 0%, 11%, 16%)

Oklch

oklch(85.1% 0.042 146.3)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#9CCDBF

Jade · LightSteelBlue · Lake Green

HEX

#9CCDBF

RGB

rgb(156, 205, 191)

HSL

hsl(163, 33%, 71%)

HSB

hsb(163, 24%, 80%)

CMYK

cmyk(24%, 0%, 7%, 20%)

Oklch

oklch(81.0% 0.055 175.4)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F66A6B

6AF6F6

Analogous

F66AB0

F66A6B

F6B06A

Triadic

F66A6B

6AF66A

6A6AF6

Split-Comp.

F66A6B

6AF6B0

6AB0F6

Tetradic

F66A6B

B0F66A

6AF6F6

B06AF6

Contrast Matrix WCAG 2.1 Contrast

F66A6B	EBA47B	D8DABD	BDD6BE	9CCDBF
—	1.4 Fail	2.0 Fail	1.9 Fail	1.7 Fail
1.4 Fail	—	1.4 Fail	1.3 Fail	1.2 Fail
2.0 Fail	1.4 Fail	—	1.1 Fail	1.2 Fail
1.9 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
1.7 Fail	1.2 Fail	1.2 Fail	1.1 Fail	—

White BG

2.9Fail

2.1Fail

1.4Fail

1.6Fail

1.8Fail

Black BG

7.2AAA

10.1AAA

14.7AAA

13.5AAA

11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9B86B

CCCC85

D9D9C4

C8C8C4

B1B2C2

Deuteranopia

C2CC6B

D0D687

D9D9C6

C6C5C5

AEABC3

Tritanopia

EF6B6B

E78D8E

D8CACB

BEC8C9

9EC5C6

Achromatopsia

949494

B5B5B5

D6D6D6

CCCCCC

BDBDBD

Shades & Tints Shades & Tints

#F66A6B

Dark

Light

#EBA47B

Dark

Light

#D8DABD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f66a6b;
  --color-2: #eba47b;
  --color-3: #d8dabd;
  --color-4: #bdd6be;
  --color-5: #9ccdbf;
}

SCSS

$color-1: #f66a6b;
$color-2: #eba47b;
$color-3: #d8dabd;
$color-4: #bdd6be;
$color-5: #9ccdbf;

TAILWIND

colors: {
  'brand-1': '#f66a6b',
  'brand-2': '#eba47b',
  'brand-3': '#d8dabd',
  'brand-4': '#bdd6be',
  'brand-5': '#9ccdbf',
}

RGB Array

[246, 106, 107], [235, 164, 123], [216, 218, 189], [189, 214, 190], [156, 205, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #F66A6B, #EBA47B, #D8DABD, #BDD6BE, #9CCDBF 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: #f66a6b; --color-2: #eba47b; --color-3: #d8dabd; --color-4: #bdd6be; --color-5: #9ccdbf. 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