← Back to Editor

#6C6457 · #93C9C9 · #B282AC · #D6626B · #C7D8C5

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

#6C6457

Ochre · DimGray · Amber Brown

HEX
#6C6457
RGB
rgb(108, 100, 87)
HSL
hsl(37, 11%, 38%)
HSB
hsb(37, 19%, 42%)
CMYK
cmyk(0%, 7%, 19%, 58%)
Oklch
oklch(50.7% 0.022 80.0)

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

#93C9C9

Sky Blue · LightSteelBlue · Lake Green

HEX
#93C9C9
RGB
rgb(147, 201, 201)
HSL
hsl(180, 33%, 68%)
HSB
hsb(180, 27%, 79%)
CMYK
cmyk(27%, 0%, 0%, 21%)
Oklch
oklch(79.9% 0.056 196.1)

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

#B282AC

Rose Purple · DarkGray · Violet

HEX
#B282AC
RGB
rgb(178, 130, 172)
HSL
hsl(308, 24%, 60%)
HSB
hsb(308, 27%, 70%)
CMYK
cmyk(0%, 27%, 3%, 30%)
Oklch
oklch(66.7% 0.082 330.8)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#D6626B

Peach Pink · LightCoral · Coral Red

HEX
#D6626B
RGB
rgb(214, 98, 107)
HSL
hsl(355, 59%, 61%)
HSB
hsb(355, 54%, 84%)
CMYK
cmyk(0%, 54%, 50%, 16%)
Oklch
oklch(64.0% 0.146 17.4)

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

#C7D8C5

Celadon · LightGray · Mint Green

HEX
#C7D8C5
RGB
rgb(199, 216, 197)
HSL
hsl(114, 20%, 81%)
HSB
hsb(114, 9%, 85%)
CMYK
cmyk(8%, 0%, 9%, 15%)
Oklch
oklch(86.4% 0.032 142.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6C6457
565E6C

Analogous

6C5956
6C6457
696C56

Triadic

6C6457
566C63
63566C

Split-Comp.

6C6457
56696C
59566C

Tetradic

6C6457
566C59
565E6C
6C5669

Contrast Matrix WCAG 2.1 Contrast

6C6457
93C9C9
B282AC
D6626B
C7D8C5
—
3.2
AA Large
1.9
Fail
1.6
Fail
3.9
AA Large
3.2
AA Large
—
1.7
Fail
2.0
Fail
1.2
Fail
1.9
Fail
1.7
Fail
—
1.1
Fail
2.1
Fail
1.6
Fail
2.0
Fail
1.1
Fail
—
2.4
Fail
3.9
AA Large
1.2
Fail
2.1
Fail
2.4
Fail
—
White BG
5.8AA
1.8Fail
3.1AA Large
3.6AA Large
1.5Fail
Black BG
3.6AA Large
11.4AAA
6.7AA
5.8AA
14.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

69685A
AAABC9
9D9DA2
A4A369
CECFCA

Deuteranopia

696A5B
A7A3C9
A0A49F
ABB368
CDCCCB

Tritanopia

6C5D5D
96C9C9
B09A98
D06767
C8CDCE

Achromatopsia

656565
B9B9B9
959595
868686
D1D1D1

Shades & Tints Shades & Tints

#6C6457

Dark
Light

#93C9C9

Dark
Light

#B282AC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6c6457;
  --color-2: #93c9c9;
  --color-3: #b282ac;
  --color-4: #d6626b;
  --color-5: #c7d8c5;
}

SCSS

$color-1: #6c6457;
$color-2: #93c9c9;
$color-3: #b282ac;
$color-4: #d6626b;
$color-5: #c7d8c5;

TAILWIND

colors: {
  'brand-1': '#6c6457',
  'brand-2': '#93c9c9',
  'brand-3': '#b282ac',
  'brand-4': '#d6626b',
  'brand-5': '#c7d8c5',
}

RGB Array

[108, 100, 87], [147, 201, 201], [178, 130, 172], [214, 98, 107], [199, 216, 197]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6C6457, #93C9C9, #B282AC, #D6626B, #C7D8C5 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #6c6457; --color-2: #93c9c9; --color-3: #b282ac; --color-4: #d6626b; --color-5: #c7d8c5. 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. 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