#BBC1C7 + #C6D6CE + #DFE8D0 + #F3EFCC + #FFFCE1 · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BBC1C7

Azure · Silver · Cobalt Blue

HEX

#BBC1C7

RGB

rgb(187, 193, 199)

HSL

hsl(210, 10%, 76%)

HSB

hsb(210, 6%, 78%)

CMYK

cmyk(6%, 3%, 0%, 22%)

Oklch

oklch(80.8% 0.011 248.0)

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

#C6D6CE

Jade · LightGray · Mint Green

HEX

#C6D6CE

RGB

rgb(198, 214, 206)

HSL

hsl(150, 16%, 81%)

HSB

hsb(150, 7%, 84%)

CMYK

cmyk(7%, 0%, 4%, 16%)

Oklch

oklch(86.2% 0.020 164.5)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#DFE8D0

Willow Green · LightGray · Mint Green

HEX

#DFE8D0

RGB

rgb(223, 232, 208)

HSL

hsl(83, 34%, 86%)

HSB

hsb(83, 10%, 91%)

CMYK

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

Oklch

oklch(91.8% 0.033 123.8)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#F3EFCC

Fresh Green · Beige · Lemon Cream

HEX

#F3EFCC

RGB

rgb(243, 239, 204)

HSL

hsl(54, 62%, 88%)

HSB

hsb(54, 16%, 95%)

CMYK

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

Oklch

oklch(94.6% 0.046 101.9)

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

#FFFCE1

Fresh Green · LightYellow · Lemon Cream

HEX

#FFFCE1

RGB

rgb(255, 252, 225)

HSL

hsl(54, 100%, 94%)

HSB

hsb(54, 12%, 100%)

CMYK

cmyk(0%, 1%, 12%, 0%)

Oklch

oklch(98.6% 0.035 101.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBC1C7

C8C2BC

Analogous

BCC8C8

BBC1C7

BCBCC8

Triadic

BBC1C7

C8BCC2

C2C8BC

Split-Comp.

BBC1C7

C8BCBC

C8C8BC

Tetradic

BBC1C7

C8BCC8

C8C2BC

BCC8BC

Contrast Matrix WCAG 2.1 Contrast

BBC1C7	C6D6CE	DFE8D0	F3EFCC	FFFCE1
—	1.2 Fail	1.4 Fail	1.6 Fail	1.8 Fail
1.2 Fail	—	1.2 Fail	1.3 Fail	1.5 Fail
1.4 Fail	1.2 Fail	—	1.1 Fail	1.2 Fail
1.6 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
1.8 Fail	1.5 Fail	1.2 Fail	1.1 Fail	—

White BG

1.8Fail

1.5Fail

1.3Fail

1.2Fail

1.0Fail

Black BG

11.6AAA

13.9AAA

16.6AAA

18.0AAA

20.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BEBEC6

CDCDD0

E3E3D6

F1F1D4

FEFEE8

Deuteranopia

BDBDC5

CCCBD0

E2E2D7

F2F2D7

FEFEE9

Tritanopia

BBC4C4

C7D1D2

DFDADB

F3DBDD

FFEDEE

Achromatopsia

C0C0C0

D0D0D0

E3E3E3

ECECEC

FAFAFA

Shades & Tints Shades & Tints

#BBC1C7

Dark

Light

#C6D6CE

Dark

Light

#DFE8D0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbc1c7;
  --color-2: #c6d6ce;
  --color-3: #dfe8d0;
  --color-4: #f3efcc;
  --color-5: #fffce1;
}

SCSS

$color-1: #bbc1c7;
$color-2: #c6d6ce;
$color-3: #dfe8d0;
$color-4: #f3efcc;
$color-5: #fffce1;

TAILWIND

colors: {
  'brand-1': '#bbc1c7',
  'brand-2': '#c6d6ce',
  'brand-3': '#dfe8d0',
  'brand-4': '#f3efcc',
  'brand-5': '#fffce1',
}

RGB Array

[187, 193, 199], [198, 214, 206], [223, 232, 208], [243, 239, 204], [255, 252, 225]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #BBC1C7, #C6D6CE, #DFE8D0, #F3EFCC, #FFFCE1 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: #bbc1c7; --color-2: #c6d6ce; --color-3: #dfe8d0; --color-4: #f3efcc; --color-5: #fffce1. 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 sunset-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