← Back to Editor

#F28383 · #BA8C8C · #8D8F86 · #71857A · #648277

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

#F28383

Peach Pink · LightCoral · Coral Red

HEX
#F28383
RGB
rgb(242, 131, 131)
HSL
hsl(0, 81%, 73%)
HSB
hsb(0, 46%, 95%)
CMYK
cmyk(0%, 46%, 46%, 5%)
Oklch
oklch(73.3% 0.136 20.9)

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

#BA8C8C

Peach Pink · DarkGray · Coral Red

HEX
#BA8C8C
RGB
rgb(186, 140, 140)
HSL
hsl(0, 25%, 64%)
HSB
hsb(0, 25%, 73%)
CMYK
cmyk(0%, 25%, 25%, 27%)
Oklch
oklch(68.4% 0.056 18.6)

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

#8D8F86

Ash · Gray · Warm Gray

HEX
#8D8F86
RGB
rgb(141, 143, 134)
HSL
hsl(73, 4%, 54%)
HSB
hsb(73, 6%, 56%)
CMYK
cmyk(1%, 0%, 6%, 44%)
Oklch
oklch(64.6% 0.013 117.0)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#71857A

Celadon · Gray · Warm Gray

HEX
#71857A
RGB
rgb(113, 133, 122)
HSL
hsl(147, 8%, 48%)
HSB
hsb(147, 15%, 52%)
CMYK
cmyk(15%, 0%, 8%, 48%)
Oklch
oklch(59.7% 0.029 161.4)

Traditional「Celadon」· Paint「Warm Gray」· Creative Urban Concrete

#648277

Mineral Blue · SlateGray · Olive Green

HEX
#648277
RGB
rgb(100, 130, 119)
HSL
hsl(158, 13%, 45%)
HSB
hsb(158, 23%, 51%)
CMYK
cmyk(23%, 0%, 8%, 49%)
Oklch
oklch(58.0% 0.038 170.5)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F28383
82F2F2

Analogous

F282BA
F28383
F2BA82

Triadic

F28383
82F282
8282F2

Split-Comp.

F28383
82F2BA
82BAF2

Tetradic

F28383
BAF282
82F2F2
BA82F2

Contrast Matrix WCAG 2.1 Contrast

F28383
BA8C8C
8D8F86
71857A
648277
—
1.2
Fail
1.3
Fail
1.6
Fail
1.7
Fail
1.2
Fail
—
1.1
Fail
1.4
Fail
1.4
Fail
1.3
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.6
Fail
1.4
Fail
1.2
Fail
—
1.1
Fail
1.7
Fail
1.4
Fail
1.3
Fail
1.1
Fail
—
White BG
2.5Fail
2.9Fail
3.3AA Large
3.9AA Large
4.2AA Large
Black BG
8.3AAA
7.2AAA
6.4AA
5.3AA
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C183
A6A68C
8E8E88
7A7A7D
71717A

Deuteranopia

C8D183
A9AC8C
8E8E89
79777D
6F6D7A

Tritanopia

EC8383
B88C8C
8D8A8A
727F7F
667C7C

Achromatopsia

A4A4A4
9A9A9A
8D8D8D
7E7E7E
787878

Shades & Tints Shades & Tints

#F28383

Dark
Light

#BA8C8C

Dark
Light

#8D8F86

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f28383;
  --color-2: #ba8c8c;
  --color-3: #8d8f86;
  --color-4: #71857a;
  --color-5: #648277;
}

SCSS

$color-1: #f28383;
$color-2: #ba8c8c;
$color-3: #8d8f86;
$color-4: #71857a;
$color-5: #648277;

TAILWIND

colors: {
  'brand-1': '#f28383',
  'brand-2': '#ba8c8c',
  'brand-3': '#8d8f86',
  'brand-4': '#71857a',
  'brand-5': '#648277',
}

RGB Array

[242, 131, 131], [186, 140, 140], [141, 143, 134], [113, 133, 122], [100, 130, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F28383, #BA8C8C, #8D8F86, #71857A, #648277 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #f28383; --color-2: #ba8c8c; --color-3: #8d8f86; --color-4: #71857a; --color-5: #648277. 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. 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