#9FB3C1 + #EA9AB6 + #23A4C4 + #B51955 + #535764 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9FB3C1

Sky Blue · DarkGray · Cobalt Blue

HEX

#9FB3C1

RGB

rgb(159, 179, 193)

HSL

hsl(205, 22%, 69%)

HSB

hsb(205, 18%, 76%)

CMYK

cmyk(18%, 7%, 0%, 24%)

Oklch

oklch(75.6% 0.030 238.4)

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

#EA9AB6

Rouge · LightPink · Cherry Blossom

HEX

#EA9AB6

RGB

rgb(234, 154, 182)

HSL

hsl(339, 66%, 76%)

HSB

hsb(339, 34%, 92%)

CMYK

cmyk(0%, 34%, 22%, 8%)

Oklch

oklch(77.4% 0.101 357.1)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#23A4C4

Lake Blue · LightSeaGreen · Mint Ice

HEX

#23A4C4

RGB

rgb(35, 164, 196)

HSL

hsl(192, 70%, 45%)

HSB

hsb(192, 82%, 77%)

CMYK

cmyk(82%, 16%, 0%, 23%)

Oklch

oklch(66.7% 0.114 219.7)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#B51955

Dark Violet · Crimson · Camellia

HEX

#B51955

RGB

rgb(181, 25, 85)

HSL

hsl(337, 76%, 40%)

HSB

hsb(337, 86%, 71%)

CMYK

cmyk(0%, 86%, 53%, 29%)

Oklch

oklch(50.6% 0.189 5.7)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#535764

Indigo · DimGray · Charcoal

HEX

#535764

RGB

rgb(83, 87, 100)

HSL

hsl(226, 9%, 36%)

HSB

hsb(226, 17%, 39%)

CMYK

cmyk(17%, 13%, 0%, 61%)

Oklch

oklch(45.8% 0.022 272.0)

Traditional「Indigo」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9FB3C1

C1AD9F

Analogous

9FC1BE

9FB3C1

9FA1C1

Triadic

9FB3C1

C19FB3

B3C19F

Split-Comp.

9FB3C1

C19FA1

C1BE9F

Tetradic

9FB3C1

BE9FC1

C1AD9F

A1C19F

Contrast Matrix WCAG 2.1 Contrast

9FB3C1	EA9AB6	23A4C4	B51955	535764
—	1.0 Fail	1.4 Fail	3.0 Fail	3.3 AA Large
1.0 Fail	—	1.4 Fail	3.0 AA Large	3.4 AA Large
1.4 Fail	1.4 Fail	—	2.2 Fail	2.5 Fail
3.0 Fail	3.0 AA Large	2.2 Fail	—	1.1 Fail
3.3 AA Large	3.4 AA Large	2.5 Fail	1.1 Fail	—

White BG

2.2Fail

2.1Fail

2.9Fail

6.5AA

7.2AAA

Black BG

9.7AAA

9.8AAA

7.2AAA

3.2AA Large

2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A8BE

C7C7AF

5B5CBC

717046

555561

Deuteranopia

A7A5BD

CCD2AE

534ABA

7B8643

555460

Tritanopia

A0BBBA

E6AAA9

29B6B5

AD3B39

535E5E

Achromatopsia

AFAFAF

B5B5B5

818181

4E4E4E

575757

Shades & Tints Shades & Tints

#9FB3C1

Dark

Light

#EA9AB6

Dark

Light

#23A4C4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9fb3c1;
  --color-2: #ea9ab6;
  --color-3: #23a4c4;
  --color-4: #b51955;
  --color-5: #535764;
}

SCSS

$color-1: #9fb3c1;
$color-2: #ea9ab6;
$color-3: #23a4c4;
$color-4: #b51955;
$color-5: #535764;

TAILWIND

colors: {
  'brand-1': '#9fb3c1',
  'brand-2': '#ea9ab6',
  'brand-3': '#23a4c4',
  'brand-4': '#b51955',
  'brand-5': '#535764',
}

RGB Array

[159, 179, 193], [234, 154, 182], [35, 164, 196], [181, 25, 85], [83, 87, 100]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9FB3C1, #EA9AB6, #23A4C4, #B51955, #535764 is ideal for: corporate websites, product showcases, portfolios. 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: #9fb3c1; --color-2: #ea9ab6; --color-3: #23a4c4; --color-4: #b51955; --color-5: #535764. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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