← Back to Editor

#6C8393 · #A27A8F · #F16E89 · #FF8C79 · #B9BE91

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

#6C8393

Slate Blue · SlateGray · Navy Blue

HEX
#6C8393
RGB
rgb(108, 131, 147)
HSL
hsl(205, 15%, 50%)
HSB
hsb(205, 27%, 58%)
CMYK
cmyk(27%, 11%, 0%, 42%)
Oklch
oklch(59.8% 0.036 238.6)

TraditionalSlate Blue」· PaintNavy Blue」· Creative Blush Sunrise

#A27A8F

Rose Purple · Gray · Rose Pink

HEX
#A27A8F
RGB
rgb(162, 122, 143)
HSL
hsl(329, 18%, 56%)
HSB
hsb(329, 25%, 64%)
CMYK
cmyk(0%, 25%, 12%, 36%)
Oklch
oklch(62.5% 0.057 346.1)

TraditionalRose Purple」· PaintRose Pink」· Creative Blush Sunrise

#F16E89

Peach Pink · LightCoral · Coral Red

HEX
#F16E89
RGB
rgb(241, 110, 137)
HSL
hsl(348, 82%, 69%)
HSB
hsb(348, 54%, 95%)
CMYK
cmyk(0%, 54%, 43%, 5%)
Oklch
oklch(70.2% 0.162 9.4)

TraditionalPeach Pink」· PaintCoral Red」· Creative Rose Petal

#FF8C79

Peach Pink · Salmon · Coral Red

HEX
#FF8C79
RGB
rgb(255, 140, 121)
HSL
hsl(9, 100%, 74%)
HSB
hsb(9, 53%, 100%)
CMYK
cmyk(0%, 45%, 53%, 0%)
Oklch
oklch(76.1% 0.143 30.5)

TraditionalPeach Pink」· PaintCoral Red」· Creative Blush Sunrise

#B9BE91

Fresh Green · Tan · Sunflower

HEX
#B9BE91
RGB
rgb(185, 190, 145)
HSL
hsl(67, 26%, 66%)
HSB
hsb(67, 24%, 75%)
CMYK
cmyk(3%, 0%, 24%, 25%)
Oklch
oklch(78.6% 0.061 113.0)

TraditionalFresh Green」· PaintSunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6C8393
937C6C

Analogous

6C938F
6C8393
6C7093

Triadic

6C8393
936C83
83936C

Split-Comp.

6C8393
936C70
938F6C

Tetradic

6C8393
8F6C93
937C6C
70936C

Contrast Matrix WCAG 2.1 Contrast

6C8393
A27A8F
F16E89
FF8C79
B9BE91
1.1
Fail
1.4
Fail
1.7
Fail
2.0
Fail
1.1
Fail
1.3
Fail
1.6
Fail
1.9
Fail
1.4
Fail
1.3
Fail
1.3
Fail
1.5
Fail
1.7
Fail
1.6
Fail
1.3
Fail
1.2
Fail
2.0
Fail
1.9
Fail
1.5
Fail
1.2
Fail
White BG
4.0AA Large
3.7AA Large
2.9Fail
2.3Fail
1.9Fail
Black BG
5.3AA
5.7AA
7.3AAA
9.3AAA
10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

76768F
91908A
B8B782
CDCC7E
BBBB9C

Deuteranopia

75738E
939689
C0CA81
D4DD7F
BBBB9F

Tritanopia

6D8C8B
A08685
EA7D7C
F98182
B9A4A6

Achromatopsia

7E7E7E
888888
989898
ACACAC
B7B7B7

Shades & Tints Shades & Tints

#6C8393

Dark
Light

#A27A8F

Dark
Light

#F16E89

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6c8393;
  --color-2: #a27a8f;
  --color-3: #f16e89;
  --color-4: #ff8c79;
  --color-5: #b9be91;
}

SCSS

$color-1: #6c8393;
$color-2: #a27a8f;
$color-3: #f16e89;
$color-4: #ff8c79;
$color-5: #b9be91;

TAILWIND

colors: {
  'brand-1': '#6c8393',
  'brand-2': '#a27a8f',
  'brand-3': '#f16e89',
  'brand-4': '#ff8c79',
  'brand-5': '#b9be91',
}

RGB Array

[108, 131, 147], [162, 122, 143], [241, 110, 137], [255, 140, 121], [185, 190, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6C8393, #A27A8F, #F16E89, #FF8C79, #B9BE91 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: #6c8393; --color-2: #a27a8f; --color-3: #f16e89; --color-4: #ff8c79; --color-5: #b9be91. 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