← Back to Editor

#61434E · #D5643A · #A49A07 · #77B793 · #F8AE8B

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 LibraryData Visualization

Color Details Color Details

#61434E

Dark Violet · DimGray · Camellia

HEX
#61434E
RGB
rgb(97, 67, 78)
HSL
hsl(338, 18%, 32%)
HSB
hsb(338, 31%, 38%)
CMYK
cmyk(0%, 31%, 20%, 62%)
Oklch
oklch(42.0% 0.044 355.4)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#D5643A

Tangerine · Chocolate · Warm Sun

HEX
#D5643A
RGB
rgb(213, 100, 58)
HSL
hsl(16, 65%, 53%)
HSB
hsb(16, 73%, 84%)
CMYK
cmyk(0%, 53%, 73%, 16%)
Oklch
oklch(63.3% 0.153 40.2)

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

#A49A07

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#A49A07
RGB
rgb(164, 154, 7)
HSL
hsl(56, 92%, 34%)
HSB
hsb(56, 96%, 64%)
CMYK
cmyk(0%, 6%, 96%, 36%)
Oklch
oklch(67.3% 0.141 104.9)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#77B793

Celadon · DarkSeaGreen · Olive Green

HEX
#77B793
RGB
rgb(119, 183, 147)
HSL
hsl(146, 31%, 59%)
HSB
hsb(146, 35%, 72%)
CMYK
cmyk(35%, 0%, 20%, 28%)
Oklch
oklch(72.6% 0.084 158.8)

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

#F8AE8B

Apricot · LightSalmon · Peach Orange

HEX
#F8AE8B
RGB
rgb(248, 174, 139)
HSL
hsl(19, 89%, 76%)
HSB
hsb(19, 44%, 97%)
CMYK
cmyk(0%, 30%, 44%, 3%)
Oklch
oklch(81.3% 0.099 46.2)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

61434E
436056

Analogous

60435C
61434E
604743

Triadic

61434E
4E6043
434E60

Split-Comp.

61434E
436047
435C60

Tetradic

61434E
5C6043
436056
474360

Contrast Matrix WCAG 2.1 Contrast

61434E
D5643A
A49A07
77B793
F8AE8B
—
2.4
Fail
3.0
Fail
3.7
AA Large
4.7
AA
2.4
Fail
—
1.3
Fail
1.6
Fail
2.0
Fail
3.0
Fail
1.3
Fail
—
1.2
Fail
1.6
Fail
3.7
AA Large
1.6
Fail
1.2
Fail
—
1.3
Fail
4.7
AA
2.0
Fail
1.6
Fail
1.3
Fail
—
White BG
8.7AAA
3.7AA Large
2.9Fail
2.3Fail
1.8Fail
Black BG
2.4Fail
5.7AA
7.2AAA
9.0AAA
11.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

54544B
A4A344
A0A02B
93939C
D8D793

Deuteranopia

56584B
ABB347
A0A133
8F8A9E
DCE296

Tritanopia

5F4949
CF4C4E
A3474D
7AA3A4
F49A9C

Achromatopsia

4D4D4D
818181
8C8C8C
A0A0A0
C0C0C0

Shades & Tints Shades & Tints

#61434E

Dark
Light

#D5643A

Dark
Light

#A49A07

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #61434e;
  --color-2: #d5643a;
  --color-3: #a49a07;
  --color-4: #77b793;
  --color-5: #f8ae8b;
}

SCSS

$color-1: #61434e;
$color-2: #d5643a;
$color-3: #a49a07;
$color-4: #77b793;
$color-5: #f8ae8b;

TAILWIND

colors: {
  'brand-1': '#61434e',
  'brand-2': '#d5643a',
  'brand-3': '#a49a07',
  'brand-4': '#77b793',
  'brand-5': '#f8ae8b',
}

RGB Array

[97, 67, 78], [213, 100, 58], [164, 154, 7], [119, 183, 147], [248, 174, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #61434E, #D5643A, #A49A07, #77B793, #F8AE8B is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #61434e; --color-2: #d5643a; --color-3: #a49a07; --color-4: #77b793; --color-5: #f8ae8b. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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