#B3A199 + #F8F6EC + #F0E7CB + #E3D4B9 + #D5C0AC · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B3A199

Apricot · DarkGray · Warm Sun

HEX

#B3A199

RGB

rgb(179, 161, 153)

HSL

hsl(18, 15%, 65%)

HSB

hsb(18, 15%, 70%)

CMYK

cmyk(0%, 10%, 15%, 30%)

Oklch

oklch(72.2% 0.024 45.5)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#F8F6EC

Fresh Green · SeaShell · Lemon Cream

HEX

#F8F6EC

RGB

rgb(248, 246, 236)

HSL

hsl(50, 46%, 95%)

HSB

hsb(50, 5%, 97%)

CMYK

cmyk(0%, 1%, 5%, 3%)

Oklch

oklch(97.2% 0.013 97.4)

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

#F0E7CB

Goose Yellow · Bisque · Lemon Cream

HEX

#F0E7CB

RGB

rgb(240, 231, 203)

HSL

hsl(45, 55%, 87%)

HSB

hsb(45, 15%, 94%)

CMYK

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

Oklch

oklch(92.8% 0.038 92.2)

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

#E3D4B9

Goose Yellow · Wheat · Peach Orange

HEX

#E3D4B9

RGB

rgb(227, 212, 185)

HSL

hsl(39, 43%, 81%)

HSB

hsb(39, 19%, 89%)

CMYK

cmyk(0%, 7%, 19%, 11%)

Oklch

oklch(87.5% 0.040 82.3)

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

#D5C0AC

Apricot · Silver · Warm Sun

HEX

#D5C0AC

RGB

rgb(213, 192, 172)

HSL

hsl(29, 33%, 75%)

HSB

hsb(29, 19%, 84%)

CMYK

cmyk(0%, 10%, 19%, 16%)

Oklch

oklch(82.0% 0.036 65.9)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3A199

98ABB3

Analogous

B3989E

B3A199

B3AE98

Triadic

B3A199

98B3A0

A098B3

Split-Comp.

B3A199

98B3AE

989EB3

Tetradic

B3A199

9EB398

98ABB3

AE98B3

Contrast Matrix WCAG 2.1 Contrast

B3A199	F8F6EC	F0E7CB	E3D4B9	D5C0AC
—	2.3 Fail	2.0 Fail	1.7 Fail	1.4 Fail
2.3 Fail	—	1.1 Fail	1.3 Fail	1.6 Fail
2.0 Fail	1.1 Fail	—	1.2 Fail	1.4 Fail
1.7 Fail	1.3 Fail	1.2 Fail	—	1.2 Fail
1.4 Fail	1.6 Fail	1.4 Fail	1.2 Fail	—

White BG

2.5Fail

1.1Fail

1.2Fail

1.5Fail

1.8Fail

Black BG

8.5AAA

19.4AAA

17.0AAA

14.4AAA

12.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABAB9B

F7F7EE

ECECD2

DDDCC0

CCCCB1

Deuteranopia

ACAE9B

F7F7EF

EDEDD3

DDDEC1

CDCFB2

Tritanopia

B29C9D

F8F0F1

F0D7D8

E2C5C6

D4B5B6

Achromatopsia

A5A5A5

F5F5F5

E6E6E6

D5D5D5

C4C4C4

Shades & Tints Shades & Tints

#B3A199

Dark

Light

#F8F6EC

Dark

Light

#F0E7CB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3a199;
  --color-2: #f8f6ec;
  --color-3: #f0e7cb;
  --color-4: #e3d4b9;
  --color-5: #d5c0ac;
}

SCSS

$color-1: #b3a199;
$color-2: #f8f6ec;
$color-3: #f0e7cb;
$color-4: #e3d4b9;
$color-5: #d5c0ac;

TAILWIND

colors: {
  'brand-1': '#b3a199',
  'brand-2': '#f8f6ec',
  'brand-3': '#f0e7cb',
  'brand-4': '#e3d4b9',
  'brand-5': '#d5c0ac',
}

RGB Array

[179, 161, 153], [248, 246, 236], [240, 231, 203], [227, 212, 185], [213, 192, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #B3A199, #F8F6EC, #F0E7CB, #E3D4B9, #D5C0AC 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: #b3a199; --color-2: #f8f6ec; --color-3: #f0e7cb; --color-4: #e3d4b9; --color-5: #d5c0ac. 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 cool-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