#DBE7A9 + #BFDBB3 + #96C0B4 + #818BA4 + #835A90 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DBE7A9

Willow Green · Wheat · Apple Green

HEX

#DBE7A9

RGB

rgb(219, 231, 169)

HSL

hsl(72, 56%, 78%)

HSB

hsb(72, 27%, 91%)

CMYK

cmyk(5%, 0%, 27%, 9%)

Oklch

oklch(90.4% 0.082 117.0)

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

#BFDBB3

Celadon · Silver · Apple Green

HEX

#BFDBB3

RGB

rgb(191, 219, 179)

HSL

hsl(102, 36%, 78%)

HSB

hsb(102, 18%, 86%)

CMYK

cmyk(13%, 0%, 18%, 14%)

Oklch

oklch(86.0% 0.062 136.3)

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

#96C0B4

Jade · DarkGray · Lake Green

HEX

#96C0B4

RGB

rgb(150, 192, 180)

HSL

hsl(163, 25%, 67%)

HSB

hsb(163, 22%, 75%)

CMYK

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

Oklch

oklch(77.4% 0.048 175.6)

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

#818BA4

Azure · LightSlateGray · Navy Blue

HEX

#818BA4

RGB

rgb(129, 139, 164)

HSL

hsl(223, 16%, 57%)

HSB

hsb(223, 21%, 64%)

CMYK

cmyk(21%, 15%, 0%, 36%)

Oklch

oklch(63.7% 0.039 268.1)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#835A90

Dark Plum · Gray · Violet

HEX

#835A90

RGB

rgb(131, 90, 144)

HSL

hsl(286, 23%, 46%)

HSB

hsb(286, 37%, 56%)

CMYK

cmyk(9%, 37%, 0%, 44%)

Oklch

oklch(53.2% 0.095 317.8)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DBE7A9

B4A7E6

Analogous

E6D3A7

DBE7A9

BAE6A7

Triadic

DBE7A9

A7DAE6

E6A7DA

Split-Comp.

DBE7A9

A7BAE6

D3A7E6

Tetradic

DBE7A9

A7E6D3

B4A7E6

E6A7BA

Contrast Matrix WCAG 2.1 Contrast

DBE7A9	BFDBB3	96C0B4	818BA4	835A90
—	1.1 Fail	1.5 Fail	2.6 Fail	4.2 AA Large
1.1 Fail	—	1.3 Fail	2.3 Fail	3.7 AA Large
1.5 Fail	1.3 Fail	—	1.7 Fail	2.7 Fail
2.6 Fail	2.3 Fail	1.7 Fail	—	1.6 Fail
4.2 AA Large	3.7 AA Large	2.7 Fail	1.6 Fail	—

White BG

1.3Fail

1.5Fail

2.0Fail

3.4AA Large

5.5AA

Black BG

16.0AAA

14.0AAA

10.5AAA

6.2AA

3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E0B8

CBCBBD

A8A9B7

85859E

717183

Deuteranopia

E0DFBC

CAC7BF

A6A3B8

85849D

747780

Tritanopia

DCC4C6

C0C4C6

98B9BA

829998

817976

Achromatopsia

DCDCDC

CECECE

B2B2B2

8B8B8B

6C6C6C

Shades & Tints Shades & Tints

#DBE7A9

Dark

Light

#BFDBB3

Dark

Light

#96C0B4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dbe7a9;
  --color-2: #bfdbb3;
  --color-3: #96c0b4;
  --color-4: #818ba4;
  --color-5: #835a90;
}

SCSS

$color-1: #dbe7a9;
$color-2: #bfdbb3;
$color-3: #96c0b4;
$color-4: #818ba4;
$color-5: #835a90;

TAILWIND

colors: {
  'brand-1': '#dbe7a9',
  'brand-2': '#bfdbb3',
  'brand-3': '#96c0b4',
  'brand-4': '#818ba4',
  'brand-5': '#835a90',
}

RGB Array

[219, 231, 169], [191, 219, 179], [150, 192, 180], [129, 139, 164], [131, 90, 144]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DBE7A9, #BFDBB3, #96C0B4, #818BA4, #835A90 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: #dbe7a9; --color-2: #bfdbb3; --color-3: #96c0b4; --color-4: #818ba4; --color-5: #835a90. 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