← Back to Editor

#9CC8D5 · #359578 · #1D5141 · #E1D552 · #CBB14A

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#9CC8D5

Sky Blue · LightSteelBlue · Lake Green

HEX
#9CC8D5
RGB
rgb(156, 200, 213)
HSL
hsl(194, 40%, 72%)
HSB
hsb(194, 27%, 84%)
CMYK
cmyk(27%, 6%, 0%, 16%)
Oklch
oklch(80.6% 0.050 217.8)

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

#359578

Mineral Blue · MediumSeaGreen · Mint Ice

HEX
#359578
RGB
rgb(53, 149, 120)
HSL
hsl(162, 48%, 40%)
HSB
hsb(162, 64%, 58%)
CMYK
cmyk(64%, 0%, 19%, 42%)
Oklch
oklch(60.5% 0.100 169.5)

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

#1D5141

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#1D5141
RGB
rgb(29, 81, 65)
HSL
hsl(162, 47%, 22%)
HSB
hsb(162, 64%, 32%)
CMYK
cmyk(64%, 0%, 20%, 68%)
Oklch
oklch(39.5% 0.062 169.8)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#E1D552

Autumn Sage · SandyBrown · Sunflower

HEX
#E1D552
RGB
rgb(225, 213, 82)
HSL
hsl(55, 70%, 60%)
HSB
hsb(55, 64%, 88%)
CMYK
cmyk(0%, 5%, 64%, 12%)
Oklch
oklch(85.9% 0.150 104.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#CBB14A

Ginger · GoldenRod · Sunflower

HEX
#CBB14A
RGB
rgb(203, 177, 74)
HSL
hsl(48, 55%, 54%)
HSB
hsb(48, 64%, 80%)
CMYK
cmyk(0%, 13%, 64%, 20%)
Oklch
oklch(76.3% 0.125 95.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9CC8D5
D4A89B

Analogous

9BD4C5
9CC8D5
9BAAD4

Triadic

9CC8D5
D49BC7
C7D49B

Split-Comp.

9CC8D5
D49BAA
D4C59B

Tetradic

9CC8D5
C59BD4
D4A89B
AAD49B

Contrast Matrix WCAG 2.1 Contrast

9CC8D5
359578
1D5141
E1D552
CBB14A
—
2.0
Fail
5.0
AA
1.2
Fail
1.2
Fail
2.0
Fail
—
2.5
Fail
2.4
Fail
1.7
Fail
5.0
AA
2.5
Fail
—
6.0
AA
4.3
AA Large
1.2
Fail
2.4
Fail
6.0
AA
—
1.4
Fail
1.2
Fail
1.7
Fail
4.3
AA Large
1.4
Fail
—
White BG
1.8Fail
3.7AA Large
9.1AAA
1.5Fail
2.1Fail
Black BG
11.6AAA
5.7AA
2.3Fail
13.8AAA
9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAFD2
5F5F7F
343445
DCDC72
C0C063

Deuteranopia

ADA9D1
595281
312D46
DDDD79
C1C369

Tritanopia

9ECFCF
3A8586
204849
E08B90
CA777B

Achromatopsia

BCBCBC
757575
404040
CACACA
ADADAD

Shades & Tints Shades & Tints

#9CC8D5

Dark
Light

#359578

Dark
Light

#1D5141

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9cc8d5;
  --color-2: #359578;
  --color-3: #1d5141;
  --color-4: #e1d552;
  --color-5: #cbb14a;
}

SCSS

$color-1: #9cc8d5;
$color-2: #359578;
$color-3: #1d5141;
$color-4: #e1d552;
$color-5: #cbb14a;

TAILWIND

colors: {
  'brand-1': '#9cc8d5',
  'brand-2': '#359578',
  'brand-3': '#1d5141',
  'brand-4': '#e1d552',
  'brand-5': '#cbb14a',
}

RGB Array

[156, 200, 213], [53, 149, 120], [29, 81, 65], [225, 213, 82], [203, 177, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9CC8D5, #359578, #1D5141, #E1D552, #CBB14A is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #9cc8d5; --color-2: #359578; --color-3: #1d5141; --color-4: #e1d552; --color-5: #cbb14a. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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