#FC0D31 + #E8D9AE + #6BB5A2 + #749988 + #7D8777 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FC0D31

Vermilion · Crimson · Passion Red

HEX

#FC0D31

RGB

rgb(252, 13, 49)

HSL

hsl(351, 98%, 52%)

HSB

hsb(351, 95%, 99%)

CMYK

cmyk(0%, 95%, 81%, 1%)

Oklch

oklch(62.7% 0.250 24.3)

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

#E8D9AE

Goose Yellow · Wheat · Lemon Cream

HEX

#E8D9AE

RGB

rgb(232, 217, 174)

HSL

hsl(44, 56%, 80%)

HSB

hsb(44, 25%, 91%)

CMYK

cmyk(0%, 6%, 25%, 9%)

Oklch

oklch(88.7% 0.059 91.1)

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

#6BB5A2

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#6BB5A2

RGB

rgb(107, 181, 162)

HSL

hsl(165, 33%, 56%)

HSB

hsb(165, 41%, 71%)

CMYK

cmyk(41%, 0%, 10%, 29%)

Oklch

oklch(71.9% 0.080 175.6)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#749988

Mineral Blue · LightSlateGray · Olive Green

HEX

#749988

RGB

rgb(116, 153, 136)

HSL

hsl(152, 15%, 53%)

HSB

hsb(152, 24%, 60%)

CMYK

cmyk(24%, 0%, 11%, 40%)

Oklch

oklch(65.0% 0.048 165.1)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#7D8777

Ink Gray · Gray · Warm Gray

HEX

#7D8777

RGB

rgb(125, 135, 119)

HSL

hsl(98, 6%, 50%)

HSB

hsb(98, 12%, 53%)

CMYK

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

Oklch

oklch(61.0% 0.026 133.6)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FC0D31

0DFDD9

Analogous

FD0DA9

FC0D31

FD610D

Triadic

FC0D31

31FD0D

0D31FD

Split-Comp.

FC0D31

0DFD61

0DA9FD

Tetradic

FC0D31

A9FD0D

0DFDD9

610DFD

Contrast Matrix WCAG 2.1 Contrast

FC0D31	E8D9AE	6BB5A2	749988	7D8777
—	2.9 Fail	1.7 Fail	1.3 Fail	1.1 Fail
2.9 Fail	—	1.7 Fail	2.2 Fail	2.7 Fail
1.7 Fail	1.7 Fail	—	1.3 Fail	1.6 Fail
1.3 Fail	2.2 Fail	1.3 Fail	—	1.2 Fail
1.1 Fail	2.7 Fail	1.6 Fail	1.2 Fail	—

White BG

4.0AA Large

1.4Fail

2.4Fail

3.2AA Large

3.7AA Large

Black BG

5.2AA

15.0AAA

8.8AAA

6.7AA

5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

959228

E2E1B8

8B8CA7

84848C

81817B

Deuteranopia

A2B426

E2E3BB

8781A8

827F8D

81807C

Tritanopia

F02120

E7C1C2

6FAAAB

768F90

7E7E7F

Achromatopsia

595959

D9D9D9

9D9D9D

8C8C8C

828282

Shades & Tints Shades & Tints

#FC0D31

Dark

Light

#E8D9AE

Dark

Light

#6BB5A2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fc0d31;
  --color-2: #e8d9ae;
  --color-3: #6bb5a2;
  --color-4: #749988;
  --color-5: #7d8777;
}

SCSS

$color-1: #fc0d31;
$color-2: #e8d9ae;
$color-3: #6bb5a2;
$color-4: #749988;
$color-5: #7d8777;

TAILWIND

colors: {
  'brand-1': '#fc0d31',
  'brand-2': '#e8d9ae',
  'brand-3': '#6bb5a2',
  'brand-4': '#749988',
  'brand-5': '#7d8777',
}

RGB Array

[252, 13, 49], [232, 217, 174], [107, 181, 162], [116, 153, 136], [125, 135, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FC0D31, #E8D9AE, #6BB5A2, #749988, #7D8777 is ideal for: corporate websites, product showcases, portfolios. 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: #fc0d31; --color-2: #e8d9ae; --color-3: #6bb5a2; --color-4: #749988; --color-5: #7d8777. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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