#F0EEE0 + #93F3F1 + #9EDCE5 + #A8C4D9 + #A36676 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F0EEE0

Fresh Green · Beige · Lemon Cream

HEX

#F0EEE0

RGB

rgb(240, 238, 224)

HSL

hsl(53, 35%, 91%)

HSB

hsb(53, 7%, 94%)

CMYK

cmyk(0%, 1%, 7%, 6%)

Oklch

oklch(94.7% 0.019 100.1)

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

#93F3F1

Jade · LightBlue · Glacier Blue

HEX

#93F3F1

RGB

rgb(147, 243, 241)

HSL

hsl(179, 80%, 76%)

HSB

hsb(179, 40%, 95%)

CMYK

cmyk(40%, 0%, 1%, 5%)

Oklch

oklch(90.4% 0.091 193.9)

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

#9EDCE5

Sky Blue · LightBlue · Glacier Blue

HEX

#9EDCE5

RGB

rgb(158, 220, 229)

HSL

hsl(188, 58%, 76%)

HSB

hsb(188, 31%, 90%)

CMYK

cmyk(31%, 4%, 0%, 10%)

Oklch

oklch(85.6% 0.064 207.3)

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

#A8C4D9

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#A8C4D9

RGB

rgb(168, 196, 217)

HSL

hsl(206, 39%, 75%)

HSB

hsb(206, 23%, 85%)

CMYK

cmyk(23%, 10%, 0%, 15%)

Oklch

oklch(80.6% 0.042 240.5)

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

#A36676

Dark Violet · Gray · Rose Pink

HEX

#A36676

RGB

rgb(163, 102, 118)

HSL

hsl(344, 25%, 52%)

HSB

hsb(344, 37%, 64%)

CMYK

cmyk(0%, 37%, 28%, 36%)

Oklch

oklch(58.1% 0.081 2.9)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0EEE0

E0E2F0

Analogous

F0E6E0

F0EEE0

EAF0E0

Triadic

F0EEE0

E0F0EE

EEE0F0

Split-Comp.

F0EEE0

E0EAF0

E6E0F0

Tetradic

F0EEE0

E0F0E6

E0E2F0

F0E0EA

Contrast Matrix WCAG 2.1 Contrast

F0EEE0	93F3F1	9EDCE5	A8C4D9	A36676
—	1.1 Fail	1.3 Fail	1.6 Fail	3.8 AA Large
1.1 Fail	—	1.2 Fail	1.4 Fail	3.5 AA Large
1.3 Fail	1.2 Fail	—	1.2 Fail	2.9 Fail
1.6 Fail	1.4 Fail	1.2 Fail	—	2.5 Fail
3.8 AA Large	3.5 AA Large	2.9 Fail	2.5 Fail	—

White BG

1.2Fail

1.3Fail

1.5Fail

1.8Fail

4.4AA Large

Black BG

18.0AAA

16.3AAA

13.8AAA

11.6AAA

4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEFE3

BDBDF1

B9B9E3

B4B4D4

898872

Deuteranopia

EFEFE4

B7B0F2

B5B1E2

B3B0D3

8C9171

Tritanopia

F0E6E7

98F2F2

A1E1E1

A9D0CF

A06F6E

Achromatopsia

EDEDED

D6D6D6

CACACA

BEBEBE

7A7A7A

Shades & Tints Shades & Tints

#F0EEE0

Dark

Light

#93F3F1

Dark

Light

#9EDCE5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0eee0;
  --color-2: #93f3f1;
  --color-3: #9edce5;
  --color-4: #a8c4d9;
  --color-5: #a36676;
}

SCSS

$color-1: #f0eee0;
$color-2: #93f3f1;
$color-3: #9edce5;
$color-4: #a8c4d9;
$color-5: #a36676;

TAILWIND

colors: {
  'brand-1': '#f0eee0',
  'brand-2': '#93f3f1',
  'brand-3': '#9edce5',
  'brand-4': '#a8c4d9',
  'brand-5': '#a36676',
}

RGB Array

[240, 238, 224], [147, 243, 241], [158, 220, 229], [168, 196, 217], [163, 102, 118]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0EEE0, #93F3F1, #9EDCE5, #A8C4D9, #A36676 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: #f0eee0; --color-2: #93f3f1; --color-3: #9edce5; --color-4: #a8c4d9; --color-5: #a36676. 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