#51B1B0 + #9D9EBD + #C4B49D + #EBC9AE + #DBD9B3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#51B1B0

Mineral Blue · CadetBlue · Lake Green

HEX

#51B1B0

RGB

rgb(81, 177, 176)

HSL

hsl(179, 38%, 51%)

HSB

hsb(179, 54%, 69%)

CMYK

cmyk(54%, 0%, 1%, 31%)

Oklch

oklch(70.3% 0.090 194.4)

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

#9D9EBD

Azure · DarkGray · Cobalt Blue

HEX

#9D9EBD

RGB

rgb(157, 158, 189)

HSL

hsl(238, 20%, 68%)

HSB

hsb(238, 17%, 74%)

CMYK

cmyk(17%, 16%, 0%, 26%)

Oklch

oklch(70.9% 0.045 283.7)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#C4B49D

Ginger · Tan · Warm Sun

HEX

#C4B49D

RGB

rgb(196, 180, 157)

HSL

hsl(35, 25%, 69%)

HSB

hsb(35, 20%, 77%)

CMYK

cmyk(0%, 8%, 20%, 23%)

Oklch

oklch(77.7% 0.037 77.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#EBC9AE

Apricot · Wheat · Peach Orange

HEX

#EBC9AE

RGB

rgb(235, 201, 174)

HSL

hsl(27, 60%, 80%)

HSB

hsb(27, 26%, 92%)

CMYK

cmyk(0%, 14%, 26%, 8%)

Oklch

oklch(85.8% 0.053 60.5)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#DBD9B3

Fresh Green · Wheat · Lemon Cream

HEX

#DBD9B3

RGB

rgb(219, 217, 179)

HSL

hsl(57, 36%, 78%)

HSB

hsb(57, 18%, 86%)

CMYK

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

Oklch

oklch(87.7% 0.050 104.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

51B1B0

B25354

Analogous

53B280

51B1B0

5384B2

Triadic

51B1B0

B053B2

B2B053

Split-Comp.

51B1B0

B25384

B28053

Tetradic

51B1B0

8053B2

B25354

84B253

Contrast Matrix WCAG 2.1 Contrast

51B1B0	9D9EBD	C4B49D	EBC9AE	DBD9B3
—	1.0 Fail	1.3 Fail	1.6 Fail	1.8 Fail
1.0 Fail	—	1.3 Fail	1.7 Fail	1.8 Fail
1.3 Fail	1.3 Fail	—	1.3 Fail	1.4 Fail
1.6 Fail	1.7 Fail	1.3 Fail	—	1.1 Fail
1.8 Fail	1.8 Fail	1.4 Fail	1.1 Fail	—

White BG

2.5Fail

2.6Fail

2.0Fail

1.6Fail

1.4Fail

Black BG

8.3AAA

8.1AAA

10.4AAA

13.5AAA

14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7B7BB0

9D9DB5

BDBDA3

DCDCB5

DADABC

Deuteranopia

756EB0

9D9DB4

BEBFA4

DEE1B6

DADABE

Tritanopia

56B0B0

9DB0AE

C3A7A8

E9BABB

DBC3C5

Achromatopsia

949494

A1A1A1

B6B6B6

D0D0D0

D5D5D5

Shades & Tints Shades & Tints

#51B1B0

Dark

Light

#9D9EBD

Dark

Light

#C4B49D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #51b1b0;
  --color-2: #9d9ebd;
  --color-3: #c4b49d;
  --color-4: #ebc9ae;
  --color-5: #dbd9b3;
}

SCSS

$color-1: #51b1b0;
$color-2: #9d9ebd;
$color-3: #c4b49d;
$color-4: #ebc9ae;
$color-5: #dbd9b3;

TAILWIND

colors: {
  'brand-1': '#51b1b0',
  'brand-2': '#9d9ebd',
  'brand-3': '#c4b49d',
  'brand-4': '#ebc9ae',
  'brand-5': '#dbd9b3',
}

RGB Array

[81, 177, 176], [157, 158, 189], [196, 180, 157], [235, 201, 174], [219, 217, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #51B1B0, #9D9EBD, #C4B49D, #EBC9AE, #DBD9B3 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: #51b1b0; --color-2: #9d9ebd; --color-3: #c4b49d; --color-4: #ebc9ae; --color-5: #dbd9b3. 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