#FFF7EB + #B4D0D9 + #B1E6E5 + #D3F2EE + #CCDEDA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFF7EB

Goose Yellow · SeaShell · Peach Orange

HEX

#FFF7EB

RGB

rgb(255, 247, 235)

HSL

hsl(36, 100%, 96%)

HSB

hsb(36, 8%, 100%)

CMYK

cmyk(0%, 3%, 8%, 0%)

Oklch

oklch(97.9% 0.018 78.2)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#B4D0D9

Sky Blue · LightSteelBlue · Glacier Blue

HEX

#B4D0D9

RGB

rgb(180, 208, 217)

HSL

hsl(195, 33%, 78%)

HSB

hsb(195, 17%, 85%)

CMYK

cmyk(17%, 4%, 0%, 15%)

Oklch

oklch(84.0% 0.033 219.1)

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

#B1E6E5

Jade · LightBlue · Glacier Blue

HEX

#B1E6E5

RGB

rgb(177, 230, 229)

HSL

hsl(179, 51%, 80%)

HSB

hsb(179, 23%, 90%)

CMYK

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

Oklch

oklch(88.8% 0.054 194.8)

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

#D3F2EE

Jade · Lavender · Glacier Blue

HEX

#D3F2EE

RGB

rgb(211, 242, 238)

HSL

hsl(172, 54%, 89%)

HSB

hsb(172, 13%, 95%)

CMYK

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

Oklch

oklch(93.8% 0.033 187.2)

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

#CCDEDA

Jade · LightGray · Glacier Blue

HEX

#CCDEDA

RGB

rgb(204, 222, 218)

HSL

hsl(167, 21%, 84%)

HSB

hsb(167, 8%, 87%)

CMYK

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

Oklch

oklch(88.6% 0.020 181.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF7EB

EBF3FF

Analogous

FFEDEB

FFF7EB

FDFFEB

Triadic

FFF7EB

EBFFF7

F7EBFF

Split-Comp.

FFF7EB

EBFDFF

EDEBFF

Tetradic

FFF7EB

EBFFED

EBF3FF

FFEBFD

Contrast Matrix WCAG 2.1 Contrast

FFF7EB	B4D0D9	B1E6E5	D3F2EE	CCDEDA
—	1.5 Fail	1.3 Fail	1.1 Fail	1.3 Fail
1.5 Fail	—	1.2 Fail	1.4 Fail	1.2 Fail
1.3 Fail	1.2 Fail	—	1.2 Fail	1.0 Fail
1.1 Fail	1.4 Fail	1.2 Fail	—	1.2 Fail
1.3 Fail	1.2 Fail	1.0 Fail	1.2 Fail	—

White BG

1.1Fail

1.6Fail

1.4Fail

1.2Fail

1.4Fail

Black BG

19.8AAA

13.0AAA

15.3AAA

17.7AAA

15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FCFBEE

C0C0D7

C8C8E5

E0E1EF

D4D4DB

Deuteranopia

FCFDEF

BFBCD6

C5C1E5

DFDCEF

D3D1DB

Tritanopia

FFF0F1

B5D5D5

B4E5E5

D5F0F0

CDDCDC

Achromatopsia

F8F8F8

C9C9C9

D6D6D6

E8E8E8

D8D8D8

Shades & Tints Shades & Tints

#FFF7EB

Dark

Light

#B4D0D9

Dark

Light

#B1E6E5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff7eb;
  --color-2: #b4d0d9;
  --color-3: #b1e6e5;
  --color-4: #d3f2ee;
  --color-5: #ccdeda;
}

SCSS

$color-1: #fff7eb;
$color-2: #b4d0d9;
$color-3: #b1e6e5;
$color-4: #d3f2ee;
$color-5: #ccdeda;

TAILWIND

colors: {
  'brand-1': '#fff7eb',
  'brand-2': '#b4d0d9',
  'brand-3': '#b1e6e5',
  'brand-4': '#d3f2ee',
  'brand-5': '#ccdeda',
}

RGB Array

[255, 247, 235], [180, 208, 217], [177, 230, 229], [211, 242, 238], [204, 222, 218]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF7EB, #B4D0D9, #B1E6E5, #D3F2EE, #CCDEDA 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: #fff7eb; --color-2: #b4d0d9; --color-3: #b1e6e5; --color-4: #d3f2ee; --color-5: #ccdeda. 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