#978578 + #D189F5 + #C1ABD8 + #B7C0ED + #C1E3E7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#978578

Tangerine · Gray · Warm Sun

HEX

#978578

RGB

rgb(151, 133, 120)

HSL

hsl(25, 13%, 53%)

HSB

hsb(25, 21%, 59%)

CMYK

cmyk(0%, 12%, 21%, 41%)

Oklch

oklch(62.9% 0.029 58.0)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#D189F5

Lilac · Violet · Lilac Purple

HEX

#D189F5

RGB

rgb(209, 137, 245)

HSL

hsl(280, 84%, 75%)

HSB

hsb(280, 44%, 96%)

CMYK

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

Oklch

oklch(74.3% 0.167 313.6)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#C1ABD8

Wisteria · LightSteelBlue · Lilac Purple

HEX

#C1ABD8

RGB

rgb(193, 171, 216)

HSL

hsl(269, 37%, 76%)

HSB

hsb(269, 21%, 85%)

CMYK

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

Oklch

oklch(77.5% 0.067 307.0)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

#B7C0ED

Azure · LightSteelBlue · Sky Blue

HEX

#B7C0ED

RGB

rgb(183, 192, 237)

HSL

hsl(230, 60%, 82%)

HSB

hsb(230, 23%, 93%)

CMYK

cmyk(23%, 19%, 0%, 7%)

Oklch

oklch(81.6% 0.064 276.0)

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

#C1E3E7

Sky Blue · LightBlue · Glacier Blue

HEX

#C1E3E7

RGB

rgb(193, 227, 231)

HSL

hsl(186, 44%, 83%)

HSB

hsb(186, 16%, 91%)

CMYK

cmyk(16%, 2%, 0%, 9%)

Oklch

oklch(89.3% 0.036 205.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

978578

788A97

Analogous

97787A

978578

979478

Triadic

978578

789785

857897

Split-Comp.

978578

789794

787A97

Tetradic

978578

7A9778

788A97

947897

Contrast Matrix WCAG 2.1 Contrast

978578	D189F5	C1ABD8	B7C0ED	C1E3E7
—	1.4 Fail	1.7 Fail	2.0 Fail	2.6 Fail
1.4 Fail	—	1.2 Fail	1.4 Fail	1.8 Fail
1.7 Fail	1.2 Fail	—	1.2 Fail	1.5 Fail
2.0 Fail	1.4 Fail	1.2 Fail	—	1.3 Fail
2.6 Fail	1.8 Fail	1.5 Fail	1.3 Fail	—

White BG

3.5AA Large

2.4Fail

2.1Fail

1.8Fail

1.4Fail

Black BG

5.9AA

8.6AAA

10.1AAA

11.8AAA

15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F8F7B

B2B1DB

B7B7CD

BBBBE2

D0D0E6

Deuteranopia

90927C

B6BBD5

B9BACB

BABADF

CECBE6

Tritanopia

967E7E

CDC6C2

C0C5C3

B7DAD8

C3E5E5

Achromatopsia

898989

ABABAB

B7B7B7

C2C2C2

D9D9D9

Shades & Tints Shades & Tints

#978578

Dark

Light

#D189F5

Dark

Light

#C1ABD8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #978578;
  --color-2: #d189f5;
  --color-3: #c1abd8;
  --color-4: #b7c0ed;
  --color-5: #c1e3e7;
}

SCSS

$color-1: #978578;
$color-2: #d189f5;
$color-3: #c1abd8;
$color-4: #b7c0ed;
$color-5: #c1e3e7;

TAILWIND

colors: {
  'brand-1': '#978578',
  'brand-2': '#d189f5',
  'brand-3': '#c1abd8',
  'brand-4': '#b7c0ed',
  'brand-5': '#c1e3e7',
}

RGB Array

[151, 133, 120], [209, 137, 245], [193, 171, 216], [183, 192, 237], [193, 227, 231]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #978578, #D189F5, #C1ABD8, #B7C0ED, #C1E3E7 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: #978578; --color-2: #d189f5; --color-3: #c1abd8; --color-4: #b7c0ed; --color-5: #c1e3e7. 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