← Back to Editor

#FFBEA3 · #807A7A · #C7DAD0 · #E8EED4 · #F7FBE2

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#FFBEA3

Apricot · LightPink · Peach Orange

HEX
#FFBEA3
RGB
rgb(255, 190, 163)
HSL
hsl(18, 100%, 82%)
HSB
hsb(18, 36%, 100%)
CMYK
cmyk(0%, 25%, 36%, 0%)
Oklch
oklch(85.4% 0.084 43.6)

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

#807A7A

Ink Gray · Gray · Warm Gray

HEX
#807A7A
RGB
rgb(128, 122, 122)
HSL
hsl(0, 2%, 49%)
HSB
hsb(0, 5%, 50%)
CMYK
cmyk(0%, 5%, 5%, 50%)
Oklch
oklch(58.5% 0.007 17.4)

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

#C7DAD0

Celadon · LightGray · Mint Green

HEX
#C7DAD0
RGB
rgb(199, 218, 208)
HSL
hsl(148, 20%, 82%)
HSB
hsb(148, 9%, 85%)
CMYK
cmyk(9%, 0%, 5%, 15%)
Oklch
oklch(87.1% 0.025 163.1)

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

#E8EED4

Willow Green · Beige · Mint Green

HEX
#E8EED4
RGB
rgb(232, 238, 212)
HSL
hsl(74, 43%, 88%)
HSB
hsb(74, 11%, 93%)
CMYK
cmyk(3%, 0%, 11%, 7%)
Oklch
oklch(93.8% 0.035 117.6)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#F7FBE2

Willow Green · Beige · Mint Green

HEX
#F7FBE2
RGB
rgb(247, 251, 226)
HSL
hsl(70, 76%, 94%)
HSB
hsb(70, 10%, 98%)
CMYK
cmyk(2%, 0%, 10%, 2%)
Oklch
oklch(97.8% 0.033 114.4)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFBEA3
A3E3FF

Analogous

FFA3B6
FFBEA3
FFEDA3

Triadic

FFBEA3
A3FFBF
BFA3FF

Split-Comp.

FFBEA3
A3FFED
A3B6FF

Tetradic

FFBEA3
B6FFA3
A3E3FF
EDA3FF

Contrast Matrix WCAG 2.1 Contrast

FFBEA3
807A7A
C7DAD0
E8EED4
F7FBE2
—
2.6
Fail
1.1
Fail
1.3
Fail
1.5
Fail
2.6
Fail
—
2.9
Fail
3.5
AA Large
4.0
AA Large
1.1
Fail
2.9
Fail
—
1.2
Fail
1.4
Fail
1.3
Fail
3.5
AA Large
1.2
Fail
—
1.1
Fail
1.5
Fail
4.0
AA Large
1.4
Fail
1.1
Fail
—
White BG
1.6Fail
4.2AA Large
1.5Fail
1.2Fail
1.1Fail
Black BG
13.1AAA
5.0AA
14.4AAA
17.6AAA
19.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E2AA
7D7D7A
CFCFD2
EBEBDA
F9F9E8

Deuteranopia

E7ECAB
7E7E7A
CECDD3
EAEADC
F9F8EA

Tritanopia

FCAFB0
807A7A
C8D4D5
E8DFE0
F7EDEE

Achromatopsia

CECECE
7C7C7C
D3D3D3
E9E9E9
F7F7F7

Shades & Tints Shades & Tints

#FFBEA3

Dark
Light

#807A7A

Dark
Light

#C7DAD0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffbea3;
  --color-2: #807a7a;
  --color-3: #c7dad0;
  --color-4: #e8eed4;
  --color-5: #f7fbe2;
}

SCSS

$color-1: #ffbea3;
$color-2: #807a7a;
$color-3: #c7dad0;
$color-4: #e8eed4;
$color-5: #f7fbe2;

TAILWIND

colors: {
  'brand-1': '#ffbea3',
  'brand-2': '#807a7a',
  'brand-3': '#c7dad0',
  'brand-4': '#e8eed4',
  'brand-5': '#f7fbe2',
}

RGB Array

[255, 190, 163], [128, 122, 122], [199, 218, 208], [232, 238, 212], [247, 251, 226]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFBEA3, #807A7A, #C7DAD0, #E8EED4, #F7FBE2 is ideal for: health products, baby brands, fresh-style blogs, 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: #ffbea3; --color-2: #807a7a; --color-3: #c7dad0; --color-4: #e8eed4; --color-5: #f7fbe2. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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