#A474C2 + #B487C8 + #A79DC2 + #9AB3BB + #77D4CD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A474C2

Lilac · MediumOrchid · Lilac Purple

HEX

#A474C2

RGB

rgb(164, 116, 194)

HSL

hsl(277, 39%, 61%)

HSB

hsb(277, 40%, 76%)

CMYK

cmyk(15%, 40%, 0%, 24%)

Oklch

oklch(63.7% 0.124 311.5)

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

#B487C8

Lilac · Orchid · Lilac Purple

HEX

#B487C8

RGB

rgb(180, 135, 200)

HSL

hsl(282, 37%, 66%)

HSB

hsb(282, 32%, 78%)

CMYK

cmyk(10%, 32%, 0%, 22%)

Oklch

oklch(69.0% 0.105 315.1)

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

#A79DC2

Wisteria · DarkGray · Cobalt Blue

HEX

#A79DC2

RGB

rgb(167, 157, 194)

HSL

hsl(256, 23%, 69%)

HSB

hsb(256, 19%, 76%)

CMYK

cmyk(14%, 19%, 0%, 24%)

Oklch

oklch(71.7% 0.054 297.4)

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

#9AB3BB

Sky Blue · DarkGray · Lake Green

HEX

#9AB3BB

RGB

rgb(154, 179, 187)

HSL

hsl(195, 20%, 67%)

HSB

hsb(195, 18%, 73%)

CMYK

cmyk(18%, 4%, 0%, 27%)

Oklch

oklch(75.0% 0.030 219.1)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#77D4CD

Jade · SkyBlue · Lake Green

HEX

#77D4CD

RGB

rgb(119, 212, 205)

HSL

hsl(175, 52%, 65%)

HSB

hsb(175, 44%, 83%)

CMYK

cmyk(44%, 0%, 3%, 17%)

Oklch

oklch(81.0% 0.090 189.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A474C2

93C275

Analogous

7E75C2

A474C2

C275B9

Triadic

A474C2

C2A575

75C2A5

Split-Comp.

A474C2

B9C275

75C27E

Tetradic

A474C2

C27E75

93C275

75B9C2

Contrast Matrix WCAG 2.1 Contrast

A474C2	B487C8	A79DC2	9AB3BB	77D4CD
—	1.2 Fail	1.4 Fail	1.6 Fail	2.1 Fail
1.2 Fail	—	1.1 Fail	1.3 Fail	1.7 Fail
1.4 Fail	1.1 Fail	—	1.2 Fail	1.5 Fail
1.6 Fail	1.3 Fail	1.2 Fail	—	1.3 Fail
2.1 Fail	1.7 Fail	1.5 Fail	1.3 Fail	—

White BG

3.6AA Large

2.9Fail

2.5Fail

2.2Fail

1.7Fail

Black BG

5.9AA

7.2AAA

8.2AAA

9.5AAA

12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F8FAF

A1A0B8

A3A3B9

A5A5B9

9FA0CF

Deuteranopia

9296AB

A3A7B5

A3A4B7

A3A2B9

9A93CF

Tritanopia

A2A09D

B2ACA9

A7B2B0

9BB8B7

7CD0D0

Achromatopsia

8B8B8B

9C9C9C

A4A4A4

ACACAC

B7B7B7

Shades & Tints Shades & Tints

#A474C2

Dark

Light

#B487C8

Dark

Light

#A79DC2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a474c2;
  --color-2: #b487c8;
  --color-3: #a79dc2;
  --color-4: #9ab3bb;
  --color-5: #77d4cd;
}

SCSS

$color-1: #a474c2;
$color-2: #b487c8;
$color-3: #a79dc2;
$color-4: #9ab3bb;
$color-5: #77d4cd;

TAILWIND

colors: {
  'brand-1': '#a474c2',
  'brand-2': '#b487c8',
  'brand-3': '#a79dc2',
  'brand-4': '#9ab3bb',
  'brand-5': '#77d4cd',
}

RGB Array

[164, 116, 194], [180, 135, 200], [167, 157, 194], [154, 179, 187], [119, 212, 205]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A474C2, #B487C8, #A79DC2, #9AB3BB, #77D4CD 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: #a474c2; --color-2: #b487c8; --color-3: #a79dc2; --color-4: #9ab3bb; --color-5: #77d4cd. 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