← Back to Editor

#F5481D · #C7BA98 · #E22478 · #4D4E64 · #9399A6

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

#F5481D

Vermilion · OrangeRed · Passion Red

HEX
#F5481D
RGB
rgb(245, 72, 29)
HSL
hsl(12, 92%, 54%)
HSB
hsb(12, 88%, 96%)
CMYK
cmyk(0%, 71%, 88%, 4%)
Oklch
oklch(64.7% 0.216 34.3)

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

#C7BA98

Ginger · Tan · Sunflower

HEX
#C7BA98
RGB
rgb(199, 186, 152)
HSL
hsl(43, 30%, 69%)
HSB
hsb(43, 24%, 78%)
CMYK
cmyk(0%, 7%, 24%, 22%)
Oklch
oklch(79.1% 0.048 89.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#E22478

Dark Violet · MediumVioletRed · Rose Pink

HEX
#E22478
RGB
rgb(226, 36, 120)
HSL
hsl(333, 77%, 51%)
HSB
hsb(333, 84%, 89%)
CMYK
cmyk(0%, 84%, 47%, 11%)
Oklch
oklch(60.2% 0.226 1.3)

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

#4D4E64

Indigo · DarkSlateGray · Prussian Blue

HEX
#4D4E64
RGB
rgb(77, 78, 100)
HSL
hsl(237, 13%, 35%)
HSB
hsb(237, 23%, 39%)
CMYK
cmyk(23%, 22%, 0%, 61%)
Oklch
oklch(43.2% 0.036 282.7)

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

#9399A6

Azure · DarkGray · Cobalt Blue

HEX
#9399A6
RGB
rgb(147, 153, 166)
HSL
hsl(221, 10%, 61%)
HSB
hsb(221, 11%, 65%)
CMYK
cmyk(11%, 8%, 0%, 35%)
Oklch
oklch(68.2% 0.020 265.9)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5481D
1ECAF6

Analogous

F61E5F
F5481D
F6B51E

Triadic

F5481D
1EF649
491EF6

Split-Comp.

F5481D
1EF6B5
1E5FF6

Tetradic

F5481D
5FF61E
1ECAF6
B51EF6

Contrast Matrix WCAG 2.1 Contrast

F5481D
C7BA98
E22478
4D4E64
9399A6
—
1.9
Fail
1.2
Fail
2.3
Fail
1.3
Fail
1.9
Fail
—
2.3
Fail
4.2
AA Large
1.5
Fail
1.2
Fail
2.3
Fail
—
1.8
Fail
1.5
Fail
2.3
Fail
4.2
AA Large
1.8
Fail
—
2.8
Fail
1.3
Fail
1.5
Fail
1.5
Fail
2.8
Fail
—
White BG
3.6AA Large
1.9Fail
4.4AA Large
8.1AAA
2.9Fail
Black BG
5.8AA
10.9AAA
4.8AA
2.6Fail
7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAA927
C1C1A0
908E64
4D4D5F
9696A3

Deuteranopia

B4C12A
C2C3A2
9BA95F
4D4D5D
9595A2

Tritanopia

EC3031
C6A7A8
D95450
4D5A5A
93A0A0

Achromatopsia

777777
BABABA
666666
505050
999999

Shades & Tints Shades & Tints

#F5481D

Dark
Light

#C7BA98

Dark
Light

#E22478

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5481d;
  --color-2: #c7ba98;
  --color-3: #e22478;
  --color-4: #4d4e64;
  --color-5: #9399a6;
}

SCSS

$color-1: #f5481d;
$color-2: #c7ba98;
$color-3: #e22478;
$color-4: #4d4e64;
$color-5: #9399a6;

TAILWIND

colors: {
  'brand-1': '#f5481d',
  'brand-2': '#c7ba98',
  'brand-3': '#e22478',
  'brand-4': '#4d4e64',
  'brand-5': '#9399a6',
}

RGB Array

[245, 72, 29], [199, 186, 152], [226, 36, 120], [77, 78, 100], [147, 153, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5481D, #C7BA98, #E22478, #4D4E64, #9399A6 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: #f5481d; --color-2: #c7ba98; --color-3: #e22478; --color-4: #4d4e64; --color-5: #9399a6. 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