← Back to Editor

#F78174 · #F79A83 · #E3A58D · #CCAD9B · #B1B3AF

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

WorkspaceReading

Color Details Color Details

#F78174

Peach Pink · Salmon · Coral Red

HEX
#F78174
RGB
rgb(247, 129, 116)
HSL
hsl(6, 89%, 71%)
HSB
hsb(6, 53%, 97%)
CMYK
cmyk(0%, 48%, 53%, 3%)
Oklch
oklch(73.3% 0.147 27.7)

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

#F79A83

Peach Pink · LightSalmon · Coral Red

HEX
#F79A83
RGB
rgb(247, 154, 131)
HSL
hsl(12, 88%, 74%)
HSB
hsb(12, 47%, 97%)
CMYK
cmyk(0%, 38%, 47%, 3%)
Oklch
oklch(77.6% 0.117 34.7)

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

#E3A58D

Apricot · BurlyWood · Warm Sun

HEX
#E3A58D
RGB
rgb(227, 165, 141)
HSL
hsl(17, 61%, 72%)
HSB
hsb(17, 38%, 89%)
CMYK
cmyk(0%, 27%, 38%, 11%)
Oklch
oklch(77.5% 0.081 42.1)

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

#CCAD9B

Apricot · Tan · Warm Sun

HEX
#CCAD9B
RGB
rgb(204, 173, 155)
HSL
hsl(22, 32%, 70%)
HSB
hsb(22, 24%, 80%)
CMYK
cmyk(0%, 15%, 24%, 20%)
Oklch
oklch(77.0% 0.044 51.9)

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

#B1B3AF

Ash · DarkGray · Silver Sand

HEX
#B1B3AF
RGB
rgb(177, 179, 175)
HSL
hsl(90, 3%, 69%)
HSB
hsb(90, 2%, 70%)
CMYK
cmyk(1%, 0%, 2%, 30%)
Oklch
oklch(76.4% 0.006 128.5)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F78174
73EAF7

Analogous

F773A8
F78174
F7C273

Triadic

F78174
73F780
8073F7

Split-Comp.

F78174
73F7C2
73A8F7

Tetradic

F78174
A8F773
73EAF7
C273F7

Contrast Matrix WCAG 2.1 Contrast

F78174
F79A83
E3A58D
CCAD9B
B1B3AF
—
1.2
Fail
1.2
Fail
1.2
Fail
1.2
Fail
1.2
Fail
—
1.0
Fail
1.0
Fail
1.0
Fail
1.2
Fail
1.0
Fail
—
1.0
Fail
1.0
Fail
1.2
Fail
1.0
Fail
1.0
Fail
—
1.0
Fail
1.2
Fail
1.0
Fail
1.0
Fail
1.0
Fail
—
White BG
2.5Fail
2.1Fail
2.1Fail
2.1Fail
2.1Fail
Black BG
8.3AAA
9.9AAA
10.0AAA
10.0AAA
9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C377
CFCE89
C8C893
BFBE9F
B2B2B0

Deuteranopia

CBD478
D4DB8A
CCD094
C0C3A0
B2B2B0

Tritanopia

F17A7A
F28D8E
E09798
CAA3A4
B1B1B1

Achromatopsia

A3A3A3
B3B3B3
B5B5B5
B4B4B4
B2B2B2

Shades & Tints Shades & Tints

#F78174

Dark
Light

#F79A83

Dark
Light

#E3A58D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f78174;
  --color-2: #f79a83;
  --color-3: #e3a58d;
  --color-4: #ccad9b;
  --color-5: #b1b3af;
}

SCSS

$color-1: #f78174;
$color-2: #f79a83;
$color-3: #e3a58d;
$color-4: #ccad9b;
$color-5: #b1b3af;

TAILWIND

colors: {
  'brand-1': '#f78174',
  'brand-2': '#f79a83',
  'brand-3': '#e3a58d',
  'brand-4': '#ccad9b',
  'brand-5': '#b1b3af',
}

RGB Array

[247, 129, 116], [247, 154, 131], [227, 165, 141], [204, 173, 155], [177, 179, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F78174, #F79A83, #E3A58D, #CCAD9B, #B1B3AF 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: #f78174; --color-2: #f79a83; --color-3: #e3a58d; --color-4: #ccad9b; --color-5: #b1b3af. 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