#E3DEC5 + #CED1BC + #9BBABD + #49B0BF + #DE2157 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E3DEC5

Fresh Green · LightGray · Lemon Cream

HEX

#E3DEC5

RGB

rgb(227, 222, 197)

HSL

hsl(50, 35%, 83%)

HSB

hsb(50, 13%, 89%)

CMYK

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

Oklch

oklch(89.8% 0.034 97.7)

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

#CED1BC

Fresh Green · Silver · Lemon Cream

HEX

#CED1BC

RGB

rgb(206, 209, 188)

HSL

hsl(69, 19%, 78%)

HSB

hsb(69, 10%, 82%)

CMYK

cmyk(1%, 0%, 10%, 18%)

Oklch

oklch(85.3% 0.029 113.6)

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

#9BBABD

Sky Blue · DarkGray · Lake Green

HEX

#9BBABD

RGB

rgb(155, 186, 189)

HSL

hsl(185, 20%, 67%)

HSB

hsb(185, 18%, 74%)

CMYK

cmyk(18%, 2%, 0%, 26%)

Oklch

oklch(76.7% 0.034 203.7)

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

#49B0BF

Slate Blue · MediumTurquoise · Lake Green

HEX

#49B0BF

RGB

rgb(73, 176, 191)

HSL

hsl(188, 48%, 52%)

HSB

hsb(188, 62%, 75%)

CMYK

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

Oklch

oklch(70.3% 0.096 208.4)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#DE2157

Dark Violet · Crimson · Camellia

HEX

#DE2157

RGB

rgb(222, 33, 87)

HSL

hsl(343, 74%, 50%)

HSB

hsb(343, 85%, 87%)

CMYK

cmyk(0%, 85%, 61%, 13%)

Oklch

oklch(58.5% 0.218 12.5)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E3DEC5

C4CAE3

Analogous

E3CFC4

E3DEC5

D9E3C4

Triadic

E3DEC5

C4E3DE

DEC4E3

Split-Comp.

E3DEC5

C4D9E3

CFC4E3

Tetradic

E3DEC5

C4E3CF

C4CAE3

E3C4D9

Contrast Matrix WCAG 2.1 Contrast

E3DEC5	CED1BC	9BBABD	49B0BF	DE2157
—	1.2 Fail	1.5 Fail	1.9 Fail	3.5 AA Large
1.2 Fail	—	1.3 Fail	1.6 Fail	3.0 AA Large
1.5 Fail	1.3 Fail	—	1.2 Fail	2.3 Fail
1.9 Fail	1.6 Fail	1.2 Fail	—	1.8 Fail
3.5 AA Large	3.0 AA Large	2.3 Fail	1.8 Fail	—

White BG

1.4Fail

1.6Fail

2.1Fail

2.5Fail

4.7AA

Black BG

15.5AAA

13.5AAA

10.2AAA

8.2AAA

4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E1E1CB

CFCFC1

A8A9BC

7677BB

8C8A4A

Deuteranopia

E1E1CC

CFCFC2

A7A4BC

7068BB

97A547

Tritanopia

E3D0D1

CEC5C6

9DBCBC

4EB9B8

D5403D

Achromatopsia

DDDDDD

CECECE

B1B1B1

939393

606060

Shades & Tints Shades & Tints

#E3DEC5

Dark

Light

#CED1BC

Dark

Light

#9BBABD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e3dec5;
  --color-2: #ced1bc;
  --color-3: #9bbabd;
  --color-4: #49b0bf;
  --color-5: #de2157;
}

SCSS

$color-1: #e3dec5;
$color-2: #ced1bc;
$color-3: #9bbabd;
$color-4: #49b0bf;
$color-5: #de2157;

TAILWIND

colors: {
  'brand-1': '#e3dec5',
  'brand-2': '#ced1bc',
  'brand-3': '#9bbabd',
  'brand-4': '#49b0bf',
  'brand-5': '#de2157',
}

RGB Array

[227, 222, 197], [206, 209, 188], [155, 186, 189], [73, 176, 191], [222, 33, 87]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E3DEC5, #CED1BC, #9BBABD, #49B0BF, #DE2157 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: #e3dec5; --color-2: #ced1bc; --color-3: #9bbabd; --color-4: #49b0bf; --color-5: #de2157. 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