← Back to Editor

#FD674D · #C57E5D · #6E958C · #5B5F5C · #EF6289

space

A 5-color space palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FD674D

Peach Pink · Tomato · Coral Red

HEX
#FD674D
RGB
rgb(253, 103, 77)
HSL
hsl(9, 98%, 65%)
HSB
hsb(9, 70%, 99%)
CMYK
cmyk(0%, 59%, 70%, 1%)
Oklch
oklch(69.9% 0.188 32.0)

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

#C57E5D

Tangerine · DarkSalmon · Warm Sun

HEX
#C57E5D
RGB
rgb(197, 126, 93)
HSL
hsl(19, 47%, 57%)
HSB
hsb(19, 53%, 77%)
CMYK
cmyk(0%, 36%, 53%, 23%)
Oklch
oklch(66.0% 0.100 45.5)

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

#6E958C

Mineral Blue · LightSlateGray · Lake Green

HEX
#6E958C
RGB
rgb(110, 149, 140)
HSL
hsl(166, 16%, 51%)
HSB
hsb(166, 26%, 58%)
CMYK
cmyk(26%, 0%, 6%, 42%)
Oklch
oklch(63.8% 0.045 179.0)

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

#5B5F5C

Ink Gray · DimGray · Charcoal

HEX
#5B5F5C
RGB
rgb(91, 95, 92)
HSL
hsl(135, 2%, 36%)
HSB
hsb(135, 4%, 37%)
CMYK
cmyk(4%, 0%, 3%, 63%)
Oklch
oklch(48.1% 0.007 153.6)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#EF6289

Rouge · LightCoral · Rose Pink

HEX
#EF6289
RGB
rgb(239, 98, 137)
HSL
hsl(343, 82%, 66%)
HSB
hsb(343, 59%, 94%)
CMYK
cmyk(0%, 59%, 43%, 6%)
Oklch
oklch(68.4% 0.176 5.8)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FD674D
4EE3FD

Analogous

FD4E8C
FD674D
FDC04E

Triadic

FD674D
4EFD69
694EFD

Split-Comp.

FD674D
4EFDC0
4E8CFD

Tetradic

FD674D
8CFD4E
4EE3FD
C04EFD

Contrast Matrix WCAG 2.1 Contrast

FD674D
C57E5D
6E958C
5B5F5C
EF6289
—
1.1
Fail
1.1
Fail
2.2
Fail
1.1
Fail
1.1
Fail
—
1.0
Fail
2.0
Fail
1.0
Fail
1.1
Fail
1.0
Fail
—
2.0
Fail
1.1
Fail
2.2
Fail
2.0
Fail
2.0
Fail
—
2.1
Fail
1.1
Fail
1.0
Fail
1.1
Fail
2.1
Fail
—
White BG
2.9Fail
3.2AA Large
3.3AA Large
6.5AA
3.1AA Large
Black BG
7.2AAA
6.5AA
6.3AA
3.2AA Large
6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBB53
A6A665
7F7F8E
5D5D5D
B2B180

Deuteranopia

C5D055
AAB067
7D7A8F
5D5C5D
BAC57D

Tritanopia

F65859
C16B6D
709090
5B5D5D
E87876

Achromatopsia

919191
8F8F8F
888888
5D5D5D
919191

Shades & Tints Shades & Tints

#FD674D

Dark
Light

#C57E5D

Dark
Light

#6E958C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fd674d;
  --color-2: #c57e5d;
  --color-3: #6e958c;
  --color-4: #5b5f5c;
  --color-5: #ef6289;
}

SCSS

$color-1: #fd674d;
$color-2: #c57e5d;
$color-3: #6e958c;
$color-4: #5b5f5c;
$color-5: #ef6289;

TAILWIND

colors: {
  'brand-1': '#fd674d',
  'brand-2': '#c57e5d',
  'brand-3': '#6e958c',
  'brand-4': '#5b5f5c',
  'brand-5': '#ef6289',
}

RGB Array

[253, 103, 77], [197, 126, 93], [110, 149, 140], [91, 95, 92], [239, 98, 137]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #FD674D, #C57E5D, #6E958C, #5B5F5C, #EF6289 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: #fd674d; --color-2: #c57e5d; --color-3: #6e958c; --color-4: #5b5f5c; --color-5: #ef6289. 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 space-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