#5C7281 + #9B7281 + #CA7281 + #CABA81 + #CAEC81 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5C7281

Slate Blue · SlateGray · Navy Blue

HEX

#5C7281

RGB

rgb(92, 114, 129)

HSL

hsl(204, 17%, 43%)

HSB

hsb(204, 29%, 51%)

CMYK

cmyk(29%, 12%, 0%, 49%)

Oklch

oklch(54.0% 0.035 238.1)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#9B7281

Dark Violet · Gray · Rose Pink

HEX

#9B7281

RGB

rgb(155, 114, 129)

HSL

hsl(338, 17%, 53%)

HSB

hsb(338, 26%, 61%)

CMYK

cmyk(0%, 26%, 17%, 39%)

Oklch

oklch(59.8% 0.056 355.2)

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

#CA7281

Peach Pink · LightCoral · Coral Red

HEX

#CA7281

RGB

rgb(202, 114, 129)

HSL

hsl(350, 45%, 62%)

HSB

hsb(350, 44%, 79%)

CMYK

cmyk(0%, 44%, 36%, 21%)

Oklch

oklch(65.4% 0.112 9.7)

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

#CABA81

Ginger · Tan · Sunflower

HEX

#CABA81

RGB

rgb(202, 186, 129)

HSL

hsl(47, 41%, 65%)

HSB

hsb(47, 36%, 79%)

CMYK

cmyk(0%, 8%, 36%, 21%)

Oklch

oklch(78.9% 0.077 94.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#CAEC81

Willow Green · Khaki · Apple Green

HEX

#CAEC81

RGB

rgb(202, 236, 129)

HSL

hsl(79, 74%, 72%)

HSB

hsb(79, 45%, 93%)

CMYK

cmyk(14%, 0%, 45%, 7%)

Oklch

oklch(89.5% 0.139 123.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5C7281

806A5B

Analogous

5B807D

5C7281

5B5F80

Triadic

5C7281

805B71

71805B

Split-Comp.

5C7281

805B5F

807D5B

Tetradic

5C7281

7D5B80

806A5B

5F805B

Contrast Matrix WCAG 2.1 Contrast

5C7281	9B7281	CA7281	CABA81	CAEC81
—	1.2 Fail	1.5 Fail	2.6 Fail	3.8 AA Large
1.2 Fail	—	1.2 Fail	2.1 Fail	3.1 AA Large
1.5 Fail	1.2 Fail	—	1.7 Fail	2.5 Fail
2.6 Fail	2.1 Fail	1.7 Fail	—	1.5 Fail
3.8 AA Large	3.1 AA Large	2.5 Fail	1.5 Fail	—

White BG

5.0AA

4.1AA Large

3.4AA Large

1.9Fail

1.3Fail

Black BG

4.2AA Large

5.1AA

6.2AA

10.9AAA

15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

66667D

89897D

A4A37D

C3C38F

D9D99B

Deuteranopia

64637D

8C8F7D

A9B07D

C4C592

D7D4A1

Tritanopia

5D7B7A

997B7A

C67B7A

C99A9C

CCAFB4

Achromatopsia

6D6D6D

808080

8E8E8E

B8B8B8

D6D6D6

Shades & Tints Shades & Tints

#5C7281

Dark

Light

#9B7281

Dark

Light

#CA7281

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5c7281;
  --color-2: #9b7281;
  --color-3: #ca7281;
  --color-4: #caba81;
  --color-5: #caec81;
}

SCSS

$color-1: #5c7281;
$color-2: #9b7281;
$color-3: #ca7281;
$color-4: #caba81;
$color-5: #caec81;

TAILWIND

colors: {
  'brand-1': '#5c7281',
  'brand-2': '#9b7281',
  'brand-3': '#ca7281',
  'brand-4': '#caba81',
  'brand-5': '#caec81',
}

RGB Array

[92, 114, 129], [155, 114, 129], [202, 114, 129], [202, 186, 129], [202, 236, 129]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5C7281, #9B7281, #CA7281, #CABA81, #CAEC81 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: #5c7281; --color-2: #9b7281; --color-3: #ca7281; --color-4: #caba81; --color-5: #caec81. 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