← Back to Editor

#686059 · #BF2230 · #FF474E · #A7A25E · #918E75

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

#686059

Tangerine · DimGray · Charcoal

HEX
#686059
RGB
rgb(104, 96, 89)
HSL
hsl(28, 8%, 38%)
HSB
hsb(28, 14%, 41%)
CMYK
cmyk(0%, 8%, 14%, 59%)
Oklch
oklch(49.4% 0.015 63.7)

Traditional「Tangerine」· Paint「Charcoal」· Creative Midnight Shadow

#BF2230

Vermilion · FireBrick · Passion Red

HEX
#BF2230
RGB
rgb(191, 34, 48)
HSL
hsl(355, 70%, 44%)
HSB
hsb(355, 82%, 75%)
CMYK
cmyk(0%, 82%, 75%, 25%)
Oklch
oklch(52.3% 0.190 23.1)

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

#FF474E

Peach Pink · Tomato · Coral Red

HEX
#FF474E
RGB
rgb(255, 71, 78)
HSL
hsl(358, 100%, 64%)
HSB
hsb(358, 72%, 100%)
CMYK
cmyk(0%, 72%, 69%, 0%)
Oklch
oklch(66.8% 0.220 23.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#A7A25E

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A7A25E
RGB
rgb(167, 162, 94)
HSL
hsl(56, 29%, 51%)
HSB
hsb(56, 44%, 65%)
CMYK
cmyk(0%, 3%, 44%, 35%)
Oklch
oklch(70.1% 0.090 104.8)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#918E75

Autumn Sage · Gray · Sunflower

HEX
#918E75
RGB
rgb(145, 142, 117)
HSL
hsl(54, 11%, 51%)
HSB
hsb(54, 19%, 57%)
CMYK
cmyk(0%, 2%, 19%, 43%)
Oklch
oklch(64.2% 0.036 101.7)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

686059
596169

Analogous

69595A
686059
696859

Triadic

686059
596960
605969

Split-Comp.

686059
596968
595A69

Tetradic

686059
5A6959
596169
685969

Contrast Matrix WCAG 2.1 Contrast

686059
BF2230
FF474E
A7A25E
918E75
—
1.0
Fail
1.8
Fail
2.3
Fail
1.9
Fail
1.0
Fail
—
1.8
Fail
2.3
Fail
1.8
Fail
1.8
Fail
1.8
Fail
—
1.3
Fail
1.0
Fail
2.3
Fail
2.3
Fail
1.3
Fail
—
1.3
Fail
1.9
Fail
1.8
Fail
1.0
Fail
1.3
Fail
—
White BG
6.2AA
6.0AA
3.4AA Large
2.6Fail
3.3AA Large
Black BG
3.4AA Large
3.5AA Large
6.3AA
8.0AAA
6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

65645B
7B7A2D
AFAE4C
A5A56E
90907B

Deuteranopia

65665B
84902C
BAC84C
A5A672
90907D

Tritanopia

685C5C
B72A29
F64B4B
A77B7E
918081

Achromatopsia

626262
535353
7F7F7F
9C9C9C
8C8C8C

Shades & Tints Shades & Tints

#686059

Dark
Light

#BF2230

Dark
Light

#FF474E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #686059;
  --color-2: #bf2230;
  --color-3: #ff474e;
  --color-4: #a7a25e;
  --color-5: #918e75;
}

SCSS

$color-1: #686059;
$color-2: #bf2230;
$color-3: #ff474e;
$color-4: #a7a25e;
$color-5: #918e75;

TAILWIND

colors: {
  'brand-1': '#686059',
  'brand-2': '#bf2230',
  'brand-3': '#ff474e',
  'brand-4': '#a7a25e',
  'brand-5': '#918e75',
}

RGB Array

[104, 96, 89], [191, 34, 48], [255, 71, 78], [167, 162, 94], [145, 142, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #686059, #BF2230, #FF474E, #A7A25E, #918E75 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: #686059; --color-2: #bf2230; --color-3: #ff474e; --color-4: #a7a25e; --color-5: #918e75. 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