← Back to Editor

#F4857B · #CF9793 · #BAAE99 · #B6CEC7 · #CDF8F7

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4857B

Peach Pink · LightCoral · Coral Red

HEX
#F4857B
RGB
rgb(244, 133, 123)
HSL
hsl(5, 85%, 72%)
HSB
hsb(5, 50%, 96%)
CMYK
cmyk(0%, 45%, 50%, 4%)
Oklch
oklch(73.6% 0.137 26.3)

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

#CF9793

Peach Pink · Tan · Coral Red

HEX
#CF9793
RGB
rgb(207, 151, 147)
HSL
hsl(4, 38%, 69%)
HSB
hsb(4, 29%, 81%)
CMYK
cmyk(0%, 27%, 29%, 19%)
Oklch
oklch(72.9% 0.068 23.5)

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

#BAAE99

Ginger · DarkGray · Warm Sun

HEX
#BAAE99
RGB
rgb(186, 174, 153)
HSL
hsl(38, 19%, 66%)
HSB
hsb(38, 18%, 73%)
CMYK
cmyk(0%, 6%, 18%, 27%)
Oklch
oklch(75.5% 0.032 81.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#B6CEC7

Jade · Silver · Glacier Blue

HEX
#B6CEC7
RGB
rgb(182, 206, 199)
HSL
hsl(162, 20%, 76%)
HSB
hsb(162, 12%, 81%)
CMYK
cmyk(12%, 0%, 3%, 19%)
Oklch
oklch(83.1% 0.028 176.2)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#CDF8F7

Jade · Lavender · Glacier Blue

HEX
#CDF8F7
RGB
rgb(205, 248, 247)
HSL
hsl(179, 75%, 89%)
HSB
hsb(179, 17%, 97%)
CMYK
cmyk(17%, 0%, 0%, 3%)
Oklch
oklch(94.9% 0.044 194.7)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4857B
7BEAF4

Analogous

F47BAD
F4857B
F4C27B

Triadic

F4857B
7BF485
857BF4

Split-Comp.

F4857B
7BF4C2
7BADF4

Tetradic

F4857B
ADF47B
7BEAF4
C27BF4

Contrast Matrix WCAG 2.1 Contrast

F4857B
CF9793
BAAE99
B6CEC7
CDF8F7
—
1.0
Fail
1.1
Fail
1.5
Fail
2.2
Fail
1.0
Fail
—
1.1
Fail
1.5
Fail
2.2
Fail
1.1
Fail
1.1
Fail
—
1.3
Fail
1.9
Fail
1.5
Fail
1.5
Fail
1.3
Fail
—
1.5
Fail
2.2
Fail
2.2
Fail
1.9
Fail
1.5
Fail
—
White BG
2.5Fail
2.5Fail
2.2Fail
1.7Fail
1.1Fail
Black BG
8.5AAA
8.5AAA
9.6AAA
12.6AAA
18.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C37D
B7B694
B5B59E
C0C1C9
E0E0F7

Deuteranopia

CAD37E
BABE94
B6B69F
BFBDC9
DDDAF7

Tritanopia

EE7F80
CC9595
B9A2A3
B7CACA
CFF7F7

Achromatopsia

A5A5A5
A7A7A7
AFAFAF
C6C6C6
EBEBEB

Shades & Tints Shades & Tints

#F4857B

Dark
Light

#CF9793

Dark
Light

#BAAE99

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4857b;
  --color-2: #cf9793;
  --color-3: #baae99;
  --color-4: #b6cec7;
  --color-5: #cdf8f7;
}

SCSS

$color-1: #f4857b;
$color-2: #cf9793;
$color-3: #baae99;
$color-4: #b6cec7;
$color-5: #cdf8f7;

TAILWIND

colors: {
  'brand-1': '#f4857b',
  'brand-2': '#cf9793',
  'brand-3': '#baae99',
  'brand-4': '#b6cec7',
  'brand-5': '#cdf8f7',
}

RGB Array

[244, 133, 123], [207, 151, 147], [186, 174, 153], [182, 206, 199], [205, 248, 247]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4857B, #CF9793, #BAAE99, #B6CEC7, #CDF8F7 is ideal for: health products, baby brands, fresh-style blogs. 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: #f4857b; --color-2: #cf9793; --color-3: #baae99; --color-4: #b6cec7; --color-5: #cdf8f7. 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. 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