#6CAACA + #9CA2C0 + #CC99B6 + #FF9999 + #E6B17C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#6CAACA

Sky Blue · CornflowerBlue · Cobalt Blue

HEX

#6CAACA

RGB

rgb(108, 170, 202)

HSL

hsl(200, 47%, 61%)

HSB

hsb(200, 47%, 79%)

CMYK

cmyk(47%, 16%, 0%, 21%)

Oklch

oklch(70.8% 0.079 231.9)

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

#9CA2C0

Azure · DarkGray · Cobalt Blue

HEX

#9CA2C0

RGB

rgb(156, 162, 192)

HSL

hsl(230, 22%, 68%)

HSB

hsb(230, 19%, 75%)

CMYK

cmyk(19%, 16%, 0%, 25%)

Oklch

oklch(71.8% 0.044 276.3)

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

#CC99B6

Mauve · DarkGray · Rose Pink

HEX

#CC99B6

RGB

rgb(204, 153, 182)

HSL

hsl(326, 33%, 70%)

HSB

hsb(326, 25%, 80%)

CMYK

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

Oklch

oklch(74.0% 0.072 343.9)

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

#FF9999

Peach Pink · LightSalmon · Coral Red

HEX

#FF9999

RGB

rgb(255, 153, 153)

HSL

hsl(0, 100%, 80%)

HSB

hsb(0, 40%, 100%)

CMYK

cmyk(0%, 40%, 40%, 0%)

Oklch

oklch(78.8% 0.123 20.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#E6B17C

Ginger · BurlyWood · Warm Sun

HEX

#E6B17C

RGB

rgb(230, 177, 124)

HSL

hsl(30, 68%, 69%)

HSB

hsb(30, 46%, 90%)

CMYK

cmyk(0%, 23%, 46%, 10%)

Oklch

oklch(79.7% 0.093 65.8)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6CAACA

CA8C6D

Analogous

6DCABB

6CAACA

6D7CCA

Triadic

6CAACA

CA6DAB

ABCA6D

Split-Comp.

6CAACA

CA6D7C

CABB6D

Tetradic

6CAACA

BB6DCA

CA8C6D

7CCA6D

Contrast Matrix WCAG 2.1 Contrast

6CAACA	9CA2C0	CC99B6	FF9999	E6B17C
—	1.0 Fail	1.1 Fail	1.2 Fail	1.3 Fail
1.0 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.1 Fail	1.1 Fail	—	1.2 Fail	1.2 Fail
1.2 Fail	1.2 Fail	1.2 Fail	—	1.1 Fail
1.3 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

2.5Fail

2.4Fail

2.0Fail

1.9Fail

Black BG

8.2AAA

8.3AAA

8.8AAA

10.3AAA

10.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8787C2

9F9FB9

B6B5AF

D3D299

CFCF89

Deuteranopia

837FC0

9E9EB7

B9BDAD

D9E099

D2D68C

Tritanopia

6FBCBB

9CB3B2

C9A9A8

FA9999

E39395

Achromatopsia

9B9B9B

A4A4A4

ACACAC

B7B7B7

BBBBBB

Shades & Tints Shades & Tints

#6CAACA

Dark

Light

#9CA2C0

Dark

Light

#CC99B6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6caaca;
  --color-2: #9ca2c0;
  --color-3: #cc99b6;
  --color-4: #ff9999;
  --color-5: #e6b17c;
}

SCSS

$color-1: #6caaca;
$color-2: #9ca2c0;
$color-3: #cc99b6;
$color-4: #ff9999;
$color-5: #e6b17c;

TAILWIND

colors: {
  'brand-1': '#6caaca',
  'brand-2': '#9ca2c0',
  'brand-3': '#cc99b6',
  'brand-4': '#ff9999',
  'brand-5': '#e6b17c',
}

RGB Array

[108, 170, 202], [156, 162, 192], [204, 153, 182], [255, 153, 153], [230, 177, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6CAACA, #9CA2C0, #CC99B6, #FF9999, #E6B17C 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: #6caaca; --color-2: #9ca2c0; --color-3: #cc99b6; --color-4: #ff9999; --color-5: #e6b17c. 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