← Back to Editor

#896D5C · #B7D4BC · #C5D5C0 · #D7D9C5 · #F4E6CB

vintage

A 5-color vintage palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarm

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPosterData Visualization

Color Details Color Details

#896D5C

Tangerine · DimGray · Amber Brown

HEX
#896D5C
RGB
rgb(137, 109, 92)
HSL
hsl(23, 20%, 45%)
HSB
hsb(23, 33%, 54%)
CMYK
cmyk(0%, 20%, 33%, 46%)
Oklch
oklch(55.7% 0.044 52.8)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#B7D4BC

Celadon · Silver · Apple Green

HEX
#B7D4BC
RGB
rgb(183, 212, 188)
HSL
hsl(130, 25%, 77%)
HSB
hsb(130, 14%, 83%)
CMYK
cmyk(14%, 0%, 11%, 17%)
Oklch
oklch(84.2% 0.045 150.2)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#C5D5C0

Celadon · Silver · Apple Green

HEX
#C5D5C0
RGB
rgb(197, 213, 192)
HSL
hsl(106, 20%, 79%)
HSB
hsb(106, 10%, 84%)
CMYK
cmyk(8%, 0%, 10%, 16%)
Oklch
oklch(85.5% 0.033 138.2)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#D7D9C5

Fresh Green · LightGray · Lemon Cream

HEX
#D7D9C5
RGB
rgb(215, 217, 197)
HSL
hsl(66, 21%, 81%)
HSB
hsb(66, 9%, 85%)
CMYK
cmyk(1%, 0%, 9%, 15%)
Oklch
oklch(87.8% 0.027 111.6)

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

#F4E6CB

Goose Yellow · Bisque · Lemon Cream

HEX
#F4E6CB
RGB
rgb(244, 230, 203)
HSL
hsl(40, 65%, 88%)
HSB
hsb(40, 17%, 96%)
CMYK
cmyk(0%, 6%, 17%, 4%)
Oklch
oklch(92.9% 0.039 83.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

896D5C
5C788A

Analogous

8A5C61
896D5C
8A845C

Triadic

896D5C
5C8A6D
6D5C8A

Split-Comp.

896D5C
5C8A84
5C618A

Tetradic

896D5C
618A5C
5C788A
845C8A

Contrast Matrix WCAG 2.1 Contrast

896D5C
B7D4BC
C5D5C0
D7D9C5
F4E6CB
—
3.0
Fail
3.1
AA Large
3.3
AA Large
3.9
AA Large
3.0
Fail
—
1.0
Fail
1.1
Fail
1.3
Fail
3.1
AA Large
1.0
Fail
—
1.1
Fail
1.2
Fail
3.3
AA Large
1.1
Fail
1.1
Fail
—
1.2
Fail
3.9
AA Large
1.3
Fail
1.2
Fail
1.2
Fail
—
White BG
4.8AA
1.6Fail
1.5Fail
1.4Fail
1.2Fail
Black BG
4.4AA Large
13.2AAA
13.7AAA
14.6AAA
17.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7D7D60
C4C4C2
CCCCC5
D8D8CA
EEEED2

Deuteranopia

7F8161
C2C0C3
CBCAC6
D8D8CB
EFF0D3

Tritanopia

886364
B8C6C7
C6C9CA
D7CECF
F3D7D8

Achromatopsia

737373
C9C9C9
CECECE
D6D6D6
E7E7E7

Shades & Tints Shades & Tints

#896D5C

Dark
Light

#B7D4BC

Dark
Light

#C5D5C0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #896d5c;
  --color-2: #b7d4bc;
  --color-3: #c5d5c0;
  --color-4: #d7d9c5;
  --color-5: #f4e6cb;
}

SCSS

$color-1: #896d5c;
$color-2: #b7d4bc;
$color-3: #c5d5c0;
$color-4: #d7d9c5;
$color-5: #f4e6cb;

TAILWIND

colors: {
  'brand-1': '#896d5c',
  'brand-2': '#b7d4bc',
  'brand-3': '#c5d5c0',
  'brand-4': '#d7d9c5',
  'brand-5': '#f4e6cb',
}

RGB Array

[137, 109, 92], [183, 212, 188], [197, 213, 192], [215, 217, 197], [244, 230, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #896D5C, #B7D4BC, #C5D5C0, #D7D9C5, #F4E6CB is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #896d5c; --color-2: #b7d4bc; --color-3: #c5d5c0; --color-4: #d7d9c5; --color-5: #f4e6cb. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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