#D1E4D1 + #BEE2D4 + #ACDDDA + #A5D1D0 + #7BA2B1 · vintage - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessCool

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPoster

Color Details Color Details

#D1E4D1

Celadon · LightGray · Mint Green

HEX

#D1E4D1

RGB

rgb(209, 228, 209)

HSL

hsl(120, 26%, 86%)

HSB

hsb(120, 8%, 89%)

CMYK

cmyk(8%, 0%, 8%, 11%)

Oklch

oklch(89.9% 0.033 145.3)

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

#BEE2D4

Jade · LightGray · Mint Green

HEX

#BEE2D4

RGB

rgb(190, 226, 212)

HSL

hsl(157, 38%, 82%)

HSB

hsb(157, 16%, 89%)

CMYK

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

Oklch

oklch(88.3% 0.042 169.8)

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

#ACDDDA

Jade · LightBlue · Glacier Blue

HEX

#ACDDDA

RGB

rgb(172, 221, 218)

HSL

hsl(176, 42%, 77%)

HSB

hsb(176, 22%, 87%)

CMYK

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

Oklch

oklch(86.3% 0.051 191.6)

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

#A5D1D0

Jade · LightSteelBlue · Lake Green

HEX

#A5D1D0

RGB

rgb(165, 209, 208)

HSL

hsl(179, 32%, 73%)

HSB

hsb(179, 21%, 82%)

CMYK

cmyk(21%, 0%, 0%, 18%)

Oklch

oklch(82.9% 0.046 194.6)

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

#7BA2B1

Slate Blue · CadetBlue · Lake Green

HEX

#7BA2B1

RGB

rgb(123, 162, 177)

HSL

hsl(197, 26%, 59%)

HSB

hsb(197, 31%, 69%)

CMYK

cmyk(31%, 8%, 0%, 31%)

Oklch

oklch(68.9% 0.048 223.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1E4D1

E5D2E5

Analogous

DBE5D2

D1E4D1

D2E5DB

Triadic

D1E4D1

D2D2E5

E5D2D2

Split-Comp.

D1E4D1

DBD2E5

E5D2DB

Tetradic

D1E4D1

D2DBE5

E5D2E5

E5DBD2

Contrast Matrix WCAG 2.1 Contrast

D1E4D1	BEE2D4	ACDDDA	A5D1D0	7BA2B1
—	1.0 Fail	1.1 Fail	1.2 Fail	2.1 Fail
1.0 Fail	—	1.1 Fail	1.2 Fail	2.0 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.8 Fail
1.2 Fail	1.2 Fail	1.1 Fail	—	1.7 Fail
2.1 Fail	2.0 Fail	1.8 Fail	1.7 Fail	—

White BG

1.3Fail

1.4Fail

1.5Fail

1.7Fail

2.7Fail

Black BG

15.7AAA

15.0AAA

14.1AAA

12.6AAA

7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D9D9D6

CECED7

C1C2DB

B8B8D0

8C8CAD

Deuteranopia

D8D7D7

CCC9D8

BEBBDB

B6B2D0

8A87AD

Tritanopia

D2D9DA

C0DADB

AEDBDB

A7D0D0

7DABAA

Achromatopsia

DCDCDC

D6D6D6

CECECE

C4C4C4

989898

Shades & Tints Shades & Tints

#D1E4D1

Dark

Light

#BEE2D4

Dark

Light

#ACDDDA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1e4d1;
  --color-2: #bee2d4;
  --color-3: #acddda;
  --color-4: #a5d1d0;
  --color-5: #7ba2b1;
}

SCSS

$color-1: #d1e4d1;
$color-2: #bee2d4;
$color-3: #acddda;
$color-4: #a5d1d0;
$color-5: #7ba2b1;

TAILWIND

colors: {
  'brand-1': '#d1e4d1',
  'brand-2': '#bee2d4',
  'brand-3': '#acddda',
  'brand-4': '#a5d1d0',
  'brand-5': '#7ba2b1',
}

RGB Array

[209, 228, 209], [190, 226, 212], [172, 221, 218], [165, 209, 208], [123, 162, 177]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #D1E4D1, #BEE2D4, #ACDDDA, #A5D1D0, #7BA2B1 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: #d1e4d1; --color-2: #bee2d4; --color-3: #acddda; --color-4: #a5d1d0; --color-5: #7ba2b1. 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