← Back to Editor

#424E61 · #FF4F4F · #FFAD4F · #E8D4C1 · #ABD6BC

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

#424E61

Indigo · DarkSlateGray · Prussian Blue

HEX
#424E61
RGB
rgb(66, 78, 97)
HSL
hsl(217, 19%, 32%)
HSB
hsb(217, 32%, 38%)
CMYK
cmyk(32%, 20%, 0%, 62%)
Oklch
oklch(42.1% 0.035 259.5)

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

#FF4F4F

Peach Pink · Tomato · Coral Red

HEX
#FF4F4F
RGB
rgb(255, 79, 79)
HSL
hsl(0, 100%, 65%)
HSB
hsb(0, 69%, 100%)
CMYK
cmyk(0%, 69%, 69%, 0%)
Oklch
oklch(67.5% 0.213 24.9)

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

#FFAD4F

Ginger · SandyBrown · Warm Sun

HEX
#FFAD4F
RGB
rgb(255, 173, 79)
HSL
hsl(32, 100%, 65%)
HSB
hsb(32, 69%, 100%)
CMYK
cmyk(0%, 32%, 69%, 0%)
Oklch
oklch(81.1% 0.144 66.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#E8D4C1

Apricot · Wheat · Peach Orange

HEX
#E8D4C1
RGB
rgb(232, 212, 193)
HSL
hsl(29, 46%, 83%)
HSB
hsb(29, 17%, 91%)
CMYK
cmyk(0%, 9%, 17%, 9%)
Oklch
oklch(88.1% 0.034 65.9)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#ABD6BC

Celadon · Silver · Apple Green

HEX
#ABD6BC
RGB
rgb(171, 214, 188)
HSL
hsl(144, 34%, 75%)
HSB
hsb(144, 20%, 84%)
CMYK
cmyk(20%, 0%, 12%, 16%)
Oklch
oklch(83.8% 0.058 158.3)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

424E61
615542

Analogous

425D61
424E61
464261

Triadic

424E61
61424E
4E6142

Split-Comp.

424E61
614642
5D6142

Tetradic

424E61
61425D
615542
426146

Contrast Matrix WCAG 2.1 Contrast

424E61
FF4F4F
FFAD4F
E8D4C1
ABD6BC
—
2.6
Fail
4.5
AA
5.9
AA
5.2
AA
2.6
Fail
—
1.7
Fail
2.3
Fail
2.0
Fail
4.5
AA
1.7
Fail
—
1.3
Fail
1.2
Fail
5.9
AA
2.3
Fail
1.3
Fail
—
1.1
Fail
5.2
AA
2.0
Fail
1.2
Fail
1.1
Fail
—
White BG
8.4AAA
3.2AA Large
1.9Fail
1.4Fail
1.6Fail
Black BG
2.5Fail
6.5AA
11.3AAA
14.6AAA
13.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

47475C
B3B14F
DBDB66
DFDFC6
BEBEC2

Deuteranopia

47465B
BDCA4F
E0E66B
E1E2C7
BBB8C4

Tritanopia

435958
F64F4F
FB787C
E7C9CA
ADC7C8

Achromatopsia

4D4D4D
848484
BBBBBB
D8D8D8
C6C6C6

Shades & Tints Shades & Tints

#424E61

Dark
Light

#FF4F4F

Dark
Light

#FFAD4F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #424e61;
  --color-2: #ff4f4f;
  --color-3: #ffad4f;
  --color-4: #e8d4c1;
  --color-5: #abd6bc;
}

SCSS

$color-1: #424e61;
$color-2: #ff4f4f;
$color-3: #ffad4f;
$color-4: #e8d4c1;
$color-5: #abd6bc;

TAILWIND

colors: {
  'brand-1': '#424e61',
  'brand-2': '#ff4f4f',
  'brand-3': '#ffad4f',
  'brand-4': '#e8d4c1',
  'brand-5': '#abd6bc',
}

RGB Array

[66, 78, 97], [255, 79, 79], [255, 173, 79], [232, 212, 193], [171, 214, 188]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #424E61, #FF4F4F, #FFAD4F, #E8D4C1, #ABD6BC is ideal for: 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: #424e61; --color-2: #ff4f4f; --color-3: #ffad4f; --color-4: #e8d4c1; --color-5: #abd6bc. 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. 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