#F44058 + #CB7C76 + #B4A994 + #C5D8B3 + #E8DFB5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F44058

Vermilion · Tomato · Passion Red

HEX

#F44058

RGB

rgb(244, 64, 88)

HSL

hsl(352, 89%, 60%)

HSB

hsb(352, 74%, 96%)

CMYK

cmyk(0%, 74%, 64%, 4%)

Oklch

oklch(64.5% 0.215 18.6)

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

#CB7C76

Peach Pink · LightCoral · Coral Red

HEX

#CB7C76

RGB

rgb(203, 124, 118)

HSL

hsl(4, 45%, 63%)

HSB

hsb(4, 42%, 80%)

CMYK

cmyk(0%, 39%, 42%, 20%)

Oklch

oklch(66.9% 0.100 24.7)

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

#B4A994

Ginger · DarkGray · Warm Sun

HEX

#B4A994

RGB

rgb(180, 169, 148)

HSL

hsl(39, 18%, 64%)

HSB

hsb(39, 18%, 71%)

CMYK

cmyk(0%, 6%, 18%, 29%)

Oklch

oklch(73.8% 0.032 83.6)

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

#C5D8B3

Celadon · Silver · Apple Green

HEX

#C5D8B3

RGB

rgb(197, 216, 179)

HSL

hsl(91, 32%, 77%)

HSB

hsb(91, 17%, 85%)

CMYK

cmyk(9%, 0%, 17%, 15%)

Oklch

oklch(85.8% 0.054 129.7)

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

#E8DFB5

Goose Yellow · Wheat · Lemon Cream

HEX

#E8DFB5

RGB

rgb(232, 223, 181)

HSL

hsl(49, 53%, 81%)

HSB

hsb(49, 22%, 91%)

CMYK

cmyk(0%, 4%, 22%, 9%)

Oklch

oklch(90.0% 0.056 97.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F44058

3EF4DC

Analogous

F43EB1

F44058

F4813E

Triadic

F44058

56F43E

3E56F4

Split-Comp.

F44058

3EF481

3EB1F4

Tetradic

F44058

B1F43E

3EF4DC

813EF4

Contrast Matrix WCAG 2.1 Contrast

F44058	CB7C76	B4A994	C5D8B3	E8DFB5
—	1.2 Fail	1.6 Fail	2.4 Fail	2.7 Fail
1.2 Fail	—	1.4 Fail	2.1 Fail	2.3 Fail
1.6 Fail	1.4 Fail	—	1.5 Fail	1.7 Fail
2.4 Fail	2.1 Fail	1.5 Fail	—	1.1 Fail
2.7 Fail	2.3 Fail	1.7 Fail	1.1 Fail	—

White BG

3.7AA Large

3.1AA Large

2.3Fail

1.5Fail

1.3Fail

Black BG

5.7AA

6.7AA

9.0AAA

13.8AAA

15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A6A452

A9A877

AFAF99

CDCDBC

E4E4BF

Deuteranopia

B1BE51

ADB378

B0B19A

CCCBBE

E5E5C2

Tritanopia

EB4E4D

C77979

B39D9E

C6C3C5

E8C7C9

Achromatopsia

797979

939393

AAAAAA

CECECE

DDDDDD

Shades & Tints Shades & Tints

#F44058

Dark

Light

#CB7C76

Dark

Light

#B4A994

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f44058;
  --color-2: #cb7c76;
  --color-3: #b4a994;
  --color-4: #c5d8b3;
  --color-5: #e8dfb5;
}

SCSS

$color-1: #f44058;
$color-2: #cb7c76;
$color-3: #b4a994;
$color-4: #c5d8b3;
$color-5: #e8dfb5;

TAILWIND

colors: {
  'brand-1': '#f44058',
  'brand-2': '#cb7c76',
  'brand-3': '#b4a994',
  'brand-4': '#c5d8b3',
  'brand-5': '#e8dfb5',
}

RGB Array

[244, 64, 88], [203, 124, 118], [180, 169, 148], [197, 216, 179], [232, 223, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F44058, #CB7C76, #B4A994, #C5D8B3, #E8DFB5 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: #f44058; --color-2: #cb7c76; --color-3: #b4a994; --color-4: #c5d8b3; --color-5: #e8dfb5. 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