#98C5DC + #B2A5C8 + #CC85B3 + #E5659F + #FF458A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#98C5DC

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#98C5DC

RGB

rgb(152, 197, 220)

HSL

hsl(200, 49%, 73%)

HSB

hsb(200, 31%, 86%)

CMYK

cmyk(31%, 10%, 0%, 14%)

Oklch

oklch(79.9% 0.058 230.5)

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

#B2A5C8

Wisteria · Silver · Lilac Purple

HEX

#B2A5C8

RGB

rgb(178, 165, 200)

HSL

hsl(262, 24%, 72%)

HSB

hsb(262, 17%, 78%)

CMYK

cmyk(11%, 17%, 0%, 22%)

Oklch

oklch(74.4% 0.052 302.1)

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

#CC85B3

Mauve · Orchid · Rose Pink

HEX

#CC85B3

RGB

rgb(204, 133, 179)

HSL

hsl(321, 41%, 66%)

HSB

hsb(321, 35%, 80%)

CMYK

cmyk(0%, 35%, 12%, 20%)

Oklch

oklch(70.4% 0.105 341.0)

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

#E5659F

Rouge · LightCoral · Rose Pink

HEX

#E5659F

RGB

rgb(229, 101, 159)

HSL

hsl(333, 71%, 65%)

HSB

hsb(333, 56%, 90%)

CMYK

cmyk(0%, 56%, 31%, 10%)

Oklch

oklch(68.0% 0.170 354.2)

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

#FF458A

Rouge · DeepPink · Rose Pink

HEX

#FF458A

RGB

rgb(255, 69, 138)

HSL

hsl(338, 100%, 64%)

HSB

hsb(338, 73%, 100%)

CMYK

cmyk(0%, 73%, 46%, 0%)

Oklch

oklch(67.9% 0.225 3.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

98C5DC

DCAF98

Analogous

98DCD1

98C5DC

98A4DC

Triadic

98C5DC

DC98C5

C5DC98

Split-Comp.

98C5DC

DC98A4

DCD198

Tetradic

98C5DC

D198DC

DCAF98

A4DC98

Contrast Matrix WCAG 2.1 Contrast

98C5DC	B2A5C8	CC85B3	E5659F	FF458A
—	1.2 Fail	1.5 Fail	1.7 Fail	1.8 Fail
1.2 Fail	—	1.2 Fail	1.4 Fail	1.4 Fail
1.5 Fail	1.2 Fail	—	1.1 Fail	1.2 Fail
1.7 Fail	1.4 Fail	1.1 Fail	—	1.0 Fail
1.8 Fail	1.4 Fail	1.2 Fail	1.0 Fail	—

White BG

1.8Fail

2.3Fail

2.8Fail

3.1AA Large

3.2AA Large

Black BG

11.4AAA

9.1AAA

7.6AAA

6.7AA

6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABACD6

ACACC0

ADADA8

AEAC91

AEAD79

Deuteranopia

A9A6D5

ADAEBE

B1B7A5

B5BF8E

B9C775

Tritanopia

9AD2D1

B1B9B7

C89F9D

DF8683

F66C69

Achromatopsia

BABABA

ADADAD

9F9F9F

929292

848484

Shades & Tints Shades & Tints

#98C5DC

Dark

Light

#B2A5C8

Dark

Light

#CC85B3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #98c5dc;
  --color-2: #b2a5c8;
  --color-3: #cc85b3;
  --color-4: #e5659f;
  --color-5: #ff458a;
}

SCSS

$color-1: #98c5dc;
$color-2: #b2a5c8;
$color-3: #cc85b3;
$color-4: #e5659f;
$color-5: #ff458a;

TAILWIND

colors: {
  'brand-1': '#98c5dc',
  'brand-2': '#b2a5c8',
  'brand-3': '#cc85b3',
  'brand-4': '#e5659f',
  'brand-5': '#ff458a',
}

RGB Array

[152, 197, 220], [178, 165, 200], [204, 133, 179], [229, 101, 159], [255, 69, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #98C5DC, #B2A5C8, #CC85B3, #E5659F, #FF458A 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: #98c5dc; --color-2: #b2a5c8; --color-3: #cc85b3; --color-4: #e5659f; --color-5: #ff458a. 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