#F1EFF4 + #E4E0DD + #A3A3AC + #69D2F0 + #9BF8F4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F1EFF4

Wisteria · Lavender · Lavender

HEX

#F1EFF4

RGB

rgb(241, 239, 244)

HSL

hsl(264, 19%, 95%)

HSB

hsb(264, 2%, 96%)

CMYK

cmyk(1%, 2%, 0%, 4%)

Oklch

oklch(95.5% 0.007 304.2)

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

#E4E0DD

Apricot · LightGray · Peach Orange

HEX

#E4E0DD

RGB

rgb(228, 224, 221)

HSL

hsl(26, 11%, 88%)

HSB

hsb(26, 3%, 89%)

CMYK

cmyk(0%, 2%, 3%, 11%)

Oklch

oklch(90.9% 0.006 59.6)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#A3A3AC

Ash · DarkGray · Silver Sand

HEX

#A3A3AC

RGB

rgb(163, 163, 172)

HSL

hsl(240, 5%, 66%)

HSB

hsb(240, 5%, 67%)

CMYK

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

Oklch

oklch(71.8% 0.013 286.1)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#69D2F0

Sky Blue · SkyBlue · Lake Green

HEX

#69D2F0

RGB

rgb(105, 210, 240)

HSL

hsl(193, 82%, 68%)

HSB

hsb(193, 56%, 94%)

CMYK

cmyk(56%, 13%, 0%, 6%)

Oklch

oklch(81.2% 0.106 219.1)

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

#9BF8F4

Jade · LightBlue · Glacier Blue

HEX

#9BF8F4

RGB

rgb(155, 248, 244)

HSL

hsl(177, 87%, 79%)

HSB

hsb(177, 38%, 97%)

CMYK

cmyk(38%, 0%, 2%, 3%)

Oklch

oklch(92.0% 0.089 192.2)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1EFF4

F3F5F0

Analogous

F0F0F5

F1EFF4

F4F0F5

Triadic

F1EFF4

F5F2F0

F0F5F2

Split-Comp.

F1EFF4

F5F4F0

F0F5F0

Tetradic

F1EFF4

F5F0F0

F3F5F0

F0F5F4

Contrast Matrix WCAG 2.1 Contrast

F1EFF4	E4E0DD	A3A3AC	69D2F0	9BF8F4
—	1.1 Fail	2.2 Fail	1.5 Fail	1.1 Fail
1.1 Fail	—	1.9 Fail	1.3 Fail	1.1 Fail
2.2 Fail	1.9 Fail	—	1.4 Fail	2.0 Fail
1.5 Fail	1.3 Fail	1.4 Fail	—	1.4 Fail
1.1 Fail	1.1 Fail	2.0 Fail	1.4 Fail	—

White BG

1.1Fail

1.3Fail

2.5Fail

1.7Fail

1.2Fail

Black BG

18.4AAA

16.0AAA

8.4AAA

12.1AAA

17.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F0F0F3

E2E2DE

A3A3AA

9697E9

C3C4F5

Deuteranopia

F0F0F3

E3E3DE

A3A3A9

9089E7

BEB7F5

Tritanopia

F1F2F2

E4DEDE

A3A8A8

6EE3E2

A0F6F6

Achromatopsia

F0F0F0

E1E1E1

A4A4A4

B6B6B6

DCDCDC

Shades & Tints Shades & Tints

#F1EFF4

Dark

Light

#E4E0DD

Dark

Light

#A3A3AC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1eff4;
  --color-2: #e4e0dd;
  --color-3: #a3a3ac;
  --color-4: #69d2f0;
  --color-5: #9bf8f4;
}

SCSS

$color-1: #f1eff4;
$color-2: #e4e0dd;
$color-3: #a3a3ac;
$color-4: #69d2f0;
$color-5: #9bf8f4;

TAILWIND

colors: {
  'brand-1': '#f1eff4',
  'brand-2': '#e4e0dd',
  'brand-3': '#a3a3ac',
  'brand-4': '#69d2f0',
  'brand-5': '#9bf8f4',
}

RGB Array

[241, 239, 244], [228, 224, 221], [163, 163, 172], [105, 210, 240], [155, 248, 244]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1EFF4, #E4E0DD, #A3A3AC, #69D2F0, #9BF8F4 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: #f1eff4; --color-2: #e4e0dd; --color-3: #a3a3ac; --color-4: #69d2f0; --color-5: #9bf8f4. 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