← Back to Editor

#FBCBA3 · #F8887D · #E84B60 · #98B798 · #2B363C

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

#FBCBA3

Apricot · Wheat · Peach Orange

HEX
#FBCBA3
RGB
rgb(251, 203, 163)
HSL
hsl(27, 92%, 81%)
HSB
hsb(27, 35%, 98%)
CMYK
cmyk(0%, 19%, 35%, 2%)
Oklch
oklch(87.4% 0.076 61.4)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F8887D

Peach Pink · LightCoral · Coral Red

HEX
#F8887D
RGB
rgb(248, 136, 125)
HSL
hsl(5, 90%, 73%)
HSB
hsb(5, 50%, 97%)
CMYK
cmyk(0%, 45%, 50%, 3%)
Oklch
oklch(74.7% 0.138 26.7)

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

#E84B60

Vermilion · Tomato · Passion Red

HEX
#E84B60
RGB
rgb(232, 75, 96)
HSL
hsl(352, 77%, 60%)
HSB
hsb(352, 68%, 91%)
CMYK
cmyk(0%, 68%, 59%, 9%)
Oklch
oklch(63.7% 0.192 16.9)

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

#98B798

Celadon · DarkSeaGreen · Apple Green

HEX
#98B798
RGB
rgb(152, 183, 152)
HSL
hsl(120, 18%, 66%)
HSB
hsb(120, 17%, 72%)
CMYK
cmyk(17%, 0%, 17%, 28%)
Oklch
oklch(74.8% 0.055 145.0)

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

#2B363C

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX
#2B363C
RGB
rgb(43, 54, 60)
HSL
hsl(201, 17%, 20%)
HSB
hsb(201, 28%, 24%)
CMYK
cmyk(28%, 10%, 0%, 76%)
Oklch
oklch(32.5% 0.018 231.9)

Traditional「Slate Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBCBA3
A2D3FB

Analogous

FBA2A6
FBCBA3
FBF7A2

Triadic

FBCBA3
A2FBCA
CAA2FB

Split-Comp.

FBCBA3
A2FBF7
A2A6FB

Tetradic

FBCBA3
A6FBA2
A2D3FB
F7A2FB

Contrast Matrix WCAG 2.1 Contrast

FBCBA3
F8887D
E84B60
98B798
2B363C
—
1.6
Fail
2.5
Fail
1.5
Fail
8.4
AAA
1.6
Fail
—
1.6
Fail
1.1
Fail
5.2
AA
2.5
Fail
1.6
Fail
—
1.7
Fail
3.3
AA Large
1.5
Fail
1.1
Fail
1.7
Fail
—
5.6
AA
8.4
AAA
5.2
AA
3.3
AA Large
5.6
AA
—
White BG
1.5Fail
2.4Fail
3.7AA Large
2.2Fail
12.4AAA
Black BG
14.2AAA
8.8AAA
5.6AA
9.6AAA
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E6AD
C8C680
A4A35B
A5A6A0
30303B

Deuteranopia

E9EDAF
CED680
ADB95A
A4A1A1
2F2E3A

Tritanopia

F9B4B6
F28282
E05756
9AA5A7
2C3939

Achromatopsia

D5D5D5
A8A8A8
7C7C7C
AAAAAA
333333

Shades & Tints Shades & Tints

#FBCBA3

Dark
Light

#F8887D

Dark
Light

#E84B60

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbcba3;
  --color-2: #f8887d;
  --color-3: #e84b60;
  --color-4: #98b798;
  --color-5: #2b363c;
}

SCSS

$color-1: #fbcba3;
$color-2: #f8887d;
$color-3: #e84b60;
$color-4: #98b798;
$color-5: #2b363c;

TAILWIND

colors: {
  'brand-1': '#fbcba3',
  'brand-2': '#f8887d',
  'brand-3': '#e84b60',
  'brand-4': '#98b798',
  'brand-5': '#2b363c',
}

RGB Array

[251, 203, 163], [248, 136, 125], [232, 75, 96], [152, 183, 152], [43, 54, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FBCBA3, #F8887D, #E84B60, #98B798, #2B363C is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #fbcba3; --color-2: #f8887d; --color-3: #e84b60; --color-4: #98b798; --color-5: #2b363c. 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. 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