← Back to Editor

#F97C78 · #B14B61 · #3D2945 · #0A2F4A · #536674

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 LibraryData Visualization

Color Details Color Details

#F97C78

Peach Pink · Salmon · Coral Red

HEX
#F97C78
RGB
rgb(249, 124, 120)
HSL
hsl(2, 91%, 72%)
HSB
hsb(2, 52%, 98%)
CMYK
cmyk(0%, 50%, 52%, 2%)
Oklch
oklch(72.9% 0.154 23.5)

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

#B14B61

Crimson · Sienna · Passion Red

HEX
#B14B61
RGB
rgb(177, 75, 97)
HSL
hsl(347, 40%, 49%)
HSB
hsb(347, 58%, 69%)
CMYK
cmyk(0%, 58%, 45%, 31%)
Oklch
oklch(55.1% 0.134 9.2)

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

#3D2945

Dark Plum · DarkSlateGray · Eggplant

HEX
#3D2945
RGB
rgb(61, 41, 69)
HSL
hsl(283, 25%, 22%)
HSB
hsb(283, 41%, 27%)
CMYK
cmyk(12%, 41%, 0%, 73%)
Oklch
oklch(31.7% 0.055 316.0)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#0A2F4A

Lake Blue · MidnightBlue · Deep Sea Blue

HEX
#0A2F4A
RGB
rgb(10, 47, 74)
HSL
hsl(205, 76%, 16%)
HSB
hsb(205, 86%, 29%)
CMYK
cmyk(86%, 36%, 0%, 71%)
Oklch
oklch(29.5% 0.064 244.9)

Traditional「Lake Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#536674

Slate Blue · DimGray · Prussian Blue

HEX
#536674
RGB
rgb(83, 102, 116)
HSL
hsl(205, 17%, 39%)
HSB
hsb(205, 28%, 45%)
CMYK
cmyk(28%, 12%, 0%, 55%)
Oklch
oklch(50.0% 0.032 240.2)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F97C78
77F4F9

Analogous

F977B3
F97C78
F9BC77

Triadic

F97C78
77F97B
7B77F9

Split-Comp.

F97C78
77F9BC
77B3F9

Tetradic

F97C78
B3F977
77F4F9
BC77F9

Contrast Matrix WCAG 2.1 Contrast

F97C78
B14B61
3D2945
0A2F4A
536674
—
2.0
Fail
5.1
AA
5.4
AA
2.3
Fail
2.0
Fail
—
2.5
Fail
2.7
Fail
1.1
Fail
5.1
AA
2.5
Fail
—
1.1
Fail
2.2
Fail
5.4
AA
2.7
Fail
1.1
Fail
—
2.3
Fail
2.3
Fail
1.1
Fail
2.2
Fail
2.3
Fail
—
White BG
2.6Fail
5.2AA
13.1AAA
13.8AAA
6.0AA
Black BG
8.2AAA
4.0AA Large
1.6Fail
1.5Fail
3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C279
85845C
34343E
1A1A43
5B5B71

Deuteranopia

CAD379
8B925A
36373D
181542
5A5970

Tritanopia

F37A7A
AC5757
3C3938
0C3E3D
546E6D

Achromatopsia

A1A1A1
6C6C6C
323232
272727
626262

Shades & Tints Shades & Tints

#F97C78

Dark
Light

#B14B61

Dark
Light

#3D2945

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f97c78;
  --color-2: #b14b61;
  --color-3: #3d2945;
  --color-4: #0a2f4a;
  --color-5: #536674;
}

SCSS

$color-1: #f97c78;
$color-2: #b14b61;
$color-3: #3d2945;
$color-4: #0a2f4a;
$color-5: #536674;

TAILWIND

colors: {
  'brand-1': '#f97c78',
  'brand-2': '#b14b61',
  'brand-3': '#3d2945',
  'brand-4': '#0a2f4a',
  'brand-5': '#536674',
}

RGB Array

[249, 124, 120], [177, 75, 97], [61, 41, 69], [10, 47, 74], [83, 102, 116]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F97C78, #B14B61, #3D2945, #0A2F4A, #536674 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f97c78; --color-2: #b14b61; --color-3: #3d2945; --color-4: #0a2f4a; --color-5: #536674. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. High-contrast palettes naturally meet WCAG accessibility standards. 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