#B3CED5 + #F1E6C6 + #F3CC8B + #F0B684 + #9E7B68 · vintage - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarmCool

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPoster

Color Details Color Details

#B3CED5

Sky Blue · LightSteelBlue · Glacier Blue

HEX

#B3CED5

RGB

rgb(179, 206, 213)

HSL

hsl(192, 29%, 77%)

HSB

hsb(192, 16%, 84%)

CMYK

cmyk(16%, 3%, 0%, 16%)

Oklch

oklch(83.4% 0.031 215.1)

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

#F1E6C6

Goose Yellow · Bisque · Lemon Cream

HEX

#F1E6C6

RGB

rgb(241, 230, 198)

HSL

hsl(45, 61%, 86%)

HSB

hsb(45, 18%, 95%)

CMYK

cmyk(0%, 5%, 18%, 5%)

Oklch

oklch(92.5% 0.044 91.3)

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

#F3CC8B

Goose Yellow · Khaki · Warm Sun

HEX

#F3CC8B

RGB

rgb(243, 204, 139)

HSL

hsl(38, 81%, 75%)

HSB

hsb(38, 43%, 95%)

CMYK

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

Oklch

oklch(86.4% 0.093 79.8)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#F0B684

Apricot · BurlyWood · Warm Sun

HEX

#F0B684

RGB

rgb(240, 182, 132)

HSL

hsl(28, 78%, 73%)

HSB

hsb(28, 45%, 94%)

CMYK

cmyk(0%, 24%, 45%, 6%)

Oklch

oklch(81.8% 0.094 61.7)

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

#9E7B68

Tangerine · Gray · Warm Sun

HEX

#9E7B68

RGB

rgb(158, 123, 104)

HSL

hsl(21, 22%, 51%)

HSB

hsb(21, 34%, 62%)

CMYK

cmyk(0%, 22%, 34%, 38%)

Oklch

oklch(61.2% 0.052 49.9)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3CED5

D5BAB3

Analogous

B3D5CB

B3CED5

B3BED5

Triadic

B3CED5

D5B3CF

CFD5B3

Split-Comp.

B3CED5

D5B3BE

D5CBB3

Tetradic

B3CED5

CBB3D5

D5BAB3

BED5B3

Contrast Matrix WCAG 2.1 Contrast

B3CED5	F1E6C6	F3CC8B	F0B684	9E7B68
—	1.3 Fail	1.1 Fail	1.1 Fail	2.3 Fail
1.3 Fail	—	1.2 Fail	1.4 Fail	3.1 AA Large
1.1 Fail	1.2 Fail	—	1.2 Fail	2.5 Fail
1.1 Fail	1.4 Fail	1.2 Fail	—	2.1 Fail
2.3 Fail	3.1 AA Large	2.5 Fail	2.1 Fail	—

White BG

1.7Fail

1.2Fail

1.5Fail

1.8Fail

3.8AA Large

Black BG

12.7AAA

16.9AAA

13.8AAA

11.7AAA

5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBFD3

ECECCE

E2E29B

D7D690

8F8F6D

Deuteranopia

BDBBD3

EDEED0

E4E79F

DADF93

91946E

Tritanopia

B4D2D2

F0D4D5

F1A7AA

ED9A9C

9C7071

Achromatopsia

C7C7C7

E6E6E6

D0D0D0

C2C2C2

838383

Shades & Tints Shades & Tints

#B3CED5

Dark

Light

#F1E6C6

Dark

Light

#F3CC8B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3ced5;
  --color-2: #f1e6c6;
  --color-3: #f3cc8b;
  --color-4: #f0b684;
  --color-5: #9e7b68;
}

SCSS

$color-1: #b3ced5;
$color-2: #f1e6c6;
$color-3: #f3cc8b;
$color-4: #f0b684;
$color-5: #9e7b68;

TAILWIND

colors: {
  'brand-1': '#b3ced5',
  'brand-2': '#f1e6c6',
  'brand-3': '#f3cc8b',
  'brand-4': '#f0b684',
  'brand-5': '#9e7b68',
}

RGB Array

[179, 206, 213], [241, 230, 198], [243, 204, 139], [240, 182, 132], [158, 123, 104]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #B3CED5, #F1E6C6, #F3CC8B, #F0B684, #9E7B68 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: #b3ced5; --color-2: #f1e6c6; --color-3: #f3cc8b; --color-4: #f0b684; --color-5: #9e7b68. 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 vintage-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