← Back to Editor

#F28456 · #D7524E · #A6475D · #615B70 · #1B6E83

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

#F28456

Apricot · Coral · Warm Sun

HEX
#F28456
RGB
rgb(242, 132, 86)
HSL
hsl(18, 86%, 64%)
HSB
hsb(18, 64%, 95%)
CMYK
cmyk(0%, 45%, 64%, 5%)
Oklch
oklch(72.6% 0.148 42.7)

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

#D7524E

Vermilion · Tomato · Passion Red

HEX
#D7524E
RGB
rgb(215, 82, 78)
HSL
hsl(2, 63%, 57%)
HSB
hsb(2, 64%, 84%)
CMYK
cmyk(0%, 62%, 64%, 16%)
Oklch
oklch(61.5% 0.168 25.1)

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

#A6475D

Crimson · Sienna · Passion Red

HEX
#A6475D
RGB
rgb(166, 71, 93)
HSL
hsl(346, 40%, 46%)
HSB
hsb(346, 57%, 65%)
CMYK
cmyk(0%, 57%, 44%, 35%)
Oklch
oklch(52.8% 0.127 8.1)

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

#615B70

Deep Indigo · DimGray · Prussian Blue

HEX
#615B70
RGB
rgb(97, 91, 112)
HSL
hsl(257, 10%, 40%)
HSB
hsb(257, 19%, 44%)
CMYK
cmyk(13%, 19%, 0%, 56%)
Oklch
oklch(48.5% 0.034 298.2)

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

#1B6E83

Lake Blue · Teal · Mint Ice

HEX
#1B6E83
RGB
rgb(27, 110, 131)
HSL
hsl(192, 66%, 31%)
HSB
hsb(192, 79%, 51%)
CMYK
cmyk(79%, 16%, 0%, 49%)
Oklch
oklch(50.0% 0.082 219.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F28456
54C3F2

Analogous

F25474
F28456
F2D354

Triadic

F28456
54F284
8454F2

Split-Comp.

F28456
54F2D3
5474F2

Tetradic

F28456
74F254
54C3F2
D354F2

Contrast Matrix WCAG 2.1 Contrast

F28456
D7524E
A6475D
615B70
1B6E83
—
1.6
Fail
2.2
Fail
2.5
Fail
2.3
Fail
1.6
Fail
—
1.4
Fail
1.6
Fail
1.4
Fail
2.2
Fail
1.4
Fail
—
1.1
Fail
1.0
Fail
2.5
Fail
1.6
Fail
1.1
Fail
—
1.1
Fail
2.3
Fail
1.4
Fail
1.0
Fail
1.1
Fail
—
White BG
2.6Fail
4.0AA Large
5.7AA
6.5AA
5.8AA
Black BG
8.2AAA
5.2AA
3.7AA Large
3.2AA Large
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C161
9D9C4F
7D7C58
5E5E6B
3F407E

Deuteranopia

C9D164
A5AF4F
828A56
5F5F6A
3A347D

Tritanopia

EC6A6C
D05050
A15353
616766
1F7A79

Achromatopsia

A0A0A0
797979
666666
5F5F5F
585858

Shades & Tints Shades & Tints

#F28456

Dark
Light

#D7524E

Dark
Light

#A6475D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f28456;
  --color-2: #d7524e;
  --color-3: #a6475d;
  --color-4: #615b70;
  --color-5: #1b6e83;
}

SCSS

$color-1: #f28456;
$color-2: #d7524e;
$color-3: #a6475d;
$color-4: #615b70;
$color-5: #1b6e83;

TAILWIND

colors: {
  'brand-1': '#f28456',
  'brand-2': '#d7524e',
  'brand-3': '#a6475d',
  'brand-4': '#615b70',
  'brand-5': '#1b6e83',
}

RGB Array

[242, 132, 86], [215, 82, 78], [166, 71, 93], [97, 91, 112], [27, 110, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F28456, #D7524E, #A6475D, #615B70, #1B6E83 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: #f28456; --color-2: #d7524e; --color-3: #a6475d; --color-4: #615b70; --color-5: #1b6e83. 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