#BFD8DD + #D4D7AA + #F3DEBD + #1FC8F7 + #8FAAA2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BFD8DD

Sky Blue · LightBlue · Glacier Blue

HEX

#BFD8DD

RGB

rgb(191, 216, 221)

HSL

hsl(190, 31%, 81%)

HSB

hsb(190, 14%, 87%)

CMYK

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

Oklch

oklch(86.5% 0.028 211.1)

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

#D4D7AA

Fresh Green · Wheat · Sunflower

HEX

#D4D7AA

RGB

rgb(212, 215, 170)

HSL

hsl(64, 36%, 75%)

HSB

hsb(64, 21%, 84%)

CMYK

cmyk(1%, 0%, 21%, 16%)

Oklch

oklch(86.5% 0.060 110.7)

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

#F3DEBD

Goose Yellow · Wheat · Peach Orange

HEX

#F3DEBD

RGB

rgb(243, 222, 189)

HSL

hsl(37, 69%, 85%)

HSB

hsb(37, 22%, 95%)

CMYK

cmyk(0%, 9%, 22%, 5%)

Oklch

oklch(90.9% 0.049 79.1)

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

#1FC8F7

Lake Blue · DeepSkyBlue · Lake Green

HEX

#1FC8F7

RGB

rgb(31, 200, 247)

HSL

hsl(193, 93%, 55%)

HSB

hsb(193, 87%, 97%)

CMYK

cmyk(87%, 19%, 0%, 3%)

Oklch

oklch(77.5% 0.140 223.5)

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

#8FAAA2

Jade · DarkSeaGreen · Lake Green

HEX

#8FAAA2

RGB

rgb(143, 170, 162)

HSL

hsl(162, 14%, 61%)

HSB

hsb(162, 16%, 67%)

CMYK

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

Oklch

oklch(71.5% 0.032 175.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BFD8DD

DEC5C0

Analogous

C0DED4

BFD8DD

C0CADE

Triadic

BFD8DD

DEC0D9

D9DEC0

Split-Comp.

BFD8DD

DEC0CA

DED4C0

Tetradic

BFD8DD

D4C0DE

DEC5C0

CADEC0

Contrast Matrix WCAG 2.1 Contrast

BFD8DD	D4D7AA	F3DEBD	1FC8F7	8FAAA2
—	1.0 Fail	1.1 Fail	1.3 Fail	1.7 Fail
1.0 Fail	—	1.1 Fail	1.3 Fail	1.7 Fail
1.1 Fail	1.1 Fail	—	1.5 Fail	1.9 Fail
1.3 Fail	1.3 Fail	1.5 Fail	—	1.3 Fail
1.7 Fail	1.7 Fail	1.9 Fail	1.3 Fail	—

White BG

1.5Fail

1.3Fail

2.0Fail

2.5Fail

Black BG

14.1AAA

16.0AAA

10.7AAA

8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACADC

D5D5B5

EAEAC5

686AEC

9B9BA4

Deuteranopia

C8C7DC

D5D5B8

EBEDC7

5E52E9

9997A4

Tritanopia

C0DBDB

D4BDBF

F2CBCD

27E3E1

90A5A6

Achromatopsia

D1D1D1

E1E1E1

9B9B9B

A1A1A1

Shades & Tints Shades & Tints

#BFD8DD

Dark

Light

#D4D7AA

Dark

Light

#F3DEBD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bfd8dd;
  --color-2: #d4d7aa;
  --color-3: #f3debd;
  --color-4: #1fc8f7;
  --color-5: #8faaa2;
}

SCSS

$color-1: #bfd8dd;
$color-2: #d4d7aa;
$color-3: #f3debd;
$color-4: #1fc8f7;
$color-5: #8faaa2;

TAILWIND

colors: {
  'brand-1': '#bfd8dd',
  'brand-2': '#d4d7aa',
  'brand-3': '#f3debd',
  'brand-4': '#1fc8f7',
  'brand-5': '#8faaa2',
}

RGB Array

[191, 216, 221], [212, 215, 170], [243, 222, 189], [31, 200, 247], [143, 170, 162]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BFD8DD, #D4D7AA, #F3DEBD, #1FC8F7, #8FAAA2 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: #bfd8dd; --color-2: #d4d7aa; --color-3: #f3debd; --color-4: #1fc8f7; --color-5: #8faaa2. 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