← Back to Editor

#869A9C · #C27286 · #FF5271 · #DE9585 · #CCBC9F

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

#869A9C

Slate Blue · LightSlateGray · Lake Green

HEX
#869A9C
RGB
rgb(134, 154, 156)
HSL
hsl(185, 10%, 57%)
HSB
hsb(185, 14%, 61%)
CMYK
cmyk(14%, 1%, 0%, 39%)
Oklch
oklch(67.1% 0.023 204.0)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#C27286

Crimson · LightCoral · Passion Red

HEX
#C27286
RGB
rgb(194, 114, 134)
HSL
hsl(345, 40%, 60%)
HSB
hsb(345, 41%, 76%)
CMYK
cmyk(0%, 41%, 31%, 24%)
Oklch
oklch(64.5% 0.103 4.3)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#FF5271

Peach Pink · Tomato · Coral Red

HEX
#FF5271
RGB
rgb(255, 82, 113)
HSL
hsl(349, 100%, 66%)
HSB
hsb(349, 68%, 100%)
CMYK
cmyk(0%, 68%, 56%, 0%)
Oklch
oklch(68.4% 0.208 14.2)

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

#DE9585

Peach Pink · DarkSalmon · Coral Red

HEX
#DE9585
RGB
rgb(222, 149, 133)
HSL
hsl(11, 57%, 70%)
HSB
hsb(11, 40%, 87%)
CMYK
cmyk(0%, 33%, 40%, 13%)
Oklch
oklch(73.9% 0.092 32.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#CCBC9F

Goose Yellow · Tan · Warm Sun

HEX
#CCBC9F
RGB
rgb(204, 188, 159)
HSL
hsl(39, 31%, 71%)
HSB
hsb(39, 22%, 80%)
CMYK
cmyk(0%, 8%, 22%, 20%)
Oklch
oklch(80.1% 0.043 82.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

869A9C
9C8886

Analogous

869C93
869A9C
86909C

Triadic

869A9C
9C869A
9A9C86

Split-Comp.

869A9C
9C8690
9C9386

Tetradic

869A9C
93869C
9C8886
909C86

Contrast Matrix WCAG 2.1 Contrast

869A9C
C27286
FF5271
DE9585
CCBC9F
—
1.2
Fail
1.1
Fail
1.2
Fail
1.6
Fail
1.2
Fail
—
1.1
Fail
1.4
Fail
1.9
Fail
1.1
Fail
1.1
Fail
—
1.3
Fail
1.7
Fail
1.2
Fail
1.4
Fail
1.3
Fail
—
1.3
Fail
1.6
Fail
1.9
Fail
1.7
Fail
1.3
Fail
—
White BG
3.0Fail
3.5AA Large
3.1AA Large
2.4Fail
1.9Fail
Black BG
7.1AAA
6.0AA
6.7AA
8.7AAA
11.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F8F9C
9F9F81
B4B369
BEBE89
C5C5A6

Deuteranopia

8E8C9B
A4AA80
BECB68
C3C88A
C6C7A8

Tritanopia

879B9B
BE7D7D
F66462
DA8C8D
CBACAD

Achromatopsia

949494
8C8C8C
898989
A9A9A9
BDBDBD

Shades & Tints Shades & Tints

#869A9C

Dark
Light

#C27286

Dark
Light

#FF5271

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #869a9c;
  --color-2: #c27286;
  --color-3: #ff5271;
  --color-4: #de9585;
  --color-5: #ccbc9f;
}

SCSS

$color-1: #869a9c;
$color-2: #c27286;
$color-3: #ff5271;
$color-4: #de9585;
$color-5: #ccbc9f;

TAILWIND

colors: {
  'brand-1': '#869a9c',
  'brand-2': '#c27286',
  'brand-3': '#ff5271',
  'brand-4': '#de9585',
  'brand-5': '#ccbc9f',
}

RGB Array

[134, 154, 156], [194, 114, 134], [255, 82, 113], [222, 149, 133], [204, 188, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #869A9C, #C27286, #FF5271, #DE9585, #CCBC9F 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: #869a9c; --color-2: #c27286; --color-3: #ff5271; --color-4: #de9585; --color-5: #ccbc9f. 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