#F2E4A2 + #E8D47D + #BCABCC + #766FBF + #6060C4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F2E4A2

Fresh Green · Wheat · Lemon Cream

HEX

#F2E4A2

RGB

rgb(242, 228, 162)

HSL

hsl(50, 75%, 79%)

HSB

hsb(50, 33%, 95%)

CMYK

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

Oklch

oklch(91.5% 0.085 97.6)

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

#E8D47D

Ginger · Khaki · Sunflower

HEX

#E8D47D

RGB

rgb(232, 212, 125)

HSL

hsl(49, 70%, 70%)

HSB

hsb(49, 46%, 91%)

CMYK

cmyk(0%, 9%, 46%, 9%)

Oklch

oklch(86.8% 0.110 96.8)

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

#BCABCC

Lilac · Silver · Lilac Purple

HEX

#BCABCC

RGB

rgb(188, 171, 204)

HSL

hsl(271, 24%, 74%)

HSB

hsb(271, 16%, 80%)

CMYK

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

Oklch

oklch(76.6% 0.050 308.4)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#766FBF

Deep Indigo · SlateBlue · Navy Blue

HEX

#766FBF

RGB

rgb(118, 111, 191)

HSL

hsl(245, 38%, 59%)

HSB

hsb(245, 42%, 75%)

CMYK

cmyk(38%, 42%, 0%, 25%)

Oklch

oklch(58.3% 0.120 286.0)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#6060C4

Deep Indigo · SlateBlue · Navy Blue

HEX

#6060C4

RGB

rgb(96, 96, 196)

HSL

hsl(240, 46%, 57%)

HSB

hsb(240, 51%, 77%)

CMYK

cmyk(51%, 51%, 0%, 23%)

Oklch

oklch(54.0% 0.152 280.0)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2E4A2

A1AFF2

Analogous

F2BCA1

F2E4A2

D7F2A1

Triadic

F2E4A2

A1F2E4

E4A1F2

Split-Comp.

F2E4A2

A1D7F2

BCA1F2

Tetradic

F2E4A2

A1F2BC

A1AFF2

F2A1D7

Contrast Matrix WCAG 2.1 Contrast

F2E4A2	E8D47D	BCABCC	766FBF	6060C4
—	1.2 Fail	1.7 Fail	3.4 AA Large	4.1 AA Large
1.2 Fail	—	1.4 Fail	2.9 Fail	3.6 AA Large
1.7 Fail	1.4 Fail	—	2.1 Fail	2.5 Fail
3.4 AA Large	2.9 Fail	2.1 Fail	—	1.2 Fail
4.1 AA Large	3.6 AA Large	2.5 Fail	1.2 Fail	—

White BG

1.3Fail

1.5Fail

2.1Fail

4.4AA Large

5.3AA

Black BG

16.4AAA

14.1AAA

9.8AAA

4.8AA

4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECB2

DFDF92

B5B4C4

7373AC

6060AC

Deuteranopia

EDEEB6

E1E297

B6B7C2

7374A7

6060A6

Tritanopia

F1BFC1

E7A3A6

BBBEBC

769C99

609995

Achromatopsia

E1E1E1

D0D0D0

B4B4B4

7A7A7A

6B6B6B

Shades & Tints Shades & Tints

#F2E4A2

Dark

Light

#E8D47D

Dark

Light

#BCABCC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2e4a2;
  --color-2: #e8d47d;
  --color-3: #bcabcc;
  --color-4: #766fbf;
  --color-5: #6060c4;
}

SCSS

$color-1: #f2e4a2;
$color-2: #e8d47d;
$color-3: #bcabcc;
$color-4: #766fbf;
$color-5: #6060c4;

TAILWIND

colors: {
  'brand-1': '#f2e4a2',
  'brand-2': '#e8d47d',
  'brand-3': '#bcabcc',
  'brand-4': '#766fbf',
  'brand-5': '#6060c4',
}

RGB Array

[242, 228, 162], [232, 212, 125], [188, 171, 204], [118, 111, 191], [96, 96, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2E4A2, #E8D47D, #BCABCC, #766FBF, #6060C4 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: #f2e4a2; --color-2: #e8d47d; --color-3: #bcabcc; --color-4: #766fbf; --color-5: #6060c4. 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