#CC89A2 + #A99FAE + #85B7BA + #98E0D1 + #F6FBEC · spring - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CC89A2

Rouge · DarkGray · Rose Pink

HEX

#CC89A2

RGB

rgb(204, 137, 162)

HSL

hsl(338, 40%, 67%)

HSB

hsb(338, 33%, 80%)

CMYK

cmyk(0%, 33%, 21%, 20%)

Oklch

oklch(70.5% 0.088 355.5)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#A99FAE

Lilac · DarkGray · Silver Sand

HEX

#A99FAE

RGB

rgb(169, 159, 174)

HSL

hsl(280, 8%, 65%)

HSB

hsb(280, 9%, 68%)

CMYK

cmyk(3%, 9%, 0%, 32%)

Oklch

oklch(71.6% 0.024 314.7)

Traditional「Lilac」· Paint「Silver Sand」· Creative Urban Concrete

#85B7BA

Sky Blue · MediumAquaMarine · Lake Green

HEX

#85B7BA

RGB

rgb(133, 183, 186)

HSL

hsl(183, 28%, 63%)

HSB

hsb(183, 28%, 73%)

CMYK

cmyk(28%, 2%, 0%, 27%)

Oklch

oklch(74.5% 0.053 200.7)

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

#98E0D1

Jade · LightBlue · Lake Green

HEX

#98E0D1

RGB

rgb(152, 224, 209)

HSL

hsl(167, 54%, 74%)

HSB

hsb(167, 32%, 88%)

CMYK

cmyk(32%, 0%, 7%, 12%)

Oklch

oklch(85.5% 0.075 179.9)

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

#F6FBEC

Willow Green · SeaShell · Mint Green

HEX

#F6FBEC

RGB

rgb(246, 251, 236)

HSL

hsl(80, 65%, 95%)

HSB

hsb(80, 6%, 98%)

CMYK

cmyk(2%, 0%, 6%, 2%)

Oklch

oklch(98.0% 0.020 121.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC89A2

89CDB4

Analogous

CD89C4

CC89A2

CD9289

Triadic

CC89A2

A2CD89

89A2CD

Split-Comp.

CC89A2

89CD92

89C4CD

Tetradic

CC89A2

C4CD89

89CDB4

9289CD

Contrast Matrix WCAG 2.1 Contrast

CC89A2	A99FAE	85B7BA	98E0D1	F6FBEC
—	1.1 Fail	1.2 Fail	1.8 Fail	2.6 Fail
1.1 Fail	—	1.1 Fail	1.7 Fail	2.4 Fail
1.2 Fail	1.1 Fail	—	1.5 Fail	2.1 Fail
1.8 Fail	1.7 Fail	1.5 Fail	—	1.4 Fail
2.6 Fail	2.4 Fail	2.1 Fail	1.4 Fail	—

White BG

2.7Fail

2.5Fail

2.2Fail

1.5Fail

1.1Fail

Black BG

7.7AAA

8.3AAA

9.5AAA

13.9AAA

19.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAE9C

A5A5AA

9B9BB9

B7B8D5

F8F8F0

Deuteranopia

B3B89B

A5A6AA

9894B9

B3AED6

F8F8F1

Tritanopia

C99796

A8A8A7

88B9B9

9CD7D8

F6F2F3

Achromatopsia

A0A0A0

A4A4A4

A8A8A8

C9C9C9

F8F8F8

Shades & Tints Shades & Tints

#CC89A2

Dark

Light

#A99FAE

Dark

Light

#85B7BA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc89a2;
  --color-2: #a99fae;
  --color-3: #85b7ba;
  --color-4: #98e0d1;
  --color-5: #f6fbec;
}

SCSS

$color-1: #cc89a2;
$color-2: #a99fae;
$color-3: #85b7ba;
$color-4: #98e0d1;
$color-5: #f6fbec;

TAILWIND

colors: {
  'brand-1': '#cc89a2',
  'brand-2': '#a99fae',
  'brand-3': '#85b7ba',
  'brand-4': '#98e0d1',
  'brand-5': '#f6fbec',
}

RGB Array

[204, 137, 162], [169, 159, 174], [133, 183, 186], [152, 224, 209], [246, 251, 236]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #CC89A2, #A99FAE, #85B7BA, #98E0D1, #F6FBEC 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: #cc89a2; --color-2: #a99fae; --color-3: #85b7ba; --color-4: #98e0d1; --color-5: #f6fbec. 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 spring-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