← Back to Editor

#F70F68 · #F7948F · #C3948F · #8E948F · #5A948F

A 5-color palette 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

#F70F68

Dark Violet · DeepPink · Rose Pink

HEX
#F70F68
RGB
rgb(247, 15, 104)
HSL
hsl(337, 94%, 51%)
HSB
hsb(337, 94%, 97%)
CMYK
cmyk(0%, 94%, 58%, 3%)
Oklch
oklch(62.7% 0.247 9.2)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#F7948F

Peach Pink · DarkSalmon · Coral Red

HEX
#F7948F
RGB
rgb(247, 148, 143)
HSL
hsl(3, 87%, 76%)
HSB
hsb(3, 42%, 97%)
CMYK
cmyk(0%, 40%, 42%, 3%)
Oklch
oklch(76.8% 0.120 23.3)

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

#C3948F

Peach Pink · Tan · Coral Red

HEX
#C3948F
RGB
rgb(195, 148, 143)
HSL
hsl(6, 30%, 66%)
HSB
hsb(6, 27%, 76%)
CMYK
cmyk(0%, 24%, 27%, 24%)
Oklch
oklch(71.0% 0.058 25.6)

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

#8E948F

Ash · LightSlateGray · Silver Sand

HEX
#8E948F
RGB
rgb(142, 148, 143)
HSL
hsl(130, 3%, 57%)
HSB
hsb(130, 4%, 58%)
CMYK
cmyk(4%, 0%, 3%, 42%)
Oklch
oklch(66.0% 0.010 150.6)

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

#5A948F

Mineral Blue · CadetBlue · Mint Ice

HEX
#5A948F
RGB
rgb(90, 148, 143)
HSL
hsl(175, 24%, 47%)
HSB
hsb(175, 39%, 58%)
CMYK
cmyk(39%, 0%, 3%, 42%)
Oklch
oklch(62.5% 0.061 188.7)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F70F68
0DF89D

Analogous

F80DDC
F70F68
F8280D

Triadic

F70F68
67F80D
0D67F8

Split-Comp.

F70F68
0DF828
0DDCF8

Tetradic

F70F68
DCF80D
0DF89D
280DF8

Contrast Matrix WCAG 2.1 Contrast

F70F68
F7948F
C3948F
8E948F
5A948F
—
1.8
Fail
1.5
Fail
1.3
Fail
1.2
Fail
1.8
Fail
—
1.2
Fail
1.4
Fail
1.6
Fail
1.5
Fail
1.2
Fail
—
1.2
Fail
1.3
Fail
1.3
Fail
1.4
Fail
1.2
Fail
—
1.1
Fail
1.2
Fail
1.6
Fail
1.3
Fail
1.1
Fail
—
White BG
4.0AA Large
2.2Fail
2.6Fail
3.1AA Large
3.5AA Large
Black BG
5.2AA
9.6AAA
8.0AAA
6.8AA
6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

939052
CCCB90
AFAE90
919190
737490

Deuteranopia

A0B14D
D2D991
B1B591
909091
706B91

Tritanopia

EB413E
F29191
C19191
8E9191
5D9191

Achromatopsia

5F5F5F
B1B1B1
A1A1A1
929292
828282

Shades & Tints Shades & Tints

#F70F68

Dark
Light

#F7948F

Dark
Light

#C3948F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f70f68;
  --color-2: #f7948f;
  --color-3: #c3948f;
  --color-4: #8e948f;
  --color-5: #5a948f;
}

SCSS

$color-1: #f70f68;
$color-2: #f7948f;
$color-3: #c3948f;
$color-4: #8e948f;
$color-5: #5a948f;

TAILWIND

colors: {
  'brand-1': '#f70f68',
  'brand-2': '#f7948f',
  'brand-3': '#c3948f',
  'brand-4': '#8e948f',
  'brand-5': '#5a948f',
}

RGB Array

[247, 15, 104], [247, 148, 143], [195, 148, 143], [142, 148, 143], [90, 148, 143]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F70F68, #F7948F, #C3948F, #8E948F, #5A948F 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: #f70f68; --color-2: #f7948f; --color-3: #c3948f; --color-4: #8e948f; --color-5: #5a948f. 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