← Back to Editor

#8D3D61 · #9D7E79 · #BBBA82 · #D6E384 · #D9D336

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

#8D3D61

Dark Violet · DimGray · Camellia

HEX
#8D3D61
RGB
rgb(141, 61, 97)
HSL
hsl(333, 40%, 40%)
HSB
hsb(333, 57%, 55%)
CMYK
cmyk(0%, 57%, 31%, 45%)
Oklch
oklch(47.7% 0.116 354.2)

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

#9D7E79

Crimson · Gray · Passion Red

HEX
#9D7E79
RGB
rgb(157, 126, 121)
HSL
hsl(8, 16%, 55%)
HSB
hsb(8, 23%, 62%)
CMYK
cmyk(0%, 20%, 23%, 38%)
Oklch
oklch(62.1% 0.039 28.9)

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

#BBBA82

Fresh Green · Tan · Sunflower

HEX
#BBBA82
RGB
rgb(187, 186, 130)
HSL
hsl(59, 30%, 62%)
HSB
hsb(59, 30%, 73%)
CMYK
cmyk(0%, 1%, 30%, 27%)
Oklch
oklch(77.6% 0.075 107.2)

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

#D6E384

Fresh Green · Khaki · Sunflower

HEX
#D6E384
RGB
rgb(214, 227, 132)
HSL
hsl(68, 63%, 70%)
HSB
hsb(68, 42%, 89%)
CMYK
cmyk(6%, 0%, 42%, 11%)
Oklch
oklch(88.5% 0.120 115.3)

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

#D9D336

Autumn Sage · GoldenRod · Sunflower

HEX
#D9D336
RGB
rgb(217, 211, 54)
HSL
hsl(58, 68%, 53%)
HSB
hsb(58, 75%, 85%)
CMYK
cmyk(0%, 3%, 75%, 15%)
Oklch
oklch(84.6% 0.167 107.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8D3D61
3D8F6A

Analogous

8F3D8B
8D3D61
8F413D

Triadic

8D3D61
628F3D
3D628F

Split-Comp.

8D3D61
3D8F41
3D8B8F

Tetradic

8D3D61
8B8F3D
3D8F6A
413D8F

Contrast Matrix WCAG 2.1 Contrast

8D3D61
9D7E79
BBBA82
D6E384
D9D336
—
1.9
Fail
3.5
AA Large
5.1
AA
4.5
AA Large
1.9
Fail
—
1.8
Fail
2.7
Fail
2.3
Fail
3.5
AA Large
1.8
Fail
—
1.5
Fail
1.3
Fail
5.1
AA
2.7
Fail
1.5
Fail
—
1.1
Fail
4.5
AA Large
2.3
Fail
1.3
Fail
1.1
Fail
—
White BG
7.1AAA
3.7AA Large
2.0Fail
1.4Fail
1.6Fail
Black BG
3.0Fail
5.7AA
10.5AAA
15.2AAA
13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6A6A58
908F7A
BBBB90
DCDC9B
D6D65C

Deuteranopia

6F7556
91947A
BBBB93
DBDAA1
D7D765

Tritanopia

895150
9B7B7B
BB9A9D
D7ADB1
D97A81

Achromatopsia

595959
878787
B4B4B4
D4D4D4
C3C3C3

Shades & Tints Shades & Tints

#8D3D61

Dark
Light

#9D7E79

Dark
Light

#BBBA82

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8d3d61;
  --color-2: #9d7e79;
  --color-3: #bbba82;
  --color-4: #d6e384;
  --color-5: #d9d336;
}

SCSS

$color-1: #8d3d61;
$color-2: #9d7e79;
$color-3: #bbba82;
$color-4: #d6e384;
$color-5: #d9d336;

TAILWIND

colors: {
  'brand-1': '#8d3d61',
  'brand-2': '#9d7e79',
  'brand-3': '#bbba82',
  'brand-4': '#d6e384',
  'brand-5': '#d9d336',
}

RGB Array

[141, 61, 97], [157, 126, 121], [187, 186, 130], [214, 227, 132], [217, 211, 54]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8D3D61, #9D7E79, #BBBA82, #D6E384, #D9D336 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: #8d3d61; --color-2: #9d7e79; --color-3: #bbba82; --color-4: #d6e384; --color-5: #d9d336. 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