← Back to Editor

#879CAF · #A26F82 · #CD656C · #F87B3B · #FCC14D

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

#879CAF

Sky Blue · LightSlateGray · Cobalt Blue

HEX
#879CAF
RGB
rgb(135, 156, 175)
HSL
hsl(208, 20%, 61%)
HSB
hsb(208, 23%, 69%)
CMYK
cmyk(23%, 11%, 0%, 31%)
Oklch
oklch(68.3% 0.037 245.7)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#A26F82

Dark Violet · Gray · Rose Pink

HEX
#A26F82
RGB
rgb(162, 111, 130)
HSL
hsl(338, 22%, 54%)
HSB
hsb(338, 31%, 64%)
CMYK
cmyk(0%, 31%, 20%, 36%)
Oklch
oklch(60.0% 0.069 355.3)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#CD656C

Crimson · LightCoral · Passion Red

HEX
#CD656C
RGB
rgb(205, 101, 108)
HSL
hsl(356, 51%, 60%)
HSB
hsb(356, 51%, 80%)
CMYK
cmyk(0%, 51%, 47%, 20%)
Oklch
oklch(63.2% 0.132 17.4)

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

#F87B3B

Tangerine · Coral · Warm Sun

HEX
#F87B3B
RGB
rgb(248, 123, 59)
HSL
hsl(20, 93%, 60%)
HSB
hsb(20, 76%, 97%)
CMYK
cmyk(0%, 50%, 76%, 3%)
Oklch
oklch(71.7% 0.171 45.2)

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

#FCC14D

Ginger · SandyBrown · Sunflower

HEX
#FCC14D
RGB
rgb(252, 193, 77)
HSL
hsl(40, 97%, 65%)
HSB
hsb(40, 69%, 99%)
CMYK
cmyk(0%, 23%, 69%, 1%)
Oklch
oklch(84.4% 0.146 81.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

879CAF
AF9A88

Analogous

88AFAE
879CAF
8889AF

Triadic

879CAF
AF889D
9DAF88

Split-Comp.

879CAF
AF8889
AFAE88

Tetradic

879CAF
AE88AF
AF9A88
89AF88

Contrast Matrix WCAG 2.1 Contrast

879CAF
A26F82
CD656C
F87B3B
FCC14D
—
1.4
Fail
1.3
Fail
1.1
Fail
1.7
Fail
1.4
Fail
—
1.1
Fail
1.5
Fail
2.5
Fail
1.3
Fail
1.1
Fail
—
1.4
Fail
2.3
Fail
1.1
Fail
1.5
Fail
1.4
Fail
—
1.6
Fail
1.7
Fail
2.5
Fail
2.3
Fail
1.6
Fail
—
White BG
2.8Fail
4.1AA Large
3.7AA Large
2.7Fail
1.6Fail
Black BG
7.4AAA
5.1AA
5.7AA
7.9AAA
12.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9090AA
8C8B7D
A09F6A
C2C14A
E2E269

Deuteranopia

8F8DA9
8F937C
A6AE6A
C9D34E
E6EA70

Tritanopia

88A7A6
9F7A79
C86969
F25759
F97F84

Achromatopsia

989898
808080
858585
999999
C5C5C5

Shades & Tints Shades & Tints

#879CAF

Dark
Light

#A26F82

Dark
Light

#CD656C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #879caf;
  --color-2: #a26f82;
  --color-3: #cd656c;
  --color-4: #f87b3b;
  --color-5: #fcc14d;
}

SCSS

$color-1: #879caf;
$color-2: #a26f82;
$color-3: #cd656c;
$color-4: #f87b3b;
$color-5: #fcc14d;

TAILWIND

colors: {
  'brand-1': '#879caf',
  'brand-2': '#a26f82',
  'brand-3': '#cd656c',
  'brand-4': '#f87b3b',
  'brand-5': '#fcc14d',
}

RGB Array

[135, 156, 175], [162, 111, 130], [205, 101, 108], [248, 123, 59], [252, 193, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #879CAF, #A26F82, #CD656C, #F87B3B, #FCC14D 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: #879caf; --color-2: #a26f82; --color-3: #cd656c; --color-4: #f87b3b; --color-5: #fcc14d. 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