#99CCC5 + #A7ACDB + #B58BF0 + #AC81A5 + #A3775A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#99CCC5

Jade · LightSteelBlue · Lake Green

HEX

#99CCC5

RGB

rgb(153, 204, 197)

HSL

hsl(172, 33%, 70%)

HSB

hsb(172, 25%, 80%)

CMYK

cmyk(25%, 0%, 3%, 20%)

Oklch

oklch(80.8% 0.054 185.7)

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

#A7ACDB

Azure · LightSteelBlue · Cobalt Blue

HEX

#A7ACDB

RGB

rgb(167, 172, 219)

HSL

hsl(234, 42%, 76%)

HSB

hsb(234, 24%, 86%)

CMYK

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

Oklch

oklch(75.7% 0.068 279.9)

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

#B58BF0

Wisteria · Orchid · Lilac Purple

HEX

#B58BF0

RGB

rgb(181, 139, 240)

HSL

hsl(265, 77%, 74%)

HSB

hsb(265, 42%, 94%)

CMYK

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

Oklch

oklch(71.6% 0.148 302.0)

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

#AC81A5

Rose Purple · DarkGray · Violet

HEX

#AC81A5

RGB

rgb(172, 129, 165)

HSL

hsl(310, 21%, 59%)

HSB

hsb(310, 25%, 67%)

CMYK

cmyk(0%, 25%, 4%, 33%)

Oklch

oklch(65.7% 0.072 332.1)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#A3775A

Tangerine · Gray · Amber Brown

HEX

#A3775A

RGB

rgb(163, 119, 90)

HSL

hsl(24, 29%, 50%)

HSB

hsb(24, 45%, 64%)

CMYK

cmyk(0%, 27%, 45%, 36%)

Oklch

oklch(60.6% 0.069 54.4)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

99CCC5

CC99A0

Analogous

99CCAC

99CCC5

99B9CC

Triadic

99CCC5

C599CC

CCC599

Split-Comp.

99CCC5

CC99B9

CCAC99

Tetradic

99CCC5

AC99CC

CC99A0

B9CC99

Contrast Matrix WCAG 2.1 Contrast

99CCC5	A7ACDB	B58BF0	AC81A5	A3775A
—	1.2 Fail	1.5 Fail	1.8 Fail	2.2 Fail
1.2 Fail	—	1.2 Fail	1.5 Fail	1.8 Fail
1.5 Fail	1.2 Fail	—	1.2 Fail	1.5 Fail
1.8 Fail	1.5 Fail	1.2 Fail	—	1.2 Fail
2.2 Fail	1.8 Fail	1.5 Fail	1.2 Fail	—

White BG

1.8Fail

2.2Fail

2.7Fail

3.3AA Large

3.9AA Large

Black BG

11.8AAA

9.6AAA

7.9AAA

6.4AA

5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFB0C7

A9A9D0

A3A2D8

99999C

909061

Deuteranopia

ACA8C7

A9A9CD

A5A8D2

9C9F9A

939663

Tritanopia

9CC8C8

A7C7C5

B3C4C0

AA9594

A16768

Achromatopsia

BCBCBC

B0B0B0

A3A3A3

929292

818181

Shades & Tints Shades & Tints

#99CCC5

Dark

Light

#A7ACDB

Dark

Light

#B58BF0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #99ccc5;
  --color-2: #a7acdb;
  --color-3: #b58bf0;
  --color-4: #ac81a5;
  --color-5: #a3775a;
}

SCSS

$color-1: #99ccc5;
$color-2: #a7acdb;
$color-3: #b58bf0;
$color-4: #ac81a5;
$color-5: #a3775a;

TAILWIND

colors: {
  'brand-1': '#99ccc5',
  'brand-2': '#a7acdb',
  'brand-3': '#b58bf0',
  'brand-4': '#ac81a5',
  'brand-5': '#a3775a',
}

RGB Array

[153, 204, 197], [167, 172, 219], [181, 139, 240], [172, 129, 165], [163, 119, 90]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #99CCC5, #A7ACDB, #B58BF0, #AC81A5, #A3775A 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: #99ccc5; --color-2: #a7acdb; --color-3: #b58bf0; --color-4: #ac81a5; --color-5: #a3775a. 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