#F3EA95 + #CFD6A9 + #B4CAA7 + #A3ABB8 + #9C86B3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F3EA95

Fresh Green · Khaki · Lemon Cream

HEX

#F3EA95

RGB

rgb(243, 234, 149)

HSL

hsl(54, 80%, 77%)

HSB

hsb(54, 39%, 95%)

CMYK

cmyk(0%, 4%, 39%, 5%)

Oklch

oklch(92.5% 0.106 103.0)

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

#CFD6A9

Fresh Green · Silver · Sunflower

HEX

#CFD6A9

RGB

rgb(207, 214, 169)

HSL

hsl(69, 35%, 75%)

HSB

hsb(69, 21%, 84%)

CMYK

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

Oklch

oklch(85.9% 0.060 114.9)

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

#B4CAA7

Celadon · Silver · Apple Green

HEX

#B4CAA7

RGB

rgb(180, 202, 167)

HSL

hsl(98, 25%, 72%)

HSB

hsb(98, 17%, 79%)

CMYK

cmyk(11%, 0%, 17%, 21%)

Oklch

oklch(81.3% 0.054 133.9)

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

#A3ABB8

Azure · DarkGray · Cobalt Blue

HEX

#A3ABB8

RGB

rgb(163, 171, 184)

HSL

hsl(217, 13%, 68%)

HSB

hsb(217, 11%, 72%)

CMYK

cmyk(11%, 7%, 0%, 28%)

Oklch

oklch(73.9% 0.021 260.2)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#9C86B3

Wisteria · DarkGray · Lilac Purple

HEX

#9C86B3

RGB

rgb(156, 134, 179)

HSL

hsl(269, 23%, 61%)

HSB

hsb(269, 25%, 70%)

CMYK

cmyk(13%, 25%, 0%, 30%)

Oklch

oklch(65.6% 0.070 306.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3EA95

959FF3

Analogous

F3BB95

F3EA95

CEF395

Triadic

F3EA95

95F3EA

EA95F3

Split-Comp.

F3EA95

95CEF3

BB95F3

Tetradic

F3EA95

95F3BB

959FF3

F395CE

Contrast Matrix WCAG 2.1 Contrast

F3EA95	CFD6A9	B4CAA7	A3ABB8	9C86B3
—	1.2 Fail	1.4 Fail	1.9 Fail	2.6 Fail
1.2 Fail	—	1.2 Fail	1.5 Fail	2.1 Fail
1.4 Fail	1.2 Fail	—	1.3 Fail	1.8 Fail
1.9 Fail	1.5 Fail	1.3 Fail	—	1.4 Fail
2.6 Fail	2.1 Fail	1.8 Fail	1.4 Fail	—

White BG

1.2Fail

1.5Fail

1.8Fail

2.3Fail

3.2AA Large

Black BG

17.0AAA

13.8AAA

11.9AAA

9.1AAA

6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEFAA

D2D2B4

BEBEAF

A6A7B5

9292A8

Deuteranopia

F0F0AF

D2D1B7

BCBBB2

A6A5B4

9495A6

Tritanopia

F3BABD

CFBCBE

B5B6B8

A3B2B2

9BA09E

Achromatopsia

E3E3E3

CFCFCF

BFBFBF

AAAAAA

929292

Shades & Tints Shades & Tints

#F3EA95

Dark

Light

#CFD6A9

Dark

Light

#B4CAA7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3ea95;
  --color-2: #cfd6a9;
  --color-3: #b4caa7;
  --color-4: #a3abb8;
  --color-5: #9c86b3;
}

SCSS

$color-1: #f3ea95;
$color-2: #cfd6a9;
$color-3: #b4caa7;
$color-4: #a3abb8;
$color-5: #9c86b3;

TAILWIND

colors: {
  'brand-1': '#f3ea95',
  'brand-2': '#cfd6a9',
  'brand-3': '#b4caa7',
  'brand-4': '#a3abb8',
  'brand-5': '#9c86b3',
}

RGB Array

[243, 234, 149], [207, 214, 169], [180, 202, 167], [163, 171, 184], [156, 134, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F3EA95, #CFD6A9, #B4CAA7, #A3ABB8, #9C86B3 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: #f3ea95; --color-2: #cfd6a9; --color-3: #b4caa7; --color-4: #a3abb8; --color-5: #9c86b3. 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