#F2E8B9 + #D5D2AB + #8695A8 + #95A7BF + #B1C6D3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F2E8B9

Goose Yellow · Wheat · Lemon Cream

HEX

#F2E8B9

RGB

rgb(242, 232, 185)

HSL

hsl(49, 69%, 84%)

HSB

hsb(49, 24%, 95%)

CMYK

cmyk(0%, 4%, 24%, 5%)

Oklch

oklch(92.7% 0.062 97.4)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#D5D2AB

Fresh Green · Silver · Sunflower

HEX

#D5D2AB

RGB

rgb(213, 210, 171)

HSL

hsl(56, 33%, 75%)

HSB

hsb(56, 20%, 84%)

CMYK

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

Oklch

oklch(85.6% 0.052 103.8)

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

#8695A8

Azure · LightSlateGray · Navy Blue

HEX

#8695A8

RGB

rgb(134, 149, 168)

HSL

hsl(214, 16%, 59%)

HSB

hsb(214, 20%, 66%)

CMYK

cmyk(20%, 11%, 0%, 34%)

Oklch

oklch(66.4% 0.033 254.4)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#95A7BF

Azure · DarkGray · Cobalt Blue

HEX

#95A7BF

RGB

rgb(149, 167, 191)

HSL

hsl(214, 25%, 67%)

HSB

hsb(214, 22%, 75%)

CMYK

cmyk(22%, 13%, 0%, 25%)

Oklch

oklch(72.2% 0.040 255.7)

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

#B1C6D3

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#B1C6D3

RGB

rgb(177, 198, 211)

HSL

hsl(203, 28%, 76%)

HSB

hsb(203, 16%, 83%)

CMYK

cmyk(16%, 6%, 0%, 17%)

Oklch

oklch(81.5% 0.029 234.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2E8B9

BAC4F2

Analogous

F2CCBA

F2E8B9

E1F2BA

Triadic

F2E8B9

BAF2E8

E8BAF2

Split-Comp.

F2E8B9

BAE1F2

CCBAF2

Tetradic

F2E8B9

BAF2CC

BAC4F2

F2BAE1

Contrast Matrix WCAG 2.1 Contrast

F2E8B9	D5D2AB	8695A8	95A7BF	B1C6D3
—	1.2 Fail	2.5 Fail	2.0 Fail	1.4 Fail
1.2 Fail	—	2.0 Fail	1.6 Fail	1.1 Fail
2.5 Fail	2.0 Fail	—	1.2 Fail	1.7 Fail
2.0 Fail	1.6 Fail	1.2 Fail	—	1.4 Fail
1.4 Fail	1.1 Fail	1.7 Fail	1.4 Fail	—

White BG

1.2Fail

1.5Fail

3.1AA Large

2.5Fail

1.8Fail

Black BG

17.0AAA

13.6AAA

6.9AA

8.6AAA

11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEEC4

D4D4B4

8C8DA3

9D9DB9

BABAD0

Deuteranopia

EEEFC7

D4D4B7

8C8BA2

9C9AB8

B9B7CF

Tritanopia

F1CDCF

D5BCBE

87A09F

96B5B4

B2CDCD

Achromatopsia

E6E6E6

CECECE

939393

A4A4A4

C1C1C1

Shades & Tints Shades & Tints

#F2E8B9

Dark

Light

#D5D2AB

Dark

Light

#8695A8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2e8b9;
  --color-2: #d5d2ab;
  --color-3: #8695a8;
  --color-4: #95a7bf;
  --color-5: #b1c6d3;
}

SCSS

$color-1: #f2e8b9;
$color-2: #d5d2ab;
$color-3: #8695a8;
$color-4: #95a7bf;
$color-5: #b1c6d3;

TAILWIND

colors: {
  'brand-1': '#f2e8b9',
  'brand-2': '#d5d2ab',
  'brand-3': '#8695a8',
  'brand-4': '#95a7bf',
  'brand-5': '#b1c6d3',
}

RGB Array

[242, 232, 185], [213, 210, 171], [134, 149, 168], [149, 167, 191], [177, 198, 211]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2E8B9, #D5D2AB, #8695A8, #95A7BF, #B1C6D3 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: #f2e8b9; --color-2: #d5d2ab; --color-3: #8695a8; --color-4: #95a7bf; --color-5: #b1c6d3. 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