#CC7474 + #F58321 + #AB9DA2 + #D6DBC3 + #EDEDDD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CC7474

Peach Pink · LightCoral · Coral Red

HEX

#CC7474

RGB

rgb(204, 116, 116)

HSL

hsl(0, 46%, 63%)

HSB

hsb(0, 43%, 80%)

CMYK

cmyk(0%, 43%, 43%, 20%)

Oklch

oklch(65.6% 0.111 20.5)

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

#F58321

Tangerine · GoldenRod · Warm Sun

HEX

#F58321

RGB

rgb(245, 131, 33)

HSL

hsl(28, 91%, 55%)

HSB

hsb(28, 87%, 96%)

CMYK

cmyk(0%, 47%, 87%, 4%)

Oklch

oklch(72.4% 0.170 54.3)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#AB9DA2

Rouge · DarkGray · Silver Sand

HEX

#AB9DA2

RGB

rgb(171, 157, 162)

HSL

hsl(339, 8%, 64%)

HSB

hsb(339, 8%, 67%)

CMYK

cmyk(0%, 8%, 5%, 33%)

Oklch

oklch(71.0% 0.018 353.9)

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

#D6DBC3

Willow Green · LightGray · Mint Green

HEX

#D6DBC3

RGB

rgb(214, 219, 195)

HSL

hsl(72, 25%, 81%)

HSB

hsb(72, 11%, 86%)

CMYK

cmyk(2%, 0%, 11%, 14%)

Oklch

oklch(88.1% 0.033 116.6)

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

#EDEDDD

Fresh Green · Beige · Lemon Cream

HEX

#EDEDDD

RGB

rgb(237, 237, 221)

HSL

hsl(60, 31%, 90%)

HSB

hsb(60, 7%, 93%)

CMYK

cmyk(0%, 0%, 7%, 7%)

Oklch

oklch(94.2% 0.021 106.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC7474

75CCCC

Analogous

CC75A1

CC7474

CCA175

Triadic

CC7474

75CC75

7575CC

Split-Comp.

CC7474

75CCA1

75A1CC

Tetradic

CC7474

A1CC75

75CCCC

A175CC

Contrast Matrix WCAG 2.1 Contrast

CC7474	F58321	AB9DA2	D6DBC3	EDEDDD
—	1.3 Fail	1.3 Fail	2.3 Fail	2.8 Fail
1.3 Fail	—	1.0 Fail	1.8 Fail	2.2 Fail
1.3 Fail	1.0 Fail	—	1.8 Fail	2.2 Fail
2.3 Fail	1.8 Fail	1.8 Fail	—	1.2 Fail
2.8 Fail	2.2 Fail	2.2 Fail	1.2 Fail	—

White BG

3.3AA Large

2.6Fail

1.4Fail

1.2Fail

Black BG

6.3AA

8.2AAA

8.1AAA

14.8AAA

17.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A6A574

C4C339

A5A5A1

D8D8C9

EDEDE1

Deuteranopia

ABB274

CAD33E

A6A7A1

D8D8CA

EDEDE2

Tritanopia

C87474

EF4B50

AAA0A0

D6CDCE

EDE4E5

Achromatopsia

8E8E8E

9A9A9A

A2A2A2

D7D7D7

EBEBEB

Shades & Tints Shades & Tints

#CC7474

Dark

Light

#F58321

Dark

Light

#AB9DA2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc7474;
  --color-2: #f58321;
  --color-3: #ab9da2;
  --color-4: #d6dbc3;
  --color-5: #ededdd;
}

SCSS

$color-1: #cc7474;
$color-2: #f58321;
$color-3: #ab9da2;
$color-4: #d6dbc3;
$color-5: #ededdd;

TAILWIND

colors: {
  'brand-1': '#cc7474',
  'brand-2': '#f58321',
  'brand-3': '#ab9da2',
  'brand-4': '#d6dbc3',
  'brand-5': '#ededdd',
}

RGB Array

[204, 116, 116], [245, 131, 33], [171, 157, 162], [214, 219, 195], [237, 237, 221]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CC7474, #F58321, #AB9DA2, #D6DBC3, #EDEDDD 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: #cc7474; --color-2: #f58321; --color-3: #ab9da2; --color-4: #d6dbc3; --color-5: #ededdd. 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