#F8333C + #EB6963 + #CBB8AB + #C2D7C9 + #EDD0C7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F8333C

Vermilion · Crimson · Passion Red

HEX

#F8333C

RGB

rgb(248, 51, 60)

HSL

hsl(357, 93%, 59%)

HSB

hsb(357, 79%, 97%)

CMYK

cmyk(0%, 79%, 76%, 3%)

Oklch

oklch(63.8% 0.230 24.8)

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

#EB6963

Peach Pink · Salmon · Coral Red

HEX

#EB6963

RGB

rgb(235, 105, 99)

HSL

hsl(3, 77%, 65%)

HSB

hsb(3, 58%, 92%)

CMYK

cmyk(0%, 55%, 58%, 8%)

Oklch

oklch(67.8% 0.162 25.0)

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

#CBB8AB

Apricot · Silver · Warm Sun

HEX

#CBB8AB

RGB

rgb(203, 184, 171)

HSL

hsl(24, 24%, 73%)

HSB

hsb(24, 16%, 80%)

CMYK

cmyk(0%, 9%, 16%, 20%)

Oklch

oklch(79.5% 0.028 56.7)

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

#C2D7C9

Celadon · LightGray · Apple Green

HEX

#C2D7C9

RGB

rgb(194, 215, 201)

HSL

hsl(140, 21%, 80%)

HSB

hsb(140, 10%, 84%)

CMYK

cmyk(10%, 0%, 7%, 16%)

Oklch

oklch(85.9% 0.030 156.5)

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

#EDD0C7

Peach Pink · Pink · Cherry Blossom

HEX

#EDD0C7

RGB

rgb(237, 208, 199)

HSL

hsl(14, 51%, 85%)

HSB

hsb(14, 16%, 93%)

CMYK

cmyk(0%, 12%, 16%, 7%)

Oklch

oklch(87.9% 0.035 38.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8333C

35F8EE

Analogous

F835A0

F8333C

F88D35

Triadic

F8333C

3FF835

353FF8

Split-Comp.

F8333C

35F88D

35A0F8

Tetradic

F8333C

A0F835

35F8EE

8D35F8

Contrast Matrix WCAG 2.1 Contrast

F8333C	EB6963	CBB8AB	C2D7C9	EDD0C7
—	1.2 Fail	2.0 Fail	2.5 Fail	2.6 Fail
1.2 Fail	—	1.6 Fail	2.1 Fail	2.1 Fail
2.0 Fail	1.6 Fail	—	1.3 Fail	1.3 Fail
2.5 Fail	2.1 Fail	1.3 Fail	—	1.0 Fail
2.6 Fail	2.1 Fail	1.3 Fail	1.0 Fail	—

White BG

3.8AA Large

3.1AA Large

1.9Fail

1.5Fail

Black BG

5.5AA

6.7AA

11.0AAA

13.9AAA

14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A13A

B3B264

C3C3AE

CBCBCC

E0E0C9

Deuteranopia

AEBD39

BAC465

C4C5AF

CAC8CD

E2E4CA

Tritanopia

EE3838

E56666

CAB1B1

C3CFD0

ECCBCB

Achromatopsia

6F6F6F

8F8F8F

BCBCBC

CFCFCF

D8D8D8

Shades & Tints Shades & Tints

#F8333C

Dark

Light

#EB6963

Dark

Light

#CBB8AB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8333c;
  --color-2: #eb6963;
  --color-3: #cbb8ab;
  --color-4: #c2d7c9;
  --color-5: #edd0c7;
}

SCSS

$color-1: #f8333c;
$color-2: #eb6963;
$color-3: #cbb8ab;
$color-4: #c2d7c9;
$color-5: #edd0c7;

TAILWIND

colors: {
  'brand-1': '#f8333c',
  'brand-2': '#eb6963',
  'brand-3': '#cbb8ab',
  'brand-4': '#c2d7c9',
  'brand-5': '#edd0c7',
}

RGB Array

[248, 51, 60], [235, 105, 99], [203, 184, 171], [194, 215, 201], [237, 208, 199]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8333C, #EB6963, #CBB8AB, #C2D7C9, #EDD0C7 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: #f8333c; --color-2: #eb6963; --color-3: #cbb8ab; --color-4: #c2d7c9; --color-5: #edd0c7. 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