#F23047 + #D18073 + #C4C19F + #D3E6D1 + #E6583C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F23047

Vermilion · Crimson · Passion Red

HEX

#F23047

RGB

rgb(242, 48, 71)

HSL

hsl(353, 88%, 57%)

HSB

hsb(353, 80%, 95%)

CMYK

cmyk(0%, 80%, 71%, 5%)

Oklch

oklch(62.7% 0.226 21.3)

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

#D18073

Peach Pink · DarkSalmon · Coral Red

HEX

#D18073

RGB

rgb(209, 128, 115)

HSL

hsl(8, 51%, 64%)

HSB

hsb(8, 45%, 82%)

CMYK

cmyk(0%, 39%, 45%, 18%)

Oklch

oklch(68.2% 0.103 29.8)

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

#C4C19F

Fresh Green · Tan · Sunflower

HEX

#C4C19F

RGB

rgb(196, 193, 159)

HSL

hsl(55, 24%, 70%)

HSB

hsb(55, 19%, 77%)

CMYK

cmyk(0%, 2%, 19%, 23%)

Oklch

oklch(80.4% 0.046 103.2)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#D3E6D1

Celadon · LightGray · Mint Green

HEX

#D3E6D1

RGB

rgb(211, 230, 209)

HSL

hsl(114, 30%, 86%)

HSB

hsb(114, 9%, 90%)

CMYK

cmyk(8%, 0%, 9%, 10%)

Oklch

oklch(90.5% 0.035 142.6)

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

#E6583C

Vermilion · Tomato · Passion Red

HEX

#E6583C

RGB

rgb(230, 88, 60)

HSL

hsl(10, 77%, 57%)

HSB

hsb(10, 74%, 90%)

CMYK

cmyk(0%, 62%, 74%, 10%)

Oklch

oklch(64.3% 0.182 33.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F23047

31F2DB

Analogous

F231A8

F23047

F27B31

Triadic

F23047

47F231

3147F2

Split-Comp.

F23047

31F27B

31A8F2

Tetradic

F23047

A8F231

31F2DB

7B31F2

Contrast Matrix WCAG 2.1 Contrast

F23047	D18073	C4C19F	D3E6D1	E6583C
—	1.3 Fail	2.2 Fail	3.0 AA Large	1.1 Fail
1.3 Fail	—	1.6 Fail	2.3 Fail	1.2 Fail
2.2 Fail	1.6 Fail	—	1.4 Fail	2.0 Fail
3.0 AA Large	2.3 Fail	1.4 Fail	—	2.7 Fail
1.1 Fail	1.2 Fail	2.0 Fail	2.7 Fail	—

White BG

4.0AA Large

3.0Fail

1.8Fail

1.3Fail

3.6AA Large

Black BG

5.3AA

7.0AAA

11.5AAA

16.0AAA

5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9E9C41

AEAD76

C3C3A7

DBDBD6

A9A743

Deuteranopia

A9B840

B3B977

C3C3A9

DAD9D7

B1BB44

Tritanopia

E83D3C

CD7979

C4AEAF

D4DADB

DF4849

Achromatopsia

6D6D6D

979797

BEBEBE

DEDEDE

7F7F7F

Shades & Tints Shades & Tints

#F23047

Dark

Light

#D18073

Dark

Light

#C4C19F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f23047;
  --color-2: #d18073;
  --color-3: #c4c19f;
  --color-4: #d3e6d1;
  --color-5: #e6583c;
}

SCSS

$color-1: #f23047;
$color-2: #d18073;
$color-3: #c4c19f;
$color-4: #d3e6d1;
$color-5: #e6583c;

TAILWIND

colors: {
  'brand-1': '#f23047',
  'brand-2': '#d18073',
  'brand-3': '#c4c19f',
  'brand-4': '#d3e6d1',
  'brand-5': '#e6583c',
}

RGB Array

[242, 48, 71], [209, 128, 115], [196, 193, 159], [211, 230, 209], [230, 88, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F23047, #D18073, #C4C19F, #D3E6D1, #E6583C 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: #f23047; --color-2: #d18073; --color-3: #c4c19f; --color-4: #d3e6d1; --color-5: #e6583c. 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