#CC9194 + #F7A5A7 + #F8C0C0 + #89B2BB + #6C9299 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CC9194

Peach Pink · Tan · Coral Red

HEX

#CC9194

RGB

rgb(204, 145, 148)

HSL

hsl(357, 37%, 68%)

HSB

hsb(357, 29%, 80%)

CMYK

cmyk(0%, 29%, 27%, 20%)

Oklch

oklch(71.5% 0.072 15.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#F7A5A7

Peach Pink · LightPink · Cherry Blossom

HEX

#F7A5A7

RGB

rgb(247, 165, 167)

HSL

hsl(359, 84%, 81%)

HSB

hsb(359, 33%, 97%)

CMYK

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

Oklch

oklch(80.3% 0.097 17.9)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#F8C0C0

Peach Pink · LightPink · Cherry Blossom

HEX

#F8C0C0

RGB

rgb(248, 192, 192)

HSL

hsl(0, 80%, 86%)

HSB

hsb(0, 23%, 97%)

CMYK

cmyk(0%, 23%, 23%, 3%)

Oklch

oklch(85.8% 0.065 18.5)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#89B2BB

Sky Blue · DarkGray · Lake Green

HEX

#89B2BB

RGB

rgb(137, 178, 187)

HSL

hsl(191, 27%, 64%)

HSB

hsb(191, 27%, 73%)

CMYK

cmyk(27%, 5%, 0%, 27%)

Oklch

oklch(73.7% 0.046 212.6)

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

#6C9299

Slate Blue · LightSlateGray · Lake Green

HEX

#6C9299

RGB

rgb(108, 146, 153)

HSL

hsl(189, 18%, 51%)

HSB

hsb(189, 29%, 60%)

CMYK

cmyk(29%, 5%, 0%, 40%)

Oklch

oklch(63.4% 0.043 210.1)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC9194

8FCCC9

Analogous

CC8FB0

CC9194

CCAA8F

Triadic

CC9194

92CC8F

8F92CC

Split-Comp.

CC9194

8FCCAA

8FB0CC

Tetradic

CC9194

B0CC8F

8FCCC9

AA8FCC

Contrast Matrix WCAG 2.1 Contrast

CC9194	F7A5A7	F8C0C0	89B2BB	6C9299
—	1.4 Fail	1.7 Fail	1.1 Fail	1.3 Fail
1.4 Fail	—	1.2 Fail	1.2 Fail	1.8 Fail
1.7 Fail	1.2 Fail	—	1.5 Fail	2.1 Fail
1.1 Fail	1.2 Fail	1.5 Fail	—	1.5 Fail
1.3 Fail	1.8 Fail	2.1 Fail	1.5 Fail	—

White BG

2.6Fail

1.9Fail

1.6Fail

2.3Fail

3.4AA Large

Black BG

8.0AAA

10.9AAA

13.3AAA

9.1AAA

6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B293

D3D3A7

E0DFC0

9B9BB9

7C7D97

Deuteranopia

B6BA93

D8DEA6

E3E7C0

9895B8

7A7797

Tritanopia

C99393

F3A6A6

F5C0C0

8BB7B7

6E9696

Achromatopsia

A3A3A3

BEBEBE

D1D1D1

A7A7A7

878787

Shades & Tints Shades & Tints

#CC9194

Dark

Light

#F7A5A7

Dark

Light

#F8C0C0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc9194;
  --color-2: #f7a5a7;
  --color-3: #f8c0c0;
  --color-4: #89b2bb;
  --color-5: #6c9299;
}

SCSS

$color-1: #cc9194;
$color-2: #f7a5a7;
$color-3: #f8c0c0;
$color-4: #89b2bb;
$color-5: #6c9299;

TAILWIND

colors: {
  'brand-1': '#cc9194',
  'brand-2': '#f7a5a7',
  'brand-3': '#f8c0c0',
  'brand-4': '#89b2bb',
  'brand-5': '#6c9299',
}

RGB Array

[204, 145, 148], [247, 165, 167], [248, 192, 192], [137, 178, 187], [108, 146, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CC9194, #F7A5A7, #F8C0C0, #89B2BB, #6C9299 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: #cc9194; --color-2: #f7a5a7; --color-3: #f8c0c0; --color-4: #89b2bb; --color-5: #6c9299. 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