← Back to Editor

#F72020 · #F78120 · #A67F60 · #60A699 · #91BDB5

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

#F72020

Vermilion · Crimson · Passion Red

HEX
#F72020
RGB
rgb(247, 32, 32)
HSL
hsl(0, 93%, 55%)
HSB
hsb(0, 87%, 97%)
CMYK
cmyk(0%, 87%, 87%, 3%)
Oklch
oklch(62.3% 0.242 28.1)

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

#F78120

Tangerine · Chocolate · Warm Sun

HEX
#F78120
RGB
rgb(247, 129, 32)
HSL
hsl(27, 93%, 55%)
HSB
hsb(27, 87%, 97%)
CMYK
cmyk(0%, 48%, 87%, 3%)
Oklch
oklch(72.3% 0.174 53.0)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#A67F60

Tangerine · Gray · Warm Sun

HEX
#A67F60
RGB
rgb(166, 127, 96)
HSL
hsl(27, 28%, 51%)
HSB
hsb(27, 42%, 65%)
CMYK
cmyk(0%, 23%, 42%, 35%)
Oklch
oklch(62.7% 0.065 59.7)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#60A699

Mineral Blue · CadetBlue · Lake Green

HEX
#60A699
RGB
rgb(96, 166, 153)
HSL
hsl(169, 28%, 51%)
HSB
hsb(169, 42%, 65%)
CMYK
cmyk(42%, 0%, 8%, 35%)
Oklch
oklch(67.5% 0.074 180.7)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#91BDB5

Jade · DarkGray · Lake Green

HEX
#91BDB5
RGB
rgb(145, 189, 181)
HSL
hsl(169, 25%, 65%)
HSB
hsb(169, 23%, 74%)
CMYK
cmyk(23%, 0%, 4%, 26%)
Oklch
oklch(76.4% 0.048 182.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F72020
22F7F7

Analogous

F7228C
F72020
F78C22

Triadic

F72020
22F722
2222F7

Split-Comp.

F72020
22F78C
228CF7

Tetradic

F72020
8CF722
22F7F7
8C22F7

Contrast Matrix WCAG 2.1 Contrast

F72020
F78120
A67F60
60A699
91BDB5
—
1.6
Fail
1.1
Fail
1.4
Fail
2.0
Fail
1.6
Fail
—
1.4
Fail
1.1
Fail
1.3
Fail
1.1
Fail
1.4
Fail
—
1.3
Fail
1.7
Fail
1.4
Fail
1.1
Fail
1.3
Fail
—
1.4
Fail
2.0
Fail
1.3
Fail
1.7
Fail
1.4
Fail
—
White BG
4.1AA Large
2.6Fail
3.6AA Large
2.8Fail
2.1Fail
Black BG
5.2AA
8.1AAA
5.8AA
7.4AAA
10.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9820
C4C337
959568
7E7F9C
A4A4B7

Deuteranopia

A6B620
CBD43D
979A69
7A759D
A29EB7

Tritanopia

EC2020
F14A4E
A46D6F
639F9F
93B8B9

Achromatopsia

606060
999999
878787
909090
AFAFAF

Shades & Tints Shades & Tints

#F72020

Dark
Light

#F78120

Dark
Light

#A67F60

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f72020;
  --color-2: #f78120;
  --color-3: #a67f60;
  --color-4: #60a699;
  --color-5: #91bdb5;
}

SCSS

$color-1: #f72020;
$color-2: #f78120;
$color-3: #a67f60;
$color-4: #60a699;
$color-5: #91bdb5;

TAILWIND

colors: {
  'brand-1': '#f72020',
  'brand-2': '#f78120',
  'brand-3': '#a67f60',
  'brand-4': '#60a699',
  'brand-5': '#91bdb5',
}

RGB Array

[247, 32, 32], [247, 129, 32], [166, 127, 96], [96, 166, 153], [145, 189, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F72020, #F78120, #A67F60, #60A699, #91BDB5 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: #f72020; --color-2: #f78120; --color-3: #a67f60; --color-4: #60a699; --color-5: #91bdb5. 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