#9BBA9D + #3C9A99 + #435182 + #65177C + #C45486 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9BBA9D

Celadon · DarkSeaGreen · Apple Green

HEX

#9BBA9D

RGB

rgb(155, 186, 157)

HSL

hsl(124, 18%, 67%)

HSB

hsb(124, 17%, 73%)

CMYK

cmyk(17%, 0%, 16%, 27%)

Oklch

oklch(75.8% 0.053 146.8)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#3C9A99

Mineral Blue · CadetBlue · Mint Ice

HEX

#3C9A99

RGB

rgb(60, 154, 153)

HSL

hsl(179, 44%, 42%)

HSB

hsb(179, 61%, 60%)

CMYK

cmyk(61%, 0%, 1%, 40%)

Oklch

oklch(63.1% 0.087 194.2)

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

#435182

Indigo · DarkSlateBlue · Prussian Blue

HEX

#435182

RGB

rgb(67, 81, 130)

HSL

hsl(227, 32%, 39%)

HSB

hsb(227, 48%, 51%)

CMYK

cmyk(48%, 38%, 0%, 49%)

Oklch

oklch(44.6% 0.083 270.7)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#65177C

Royal Purple · Purple · Eggplant

HEX

#65177C

RGB

rgb(101, 23, 124)

HSL

hsl(286, 69%, 29%)

HSB

hsb(286, 81%, 49%)

CMYK

cmyk(19%, 81%, 0%, 51%)

Oklch

oklch(38.6% 0.165 317.0)

Traditional「Royal Purple」· Paint「Eggplant」· Creative Blush Sunrise

#C45486

Dark Violet · LightCoral · Rose Pink

HEX

#C45486

RGB

rgb(196, 84, 134)

HSL

hsl(333, 49%, 55%)

HSB

hsb(333, 57%, 77%)

CMYK

cmyk(0%, 57%, 32%, 23%)

Oklch

oklch(60.3% 0.152 354.7)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9BBA9D

BA9CB8

Analogous

A9BA9C

9BBA9D

9CBAAD

Triadic

9BBA9D

9E9CBA

BA9E9C

Split-Comp.

9BBA9D

AD9CBA

BA9CA9

Tetradic

9BBA9D

9CA9BA

BA9CB8

BAAD9C

Contrast Matrix WCAG 2.1 Contrast

9BBA9D	3C9A99	435182	65177C	C45486
—	1.6 Fail	3.6 AA Large	5.0 AA	2.0 Fail
1.6 Fail	—	2.3 Fail	3.2 AA Large	1.3 Fail
3.6 AA Large	2.3 Fail	—	1.4 Fail	1.8 Fail
5.0 AA	3.2 AA Large	1.4 Fail	—	2.5 Fail
2.0 Fail	1.3 Fail	1.8 Fail	2.5 Fail	—

White BG

2.1Fail

3.3AA Large

7.7AAA

10.7AAA

4.2AA Large

Black BG

9.9AAA

6.3AA

2.7Fail

2.0Fail

5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A9A4

656699

494976

434364

94927A

Deuteranopia

A7A4A6

5F5899

484773

484E5E

9AA277

Tritanopia

9DAAAB

419999

446D6B

61504C

BE706E

Achromatopsia

ADADAD

7E7E7E

525252

3A3A3A

7B7B7B

Shades & Tints Shades & Tints

#9BBA9D

Dark

Light

#3C9A99

Dark

Light

#435182

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9bba9d;
  --color-2: #3c9a99;
  --color-3: #435182;
  --color-4: #65177c;
  --color-5: #c45486;
}

SCSS

$color-1: #9bba9d;
$color-2: #3c9a99;
$color-3: #435182;
$color-4: #65177c;
$color-5: #c45486;

TAILWIND

colors: {
  'brand-1': '#9bba9d',
  'brand-2': '#3c9a99',
  'brand-3': '#435182',
  'brand-4': '#65177c',
  'brand-5': '#c45486',
}

RGB Array

[155, 186, 157], [60, 154, 153], [67, 81, 130], [101, 23, 124], [196, 84, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9BBA9D, #3C9A99, #435182, #65177C, #C45486 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: #9bba9d; --color-2: #3c9a99; --color-3: #435182; --color-4: #65177c; --color-5: #c45486. 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