← Back to Editor

#7A4F41 · #D3594E · #B28C83 · #8DAA98 · #D4D996

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

#7A4F41

Tangerine · Sienna · Amber Brown

HEX
#7A4F41
RGB
rgb(122, 79, 65)
HSL
hsl(15, 30%, 37%)
HSB
hsb(15, 47%, 48%)
CMYK
cmyk(0%, 35%, 47%, 52%)
Oklch
oklch(47.2% 0.063 38.8)

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

#D3594E

Crimson · Tomato · Passion Red

HEX
#D3594E
RGB
rgb(211, 89, 78)
HSL
hsl(5, 60%, 57%)
HSB
hsb(5, 63%, 83%)
CMYK
cmyk(0%, 58%, 63%, 17%)
Oklch
oklch(61.8% 0.157 27.7)

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

#B28C83

Peach Pink · DarkGray · Coral Red

HEX
#B28C83
RGB
rgb(178, 140, 131)
HSL
hsl(11, 23%, 61%)
HSB
hsb(11, 26%, 70%)
CMYK
cmyk(0%, 21%, 26%, 30%)
Oklch
oklch(67.3% 0.048 33.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#8DAA98

Celadon · DarkSeaGreen · Apple Green

HEX
#8DAA98
RGB
rgb(141, 170, 152)
HSL
hsl(143, 15%, 61%)
HSB
hsb(143, 17%, 67%)
CMYK
cmyk(17%, 0%, 11%, 33%)
Oklch
oklch(71.1% 0.041 157.9)

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

#D4D996

Fresh Green · Khaki · Sunflower

HEX
#D4D996
RGB
rgb(212, 217, 150)
HSL
hsl(64, 47%, 72%)
HSB
hsb(64, 31%, 85%)
CMYK
cmyk(2%, 0%, 31%, 15%)
Oklch
oklch(86.6% 0.087 111.7)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7A4F41
426D7B

Analogous

7B4250
7A4F41
7B6D42

Triadic

7A4F41
427B50
50427B

Split-Comp.

7A4F41
427B6D
42507B

Tetradic

7A4F41
507B42
426D7B
6D427B

Contrast Matrix WCAG 2.1 Contrast

7A4F41
D3594E
B28C83
8DAA98
D4D996
—
1.8
Fail
2.3
Fail
2.8
Fail
4.7
AA
1.8
Fail
—
1.3
Fail
1.6
Fail
2.7
Fail
2.3
Fail
1.3
Fail
—
1.2
Fail
2.0
Fail
2.8
Fail
1.6
Fail
1.2
Fail
—
1.7
Fail
4.7
AA
2.7
Fail
2.0
Fail
1.7
Fail
—
White BG
6.9AA
4.0AA Large
3.0AA Large
2.5Fail
1.5Fail
Black BG
3.0AA Large
5.3AA
7.0AA
8.3AAA
14.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

676744
9E9D51
A2A185
9A9A9C
D6D6A6

Deuteranopia

6A6D45
A5AE51
A4A786
98969D
D6D5AA

Tritanopia

784748
CD5353
B08787
8EA0A1
D4B3B6

Achromatopsia

5A5A5A
7C7C7C
969696
9F9F9F
D0D0D0

Shades & Tints Shades & Tints

#7A4F41

Dark
Light

#D3594E

Dark
Light

#B28C83

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7a4f41;
  --color-2: #d3594e;
  --color-3: #b28c83;
  --color-4: #8daa98;
  --color-5: #d4d996;
}

SCSS

$color-1: #7a4f41;
$color-2: #d3594e;
$color-3: #b28c83;
$color-4: #8daa98;
$color-5: #d4d996;

TAILWIND

colors: {
  'brand-1': '#7a4f41',
  'brand-2': '#d3594e',
  'brand-3': '#b28c83',
  'brand-4': '#8daa98',
  'brand-5': '#d4d996',
}

RGB Array

[122, 79, 65], [211, 89, 78], [178, 140, 131], [141, 170, 152], [212, 217, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7A4F41, #D3594E, #B28C83, #8DAA98, #D4D996 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: #7a4f41; --color-2: #d3594e; --color-3: #b28c83; --color-4: #8daa98; --color-5: #d4d996. 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