← Back to Editor

#F73A14 · #9DAD97 · #898A7C · #766A5D · #695A4A

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F73A14

Vermilion · OrangeRed · Passion Red

HEX
#F73A14
RGB
rgb(247, 58, 20)
HSL
hsl(10, 93%, 52%)
HSB
hsb(10, 92%, 97%)
CMYK
cmyk(0%, 77%, 92%, 3%)
Oklch
oklch(63.8% 0.229 32.6)

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

#9DAD97

Celadon · DarkGray · Apple Green

HEX
#9DAD97
RGB
rgb(157, 173, 151)
HSL
hsl(104, 12%, 64%)
HSB
hsb(104, 13%, 68%)
CMYK
cmyk(9%, 0%, 13%, 32%)
Oklch
oklch(72.9% 0.036 137.1)

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

#898A7C

Ash · Gray · Warm Gray

HEX
#898A7C
RGB
rgb(137, 138, 124)
HSL
hsl(64, 6%, 51%)
HSB
hsb(64, 10%, 54%)
CMYK
cmyk(1%, 0%, 10%, 46%)
Oklch
oklch(62.8% 0.020 110.3)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#766A5D

Ochre · DimGray · Amber Brown

HEX
#766A5D
RGB
rgb(118, 106, 93)
HSL
hsl(31, 12%, 41%)
HSB
hsb(31, 21%, 46%)
CMYK
cmyk(0%, 10%, 21%, 54%)
Oklch
oklch(53.2% 0.025 69.5)

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

#695A4A

Ochre · DimGray · Amber Brown

HEX
#695A4A
RGB
rgb(105, 90, 74)
HSL
hsl(31, 17%, 35%)
HSB
hsb(31, 30%, 41%)
CMYK
cmyk(0%, 14%, 30%, 59%)
Oklch
oklch(47.8% 0.032 68.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F73A14
13D0F6

Analogous

F6135F
F73A14
F6AB13

Triadic

F73A14
13F639
3913F6

Split-Comp.

F73A14
13F6AB
135FF6

Tetradic

F73A14
5FF613
13D0F6
AB13F6

Contrast Matrix WCAG 2.1 Contrast

F73A14
9DAD97
898A7C
766A5D
695A4A
—
1.6
Fail
1.1
Fail
1.4
Fail
1.8
Fail
1.6
Fail
—
1.5
Fail
2.2
Fail
2.8
Fail
1.1
Fail
1.5
Fail
—
1.5
Fail
1.9
Fail
1.4
Fail
2.2
Fail
1.5
Fail
—
1.3
Fail
1.8
Fail
2.8
Fail
1.9
Fail
1.3
Fail
—
White BG
3.8AA Large
2.4Fail
3.5AA Large
5.3AA
6.6AA
Black BG
5.6AA
8.9AAA
6.0AA
4.0AA Large
3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

A5A31D
A4A49C
89897F
717160
63624E

Deuteranopia

B0BE1F
A3A29E
898980
727261
63654F

Tritanopia

EE2426
9EA1A1
898283
756363
685152

Achromatopsia

6E6E6E
A6A6A6
888888
6C6C6C
5D5D5D

Shades & Tints Shades & Tints

#F73A14

Dark
Light

#9DAD97

Dark
Light

#898A7C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f73a14;
  --color-2: #9dad97;
  --color-3: #898a7c;
  --color-4: #766a5d;
  --color-5: #695a4a;
}

SCSS

$color-1: #f73a14;
$color-2: #9dad97;
$color-3: #898a7c;
$color-4: #766a5d;
$color-5: #695a4a;

TAILWIND

colors: {
  'brand-1': '#f73a14',
  'brand-2': '#9dad97',
  'brand-3': '#898a7c',
  'brand-4': '#766a5d',
  'brand-5': '#695a4a',
}

RGB Array

[247, 58, 20], [157, 173, 151], [137, 138, 124], [118, 106, 93], [105, 90, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F73A14, #9DAD97, #898A7C, #766A5D, #695A4A is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f73a14; --color-2: #9dad97; --color-3: #898a7c; --color-4: #766a5d; --color-5: #695a4a. 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. Restrained colors convey professionalism and trust. 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