← Back to Editor

#FF0D0D · #8A857A · #967F7D · #A38D61 · #1BA279

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

#FF0D0D

Vermilion · Red · Passion Red

HEX
#FF0D0D
RGB
rgb(255, 13, 13)
HSL
hsl(0, 100%, 53%)
HSB
hsb(0, 95%, 100%)
CMYK
cmyk(0%, 95%, 95%, 0%)
Oklch
oklch(63.1% 0.255 28.9)

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

#8A857A

Ash · Gray · Warm Gray

HEX
#8A857A
RGB
rgb(138, 133, 122)
HSL
hsl(41, 6%, 51%)
HSB
hsb(41, 12%, 54%)
CMYK
cmyk(0%, 4%, 12%, 46%)
Oklch
oklch(61.8% 0.017 86.5)

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

#967F7D

Crimson · Gray · Passion Red

HEX
#967F7D
RGB
rgb(150, 127, 125)
HSL
hsl(5, 11%, 54%)
HSB
hsb(5, 17%, 59%)
CMYK
cmyk(0%, 15%, 17%, 41%)
Oklch
oklch(61.7% 0.029 23.8)

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

#A38D61

Ginger · Gray · Sunflower

HEX
#A38D61
RGB
rgb(163, 141, 97)
HSL
hsl(40, 26%, 51%)
HSB
hsb(40, 40%, 64%)
CMYK
cmyk(0%, 13%, 40%, 36%)
Oklch
oklch(65.3% 0.066 84.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#1BA279

Mineral Blue · MediumSeaGreen · Mint Ice

HEX
#1BA279
RGB
rgb(27, 162, 121)
HSL
hsl(162, 71%, 37%)
HSB
hsb(162, 83%, 64%)
CMYK
cmyk(83%, 0%, 25%, 36%)
Oklch
oklch(63.4% 0.125 166.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF0D0D
0FFFFF

Analogous

FF0F87
FF0D0D
FF870F

Triadic

FF0D0D
0FFF0F
0F0FFF

Split-Comp.

FF0D0D
0FFF87
0F87FF

Tetradic

FF0D0D
87FF0F
0FFFFF
870FFF

Contrast Matrix WCAG 2.1 Contrast

FF0D0D
8A857A
967F7D
A38D61
1BA279
—
1.1
Fail
1.1
Fail
1.2
Fail
1.2
Fail
1.1
Fail
—
1.0
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.0
Fail
—
1.2
Fail
1.2
Fail
1.2
Fail
1.1
Fail
1.2
Fail
—
1.0
Fail
1.2
Fail
1.1
Fail
1.2
Fail
1.0
Fail
—
White BG
4.0AA Large
3.7AA Large
3.7AA Large
3.2AA Large
3.2AA Large
Black BG
5.3AA
5.7AA
5.6AA
6.5AA
6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

96940D
88887D
8C8C7D
99996C
555783

Deuteranopia

A4B60D
88897D
8D8F7E
9B9C6E
4E4485

Tritanopia

F30D0D
8A7F7F
957E7E
A27476
228B8C

Achromatopsia

555555
858585
868686
8F8F8F
757575

Shades & Tints Shades & Tints

#FF0D0D

Dark
Light

#8A857A

Dark
Light

#967F7D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff0d0d;
  --color-2: #8a857a;
  --color-3: #967f7d;
  --color-4: #a38d61;
  --color-5: #1ba279;
}

SCSS

$color-1: #ff0d0d;
$color-2: #8a857a;
$color-3: #967f7d;
$color-4: #a38d61;
$color-5: #1ba279;

TAILWIND

colors: {
  'brand-1': '#ff0d0d',
  'brand-2': '#8a857a',
  'brand-3': '#967f7d',
  'brand-4': '#a38d61',
  'brand-5': '#1ba279',
}

RGB Array

[255, 13, 13], [138, 133, 122], [150, 127, 125], [163, 141, 97], [27, 162, 121]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF0D0D, #8A857A, #967F7D, #A38D61, #1BA279 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: #ff0d0d; --color-2: #8a857a; --color-3: #967f7d; --color-4: #a38d61; --color-5: #1ba279. 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