← Back to Editor

#CCC2B1 · #98B9AD · #05BCB8 · #238D98 · #F36292

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

#CCC2B1

Goose Yellow · Silver · Warm Sun

HEX
#CCC2B1
RGB
rgb(204, 194, 177)
HSL
hsl(38, 21%, 75%)
HSB
hsb(38, 13%, 80%)
CMYK
cmyk(0%, 5%, 13%, 20%)
Oklch
oklch(81.8% 0.026 81.1)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#98B9AD

Jade · DarkGray · Apple Green

HEX
#98B9AD
RGB
rgb(152, 185, 173)
HSL
hsl(158, 19%, 66%)
HSB
hsb(158, 18%, 73%)
CMYK
cmyk(18%, 0%, 6%, 27%)
Oklch
oklch(75.8% 0.040 171.1)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#05BCB8

Mineral Blue · DarkTurquoise · Mint Ice

HEX
#05BCB8
RGB
rgb(5, 188, 184)
HSL
hsl(179, 95%, 38%)
HSB
hsb(179, 97%, 74%)
CMYK
cmyk(97%, 0%, 2%, 26%)
Oklch
oklch(71.9% 0.123 192.1)

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

#238D98

Lake Blue · LightSeaGreen · Mint Ice

HEX
#238D98
RGB
rgb(35, 141, 152)
HSL
hsl(186, 63%, 37%)
HSB
hsb(186, 77%, 60%)
CMYK
cmyk(77%, 7%, 0%, 40%)
Oklch
oklch(59.1% 0.092 205.5)

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

#F36292

Rouge · LightCoral · Rose Pink

HEX
#F36292
RGB
rgb(243, 98, 146)
HSL
hsl(340, 86%, 67%)
HSB
hsb(340, 60%, 95%)
CMYK
cmyk(0%, 60%, 40%, 5%)
Oklch
oklch(69.2% 0.183 2.5)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCC2B1
B2BCCD

Analogous

CDB5B2
CCC2B1
C9CDB2

Triadic

CCC2B1
B2CDC3
C3B2CD

Split-Comp.

CCC2B1
B2C9CD
B5B2CD

Tetradic

CCC2B1
B2CDB5
B2BCCD
CDB2C9

Contrast Matrix WCAG 2.1 Contrast

CCC2B1
98B9AD
05BCB8
238D98
F36292
—
1.2
Fail
1.3
Fail
2.2
Fail
1.7
Fail
1.2
Fail
—
1.1
Fail
1.9
Fail
1.4
Fail
1.3
Fail
1.1
Fail
—
1.7
Fail
1.3
Fail
2.2
Fail
1.9
Fail
1.7
Fail
—
1.3
Fail
1.7
Fail
1.4
Fail
1.3
Fail
1.3
Fail
—
White BG
1.8Fail
2.1Fail
2.4Fail
3.9AA Large
3.0AA Large
Black BG
11.9AAA
9.9AAA
8.9AAA
5.3AA
7.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C8C8B5
A6A7B0
5456B9
515295
B4B386

Deuteranopia

C8C9B6
A4A2B1
4A3CB9
4B4395
BDC884

Tritanopia

CBB8B9
9AB2B3
0EBABA
289393
EC7D7B

Achromatopsia

C3C3C3
AEAEAE
858585
6F6F6F
939393

Shades & Tints Shades & Tints

#CCC2B1

Dark
Light

#98B9AD

Dark
Light

#05BCB8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccc2b1;
  --color-2: #98b9ad;
  --color-3: #05bcb8;
  --color-4: #238d98;
  --color-5: #f36292;
}

SCSS

$color-1: #ccc2b1;
$color-2: #98b9ad;
$color-3: #05bcb8;
$color-4: #238d98;
$color-5: #f36292;

TAILWIND

colors: {
  'brand-1': '#ccc2b1',
  'brand-2': '#98b9ad',
  'brand-3': '#05bcb8',
  'brand-4': '#238d98',
  'brand-5': '#f36292',
}

RGB Array

[204, 194, 177], [152, 185, 173], [5, 188, 184], [35, 141, 152], [243, 98, 146]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCC2B1, #98B9AD, #05BCB8, #238D98, #F36292 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: #ccc2b1; --color-2: #98b9ad; --color-3: #05bcb8; --color-4: #238d98; --color-5: #f36292. 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