#DBEDEF + #B5DECF + #BBC793 + #D19B97 + #B5678D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DBEDEF

Sky Blue · Lavender · Glacier Blue

HEX

#DBEDEF

RGB

rgb(219, 237, 239)

HSL

hsl(186, 38%, 90%)

HSB

hsb(186, 8%, 94%)

CMYK

cmyk(8%, 1%, 0%, 6%)

Oklch

oklch(93.3% 0.019 204.8)

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

#B5DECF

Jade · LightBlue · Apple Green

HEX

#B5DECF

RGB

rgb(181, 222, 207)

HSL

hsl(158, 38%, 79%)

HSB

hsb(158, 18%, 87%)

CMYK

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

Oklch

oklch(86.7% 0.048 170.9)

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

#BBC793

Willow Green · Tan · Apple Green

HEX

#BBC793

RGB

rgb(187, 199, 147)

HSL

hsl(74, 32%, 68%)

HSB

hsb(74, 26%, 78%)

CMYK

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

Oklch

oklch(80.7% 0.071 118.6)

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

#D19B97

Peach Pink · Tan · Coral Red

HEX

#D19B97

RGB

rgb(209, 155, 151)

HSL

hsl(4, 39%, 71%)

HSB

hsb(4, 28%, 82%)

CMYK

cmyk(0%, 26%, 28%, 18%)

Oklch

oklch(74.0% 0.065 23.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#B5678D

Dark Violet · Gray · Rose Pink

HEX

#B5678D

RGB

rgb(181, 103, 141)

HSL

hsl(331, 35%, 56%)

HSB

hsb(331, 43%, 71%)

CMYK

cmyk(0%, 43%, 22%, 29%)

Oklch

oklch(61.3% 0.110 350.2)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DBEDEF

EFDEDC

Analogous

DCEFE7

DBEDEF

DCE4EF

Triadic

DBEDEF

EFDCED

EDEFDC

Split-Comp.

DBEDEF

EFDCE4

EFE7DC

Tetradic

DBEDEF

E7DCEF

EFDEDC

E4EFDC

Contrast Matrix WCAG 2.1 Contrast

DBEDEF	B5DECF	BBC793	D19B97	B5678D
—	1.2 Fail	1.5 Fail	2.0 Fail	3.3 AA Large
1.2 Fail	—	1.2 Fail	1.6 Fail	2.7 Fail
1.5 Fail	1.2 Fail	—	1.3 Fail	2.2 Fail
2.0 Fail	1.6 Fail	1.3 Fail	—	1.7 Fail
3.3 AA Large	2.7 Fail	2.2 Fail	1.7 Fail	—

White BG

1.2Fail

1.5Fail

1.8Fail

2.4Fail

4.0AA Large

Black BG

17.4AAA

14.3AAA

11.7AAA

8.8AAA

5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E3EF

C7C7D3

C0C0A0

BAB998

939384

Deuteranopia

E2E0EE

C4C1D3

C0BFA3

BDC198

989E82

Tritanopia

DCEEEE

B7D5D6

BCAAAC

CE9999

B17D7B

Achromatopsia

E8E8E8

D0D0D0

BDBDBD

ABABAB

838383

Shades & Tints Shades & Tints

#DBEDEF

Dark

Light

#B5DECF

Dark

Light

#BBC793

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dbedef;
  --color-2: #b5decf;
  --color-3: #bbc793;
  --color-4: #d19b97;
  --color-5: #b5678d;
}

SCSS

$color-1: #dbedef;
$color-2: #b5decf;
$color-3: #bbc793;
$color-4: #d19b97;
$color-5: #b5678d;

TAILWIND

colors: {
  'brand-1': '#dbedef',
  'brand-2': '#b5decf',
  'brand-3': '#bbc793',
  'brand-4': '#d19b97',
  'brand-5': '#b5678d',
}

RGB Array

[219, 237, 239], [181, 222, 207], [187, 199, 147], [209, 155, 151], [181, 103, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DBEDEF, #B5DECF, #BBC793, #D19B97, #B5678D 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: #dbedef; --color-2: #b5decf; --color-3: #bbc793; --color-4: #d19b97; --color-5: #b5678d. 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