← Back to Editor

#A64A35 · #8D7938 · #71A24A · #5BB088 · #1DC1DF

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

#A64A35

Crimson · Sienna · Passion Red

HEX
#A64A35
RGB
rgb(166, 74, 53)
HSL
hsl(11, 52%, 43%)
HSB
hsb(11, 68%, 65%)
CMYK
cmyk(0%, 55%, 68%, 35%)
Oklch
oklch(52.4% 0.127 34.2)

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

#8D7938

Ochre · Sienna · Honey Gold

HEX
#8D7938
RGB
rgb(141, 121, 56)
HSL
hsl(46, 43%, 39%)
HSB
hsb(46, 60%, 55%)
CMYK
cmyk(0%, 14%, 60%, 45%)
Oklch
oklch(58.1% 0.088 92.4)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#71A24A

Celadon · DimGray · Olive Green

HEX
#71A24A
RGB
rgb(113, 162, 74)
HSL
hsl(93, 37%, 46%)
HSB
hsb(93, 54%, 64%)
CMYK
cmyk(30%, 0%, 54%, 36%)
Oklch
oklch(65.7% 0.130 133.0)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#5BB088

Mineral Blue · CadetBlue · Olive Green

HEX
#5BB088
RGB
rgb(91, 176, 136)
HSL
hsl(152, 35%, 52%)
HSB
hsb(152, 48%, 69%)
CMYK
cmyk(48%, 0%, 23%, 31%)
Oklch
oklch(69.3% 0.103 161.6)

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

#1DC1DF

Lake Blue · DarkTurquoise · Mint Ice

HEX
#1DC1DF
RGB
rgb(29, 193, 223)
HSL
hsl(189, 77%, 49%)
HSB
hsb(189, 87%, 87%)
CMYK
cmyk(87%, 13%, 0%, 13%)
Oklch
oklch(74.8% 0.128 214.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A64A35
3592A7

Analogous

A73559
A64A35
A78335

Triadic

A64A35
35A74A
4A35A7

Split-Comp.

A64A35
35A783
3559A7

Tetradic

A64A35
59A735
3592A7
8335A7

Contrast Matrix WCAG 2.1 Contrast

A64A35
8D7938
71A24A
5BB088
1DC1DF
—
1.3
Fail
1.9
Fail
2.2
Fail
2.7
Fail
1.3
Fail
—
1.4
Fail
1.6
Fail
2.0
Fail
1.9
Fail
1.4
Fail
—
1.1
Fail
1.4
Fail
2.2
Fail
1.6
Fail
1.1
Fail
—
1.2
Fail
2.7
Fail
2.0
Fail
1.4
Fail
1.2
Fail
—
White BG
5.7AA
4.3AA Large
3.0AA Large
2.6Fail
2.2Fail
Black BG
3.7AA Large
4.9AA
7.0AA
8.0AAA
9.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7E7D3A
848448
86875F
808192
6465D8

Deuteranopia

848A3B
86874C
838064
7B7594
5B4ED6

Tritanopia

A13E3F
8C5457
737074
5F999B
25D2D1

Achromatopsia

636363
787878
898989
929292
939393

Shades & Tints Shades & Tints

#A64A35

Dark
Light

#8D7938

Dark
Light

#71A24A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a64a35;
  --color-2: #8d7938;
  --color-3: #71a24a;
  --color-4: #5bb088;
  --color-5: #1dc1df;
}

SCSS

$color-1: #a64a35;
$color-2: #8d7938;
$color-3: #71a24a;
$color-4: #5bb088;
$color-5: #1dc1df;

TAILWIND

colors: {
  'brand-1': '#a64a35',
  'brand-2': '#8d7938',
  'brand-3': '#71a24a',
  'brand-4': '#5bb088',
  'brand-5': '#1dc1df',
}

RGB Array

[166, 74, 53], [141, 121, 56], [113, 162, 74], [91, 176, 136], [29, 193, 223]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A64A35, #8D7938, #71A24A, #5BB088, #1DC1DF 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: #a64a35; --color-2: #8d7938; --color-3: #71a24a; --color-4: #5bb088; --color-5: #1dc1df. 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