← Back to Editor

#F44545 · #604A44 · #8A5A40 · #BCE541 · #5F8FC6

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

#F44545

Peach Pink · Tomato · Coral Red

HEX
#F44545
RGB
rgb(244, 69, 69)
HSL
hsl(0, 89%, 61%)
HSB
hsb(0, 72%, 96%)
CMYK
cmyk(0%, 72%, 72%, 4%)
Oklch
oklch(64.6% 0.212 25.4)

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

#604A44

Crimson · DarkOliveGreen · Wine Red

HEX
#604A44
RGB
rgb(96, 74, 68)
HSL
hsl(13, 17%, 32%)
HSB
hsb(13, 29%, 38%)
CMYK
cmyk(0%, 23%, 29%, 62%)
Oklch
oklch(43.0% 0.032 35.8)

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

#8A5A40

Tangerine · Sienna · Amber Brown

HEX
#8A5A40
RGB
rgb(138, 90, 64)
HSL
hsl(21, 37%, 40%)
HSB
hsb(21, 54%, 54%)
CMYK
cmyk(0%, 35%, 54%, 46%)
Oklch
oklch(51.4% 0.074 49.0)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#BCE541

Grass Green · GreenYellow · Olive Green

HEX
#BCE541
RGB
rgb(188, 229, 65)
HSL
hsl(75, 76%, 58%)
HSB
hsb(75, 72%, 90%)
CMYK
cmyk(18%, 0%, 72%, 10%)
Oklch
oklch(86.4% 0.188 122.8)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#5F8FC6

Azure · SteelBlue · Navy Blue

HEX
#5F8FC6
RGB
rgb(95, 143, 198)
HSL
hsl(212, 47%, 57%)
HSB
hsb(212, 52%, 78%)
CMYK
cmyk(52%, 28%, 0%, 22%)
Oklch
oklch(63.9% 0.098 252.7)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F44545
43F4F4

Analogous

F4439C
F44545
F49C43

Triadic

F44545
43F443
4343F4

Split-Comp.

F44545
43F49C
439CF4

Tetradic

F44545
9CF443
43F4F4
9C43F4

Contrast Matrix WCAG 2.1 Contrast

F44545
604A44
8A5A40
BCE541
5F8FC6
—
2.3
Fail
1.6
Fail
2.5
Fail
1.1
Fail
2.3
Fail
—
1.4
Fail
5.6
AA
2.4
Fail
1.6
Fail
1.4
Fail
—
4.0
AA Large
1.7
Fail
2.5
Fail
5.6
AA
4.0
AA Large
—
2.3
Fail
1.1
Fail
2.4
Fail
1.7
Fail
2.3
Fail
—
White BG
3.6AA Large
8.2AAA
5.8AA
1.5Fail
3.4AA Large
Black BG
5.8AA
2.6Fail
3.6AA Large
14.4AAA
6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A745
565645
757546
CECE69
7474B9

Deuteranopia

B2BF45
585946
787C48
CBC872
716DB6

Tritanopia

EB4545
5F4747
884B4C
BE888F
61AEAC

Achromatopsia

797979
505050
656565
C6C6C6
878787

Shades & Tints Shades & Tints

#F44545

Dark
Light

#604A44

Dark
Light

#8A5A40

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f44545;
  --color-2: #604a44;
  --color-3: #8a5a40;
  --color-4: #bce541;
  --color-5: #5f8fc6;
}

SCSS

$color-1: #f44545;
$color-2: #604a44;
$color-3: #8a5a40;
$color-4: #bce541;
$color-5: #5f8fc6;

TAILWIND

colors: {
  'brand-1': '#f44545',
  'brand-2': '#604a44',
  'brand-3': '#8a5a40',
  'brand-4': '#bce541',
  'brand-5': '#5f8fc6',
}

RGB Array

[244, 69, 69], [96, 74, 68], [138, 90, 64], [188, 229, 65], [95, 143, 198]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F44545, #604A44, #8A5A40, #BCE541, #5F8FC6 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: #f44545; --color-2: #604a44; --color-3: #8a5a40; --color-4: #bce541; --color-5: #5f8fc6. 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