← Back to Editor

#F04E49 · #FFDA64 · #78C0A8 · #236574 · #424A5B

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

#F04E49

Peach Pink · Tomato · Coral Red

HEX
#F04E49
RGB
rgb(240, 78, 73)
HSL
hsl(2, 85%, 61%)
HSB
hsb(2, 70%, 94%)
CMYK
cmyk(0%, 68%, 70%, 6%)
Oklch
oklch(64.9% 0.199 26.1)

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

#FFDA64

Ginger · Khaki · Sunflower

HEX
#FFDA64
RGB
rgb(255, 218, 100)
HSL
hsl(46, 100%, 70%)
HSB
hsb(46, 61%, 100%)
CMYK
cmyk(0%, 15%, 61%, 0%)
Oklch
oklch(89.8% 0.142 91.9)

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

#78C0A8

Jade · MediumAquaMarine · Lake Green

HEX
#78C0A8
RGB
rgb(120, 192, 168)
HSL
hsl(160, 36%, 61%)
HSB
hsb(160, 38%, 75%)
CMYK
cmyk(38%, 0%, 13%, 25%)
Oklch
oklch(75.3% 0.081 170.9)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#236574

Lake Blue · DarkSlateGray · Mint Ice

HEX
#236574
RGB
rgb(35, 101, 116)
HSL
hsl(191, 54%, 30%)
HSB
hsb(191, 70%, 45%)
CMYK
cmyk(70%, 13%, 0%, 55%)
Oklch
oklch(47.2% 0.069 215.7)

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

#424A5B

Indigo · DarkSlateGray · Prussian Blue

HEX
#424A5B
RGB
rgb(66, 74, 91)
HSL
hsl(221, 16%, 31%)
HSB
hsb(221, 27%, 36%)
CMYK
cmyk(27%, 19%, 0%, 64%)
Oklch
oklch(40.9% 0.030 265.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F04E49
47EAF0

Analogous

F04796
F04E49
F0A147

Triadic

F04E49
47F04D
4D47F0

Split-Comp.

F04E49
47F0A1
4796F0

Tetradic

F04E49
96F047
47EAF0
A147F0

Contrast Matrix WCAG 2.1 Contrast

F04E49
FFDA64
78C0A8
236574
424A5B
—
2.6
Fail
1.7
Fail
1.8
Fail
2.5
Fail
2.6
Fail
—
1.6
Fail
4.9
AA
6.5
AA
1.7
Fail
1.6
Fail
—
3.1
AA Large
4.2
AA Large
1.8
Fail
4.9
AA
3.1
AA Large
—
1.3
Fail
2.5
Fail
6.5
AA
4.2
AA Large
1.3
Fail
—
White BG
3.6AA Large
1.4Fail
2.1Fail
6.6AA
8.9AAA
Black BG
5.9AA
15.5AAA
9.9AAA
3.2AA Large
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAA84A
EFEF81
9798AE
404070
454657

Deuteranopia

B3BF4B
F1F487
938EAF
3C376F
454456

Tritanopia

E84B4B
FD979C
7CB2B3
266E6D
425453

Achromatopsia

7E7E7E
D8D8D8
A8A8A8
535353
4A4A4A

Shades & Tints Shades & Tints

#F04E49

Dark
Light

#FFDA64

Dark
Light

#78C0A8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f04e49;
  --color-2: #ffda64;
  --color-3: #78c0a8;
  --color-4: #236574;
  --color-5: #424a5b;
}

SCSS

$color-1: #f04e49;
$color-2: #ffda64;
$color-3: #78c0a8;
$color-4: #236574;
$color-5: #424a5b;

TAILWIND

colors: {
  'brand-1': '#f04e49',
  'brand-2': '#ffda64',
  'brand-3': '#78c0a8',
  'brand-4': '#236574',
  'brand-5': '#424a5b',
}

RGB Array

[240, 78, 73], [255, 218, 100], [120, 192, 168], [35, 101, 116], [66, 74, 91]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F04E49, #FFDA64, #78C0A8, #236574, #424A5B 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: #f04e49; --color-2: #ffda64; --color-3: #78c0a8; --color-4: #236574; --color-5: #424a5b. 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