#D1F5AB + #AEE5A9 + #AFC7BC + #ADA9D4 + #928E9E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D1F5AB

Willow Green · Wheat · Mint Green

HEX

#D1F5AB

RGB

rgb(209, 245, 171)

HSL

hsl(89, 79%, 82%)

HSB

hsb(89, 30%, 96%)

CMYK

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

Oklch

oklch(92.7% 0.103 129.3)

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

#AEE5A9

Emerald · LightGreen · Apple Green

HEX

#AEE5A9

RGB

rgb(174, 229, 169)

HSL

hsl(115, 54%, 78%)

HSB

hsb(115, 26%, 90%)

CMYK

cmyk(24%, 0%, 26%, 10%)

Oklch

oklch(86.9% 0.099 142.6)

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

#AFC7BC

Jade · Silver · Apple Green

HEX

#AFC7BC

RGB

rgb(175, 199, 188)

HSL

hsl(153, 18%, 73%)

HSB

hsb(153, 12%, 78%)

CMYK

cmyk(12%, 0%, 6%, 22%)

Oklch

oklch(80.8% 0.030 166.3)

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

#ADA9D4

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#ADA9D4

RGB

rgb(173, 169, 212)

HSL

hsl(246, 33%, 75%)

HSB

hsb(246, 20%, 83%)

CMYK

cmyk(18%, 20%, 0%, 17%)

Oklch

oklch(75.3% 0.061 289.1)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#928E9E

Deep Indigo · LightSlateGray · Silver Sand

HEX

#928E9E

RGB

rgb(146, 142, 158)

HSL

hsl(255, 8%, 59%)

HSB

hsb(255, 10%, 62%)

CMYK

cmyk(8%, 10%, 0%, 38%)

Oklch

oklch(65.5% 0.024 297.2)

Traditional「Deep Indigo」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1F5AB

D0ADF5

Analogous

F5F4AD

D1F5AB

AEF5AD

Triadic

D1F5AB

ADD2F5

F5ADD2

Split-Comp.

D1F5AB

ADAEF5

F4ADF5

Tetradic

D1F5AB

ADF5F4

D0ADF5

F5ADAE

Contrast Matrix WCAG 2.1 Contrast

D1F5AB	AEE5A9	AFC7BC	ADA9D4	928E9E
—	1.2 Fail	1.5 Fail	1.8 Fail	2.6 Fail
1.2 Fail	—	1.2 Fail	1.6 Fail	2.2 Fail
1.5 Fail	1.2 Fail	—	1.2 Fail	1.8 Fail
1.8 Fail	1.6 Fail	1.2 Fail	—	1.4 Fail
2.6 Fail	2.2 Fail	1.8 Fail	1.4 Fail	—

White BG

1.2Fail

1.4Fail

1.8Fail

2.2Fail

3.2AA Large

Black BG

17.4AAA

14.6AAA

11.7AAA

9.4AAA

6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E1E1BD

C6C6B8

B9BABF

ABABCA

90909A

Deuteranopia

DFDCC1

C3BFBB

B8B6BF

ACACC7

919199

Tritanopia

D3CBCE

B1C3C6

B0C1C1

ADC1C0

929796

Achromatopsia

E2E2E2

CECECE

BFBFBF

AFAFAF

919191

Shades & Tints Shades & Tints

#D1F5AB

Dark

Light

#AEE5A9

Dark

Light

#AFC7BC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1f5ab;
  --color-2: #aee5a9;
  --color-3: #afc7bc;
  --color-4: #ada9d4;
  --color-5: #928e9e;
}

SCSS

$color-1: #d1f5ab;
$color-2: #aee5a9;
$color-3: #afc7bc;
$color-4: #ada9d4;
$color-5: #928e9e;

TAILWIND

colors: {
  'brand-1': '#d1f5ab',
  'brand-2': '#aee5a9',
  'brand-3': '#afc7bc',
  'brand-4': '#ada9d4',
  'brand-5': '#928e9e',
}

RGB Array

[209, 245, 171], [174, 229, 169], [175, 199, 188], [173, 169, 212], [146, 142, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D1F5AB, #AEE5A9, #AFC7BC, #ADA9D4, #928E9E 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: #d1f5ab; --color-2: #aee5a9; --color-3: #afc7bc; --color-4: #ada9d4; --color-5: #928e9e. 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