← Back to Editor

#9CC2C4 · #E6E6B8 · #6C7185 · #90816E · #BA906A

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 Library

Color Details Color Details

#9CC2C4

Sky Blue · LightSteelBlue · Lake Green

HEX
#9CC2C4
RGB
rgb(156, 194, 196)
HSL
hsl(183, 25%, 69%)
HSB
hsb(183, 20%, 77%)
CMYK
cmyk(20%, 1%, 0%, 23%)
Oklch
oklch(78.7% 0.041 200.3)

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

#E6E6B8

Fresh Green · Wheat · Lemon Cream

HEX
#E6E6B8
RGB
rgb(230, 230, 184)
HSL
hsl(60, 48%, 81%)
HSB
hsb(60, 20%, 90%)
CMYK
cmyk(0%, 0%, 20%, 10%)
Oklch
oklch(91.3% 0.060 107.5)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#6C7185

Indigo · SlateGray · Navy Blue

HEX
#6C7185
RGB
rgb(108, 113, 133)
HSL
hsl(228, 10%, 47%)
HSB
hsb(228, 19%, 52%)
CMYK
cmyk(19%, 15%, 0%, 48%)
Oklch
oklch(55.2% 0.032 274.3)

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

#90816E

Ochre · Gray · Amber Brown

HEX
#90816E
RGB
rgb(144, 129, 110)
HSL
hsl(34, 13%, 50%)
HSB
hsb(34, 24%, 56%)
CMYK
cmyk(0%, 10%, 24%, 44%)
Oklch
oklch(61.1% 0.033 73.7)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#BA906A

Tangerine · DarkSalmon · Warm Sun

HEX
#BA906A
RGB
rgb(186, 144, 106)
HSL
hsl(29, 37%, 57%)
HSB
hsb(29, 43%, 73%)
CMYK
cmyk(0%, 23%, 43%, 27%)
Oklch
oklch(68.4% 0.073 63.3)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9CC2C4
C49E9C

Analogous

9CC4B2
9CC2C4
9CAEC4

Triadic

9CC2C4
C49CC2
C2C49C

Split-Comp.

9CC2C4
C49CAE
C4B29C

Tetradic

9CC2C4
B29CC4
C49E9C
AEC49C

Contrast Matrix WCAG 2.1 Contrast

9CC2C4
E6E6B8
6C7185
90816E
BA906A
—
1.5
Fail
2.5
Fail
2.0
Fail
1.5
Fail
1.5
Fail
—
3.8
AA Large
2.9
Fail
2.2
Fail
2.5
Fail
3.8
AA Large
—
1.3
Fail
1.7
Fail
2.0
Fail
2.9
Fail
1.3
Fail
—
1.3
Fail
1.5
Fail
2.2
Fail
1.7
Fail
1.3
Fail
—
White BG
1.9Fail
1.3Fail
4.8AA
3.8AA Large
2.9Fail
Black BG
10.9AAA
16.4AAA
4.3AA Large
5.6AA
7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACADC4
E6E6C3
6E6E80
8A8973
A8A773

Deuteranopia

AAA7C3
E6E6C6
6E6E7F
8A8C74
AAAD75

Tritanopia

9EC3C3
E6CCCE
6C7C7C
8F7677
B87A7C

Achromatopsia

B7B7B7
E1E1E1
727272
838383
989898

Shades & Tints Shades & Tints

#9CC2C4

Dark
Light

#E6E6B8

Dark
Light

#6C7185

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9cc2c4;
  --color-2: #e6e6b8;
  --color-3: #6c7185;
  --color-4: #90816e;
  --color-5: #ba906a;
}

SCSS

$color-1: #9cc2c4;
$color-2: #e6e6b8;
$color-3: #6c7185;
$color-4: #90816e;
$color-5: #ba906a;

TAILWIND

colors: {
  'brand-1': '#9cc2c4',
  'brand-2': '#e6e6b8',
  'brand-3': '#6c7185',
  'brand-4': '#90816e',
  'brand-5': '#ba906a',
}

RGB Array

[156, 194, 196], [230, 230, 184], [108, 113, 133], [144, 129, 110], [186, 144, 106]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9CC2C4, #E6E6B8, #6C7185, #90816E, #BA906A is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #9cc2c4; --color-2: #e6e6b8; --color-3: #6c7185; --color-4: #90816e; --color-5: #ba906a. 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. Restrained colors convey professionalism and trust. 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