#F2F2D6 + #BDB79F + #84D8D8 + #E06671 + #EAEA58 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F2F2D6

Fresh Green · Beige · Lemon Cream

HEX

#F2F2D6

RGB

rgb(242, 242, 214)

HSL

hsl(60, 52%, 89%)

HSB

hsb(60, 12%, 95%)

CMYK

cmyk(0%, 0%, 12%, 5%)

Oklch

oklch(95.4% 0.037 107.1)

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

#BDB79F

Ginger · DarkGray · Sunflower

HEX

#BDB79F

RGB

rgb(189, 183, 159)

HSL

hsl(48, 19%, 68%)

HSB

hsb(48, 16%, 74%)

CMYK

cmyk(0%, 3%, 16%, 26%)

Oklch

oklch(77.8% 0.034 95.5)

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

#84D8D8

Sky Blue · SkyBlue · Lake Green

HEX

#84D8D8

RGB

rgb(132, 216, 216)

HSL

hsl(180, 52%, 68%)

HSB

hsb(180, 39%, 85%)

CMYK

cmyk(39%, 0%, 0%, 15%)

Oklch

oklch(82.9% 0.082 195.7)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#E06671

Peach Pink · LightCoral · Coral Red

HEX

#E06671

RGB

rgb(224, 102, 113)

HSL

hsl(355, 66%, 64%)

HSB

hsb(355, 54%, 88%)

CMYK

cmyk(0%, 54%, 50%, 12%)

Oklch

oklch(66.1% 0.152 16.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#EAEA58

Fresh Green · Khaki · Sunflower

HEX

#EAEA58

RGB

rgb(234, 234, 88)

HSL

hsl(60, 78%, 63%)

HSB

hsb(60, 62%, 92%)

CMYK

cmyk(0%, 0%, 62%, 8%)

Oklch

oklch(91.1% 0.164 109.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2F2D6

D4D4F2

Analogous

F2E3D4

F2F2D6

E3F2D4

Triadic

F2F2D6

D4F2F2

F2D4F2

Split-Comp.

F2F2D6

D4E3F2

E3D4F2

Tetradic

F2F2D6

D4F2E3

D4D4F2

F2D4E3

Contrast Matrix WCAG 2.1 Contrast

F2F2D6	BDB79F	84D8D8	E06671	EAEA58
—	1.8 Fail	1.4 Fail	2.9 Fail	1.1 Fail
1.8 Fail	—	1.2 Fail	1.7 Fail	1.6 Fail
1.4 Fail	1.2 Fail	—	2.0 Fail	1.3 Fail
2.9 Fail	1.7 Fail	2.0 Fail	—	2.6 Fail
1.1 Fail	1.6 Fail	1.3 Fail	2.6 Fail	—

White BG

1.1Fail

2.0Fail

1.6Fail

3.3AA Large

1.3Fail

Black BG

18.4AAA

10.4AAA

12.8AAA

6.3AA

16.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F2DD

BABAA5

A8A9D8

ABAA6E

EAEA7B

Deuteranopia

F2F2DE

BBBBA6

A49DD8

B2BB6E

EAEA84

Tritanopia

F2E2E3

BDA9AA

88D8D8

DA6C6C

EA979D

Achromatopsia

EFEFEF

B6B6B6

BFBFBF

8C8C8C

D9D9D9

Shades & Tints Shades & Tints

#F2F2D6

Dark

Light

#BDB79F

Dark

Light

#84D8D8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2f2d6;
  --color-2: #bdb79f;
  --color-3: #84d8d8;
  --color-4: #e06671;
  --color-5: #eaea58;
}

SCSS

$color-1: #f2f2d6;
$color-2: #bdb79f;
$color-3: #84d8d8;
$color-4: #e06671;
$color-5: #eaea58;

TAILWIND

colors: {
  'brand-1': '#f2f2d6',
  'brand-2': '#bdb79f',
  'brand-3': '#84d8d8',
  'brand-4': '#e06671',
  'brand-5': '#eaea58',
}

RGB Array

[242, 242, 214], [189, 183, 159], [132, 216, 216], [224, 102, 113], [234, 234, 88]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2F2D6, #BDB79F, #84D8D8, #E06671, #EAEA58 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: #f2f2d6; --color-2: #bdb79f; --color-3: #84d8d8; --color-4: #e06671; --color-5: #eaea58. 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 general-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