← Back to Editor

#303642 · #CA7E88 · #EFBCBB · #F1D4D0 · #EFE5E3

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

WorkspaceReadingData Visualization

Color Details Color Details

#303642

Indigo · DarkSlateGray · Prussian Blue

HEX
#303642
RGB
rgb(48, 54, 66)
HSL
hsl(220, 16%, 22%)
HSB
hsb(220, 27%, 26%)
CMYK
cmyk(27%, 18%, 0%, 74%)
Oklch
oklch(33.2% 0.023 264.2)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#CA7E88

Peach Pink · LightCoral · Coral Red

HEX
#CA7E88
RGB
rgb(202, 126, 136)
HSL
hsl(352, 42%, 64%)
HSB
hsb(352, 38%, 79%)
CMYK
cmyk(0%, 38%, 33%, 21%)
Oklch
oklch(67.6% 0.095 11.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#EFBCBB

Peach Pink · LightPink · Cherry Blossom

HEX
#EFBCBB
RGB
rgb(239, 188, 187)
HSL
hsl(1, 62%, 84%)
HSB
hsb(1, 22%, 94%)
CMYK
cmyk(0%, 21%, 22%, 6%)
Oklch
oklch(84.0% 0.059 19.7)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#F1D4D0

Peach Pink · Bisque · Cherry Blossom

HEX
#F1D4D0
RGB
rgb(241, 212, 208)
HSL
hsl(7, 54%, 88%)
HSB
hsb(7, 14%, 95%)
CMYK
cmyk(0%, 12%, 14%, 5%)
Oklch
oklch(89.3% 0.033 27.1)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#EFE5E3

Peach Pink · Linen · Cherry Blossom

HEX
#EFE5E3
RGB
rgb(239, 229, 227)
HSL
hsl(10, 27%, 91%)
HSB
hsb(10, 5%, 94%)
CMYK
cmyk(0%, 4%, 5%, 6%)
Oklch
oklch(92.9% 0.011 31.1)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

303642
413B2F

Analogous

2F3E41
303642
322F41

Triadic

303642
412F35
35412F

Split-Comp.

303642
41322F
3E412F

Tetradic

303642
412F3E
413B2F
2F4132

Contrast Matrix WCAG 2.1 Contrast

303642
CA7E88
EFBCBB
F1D4D0
EFE5E3
—
4.0
AA Large
7.3
AAA
8.7
AAA
9.8
AAA
4.0
AA Large
—
1.8
Fail
2.2
Fail
2.5
Fail
7.3
AAA
1.8
Fail
—
1.2
Fail
1.4
Fail
8.7
AAA
2.2
Fail
1.2
Fail
—
1.1
Fail
9.8
AAA
2.5
Fail
1.4
Fail
1.1
Fail
—
White BG
12.1AAA
3.1AA Large
1.7Fail
1.4Fail
1.2Fail
Black BG
1.7Fail
6.9AA
12.6AAA
15.1AAA
17.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

33333F
A9A886
D9D8BB
E4E4D1
EBEBE3

Deuteranopia

32323E
AEB385
DCE0BB
E6E8D1
EBECE4

Tritanopia

303D3C
C68483
ECBBBB
F0D2D2
EEE4E4

Achromatopsia

363636
969696
CBCBCB
DCDCDC
E8E8E8

Shades & Tints Shades & Tints

#303642

Dark
Light

#CA7E88

Dark
Light

#EFBCBB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #303642;
  --color-2: #ca7e88;
  --color-3: #efbcbb;
  --color-4: #f1d4d0;
  --color-5: #efe5e3;
}

SCSS

$color-1: #303642;
$color-2: #ca7e88;
$color-3: #efbcbb;
$color-4: #f1d4d0;
$color-5: #efe5e3;

TAILWIND

colors: {
  'brand-1': '#303642',
  'brand-2': '#ca7e88',
  'brand-3': '#efbcbb',
  'brand-4': '#f1d4d0',
  'brand-5': '#efe5e3',
}

RGB Array

[48, 54, 66], [202, 126, 136], [239, 188, 187], [241, 212, 208], [239, 229, 227]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #303642, #CA7E88, #EFBCBB, #F1D4D0, #EFE5E3 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: #303642; --color-2: #ca7e88; --color-3: #efbcbb; --color-4: #f1d4d0; --color-5: #efe5e3. 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