← Back to Editor

#7D3E52 · #B1696C · #BFA46C · #B5B85C · #D2D65E

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

#7D3E52

Dark Violet · DimGray · Camellia

HEX
#7D3E52
RGB
rgb(125, 62, 82)
HSL
hsl(341, 34%, 37%)
HSB
hsb(341, 50%, 49%)
CMYK
cmyk(0%, 50%, 34%, 51%)
Oklch
oklch(45.0% 0.090 1.2)

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

#B1696C

Crimson · Gray · Passion Red

HEX
#B1696C
RGB
rgb(177, 105, 108)
HSL
hsl(357, 32%, 55%)
HSB
hsb(357, 41%, 69%)
CMYK
cmyk(0%, 41%, 39%, 31%)
Oklch
oklch(60.1% 0.092 17.5)

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

#BFA46C

Ginger · Tan · Sunflower

HEX
#BFA46C
RGB
rgb(191, 164, 108)
HSL
hsl(40, 39%, 59%)
HSB
hsb(40, 43%, 75%)
CMYK
cmyk(0%, 14%, 43%, 25%)
Oklch
oklch(73.0% 0.080 84.8)

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

#B5B85C

Autumn Sage · Tan · Sunflower

HEX
#B5B85C
RGB
rgb(181, 184, 92)
HSL
hsl(62, 39%, 54%)
HSB
hsb(62, 50%, 72%)
CMYK
cmyk(2%, 0%, 50%, 28%)
Oklch
oklch(76.1% 0.116 110.5)

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

#D2D65E

Autumn Sage · BurlyWood · Sunflower

HEX
#D2D65E
RGB
rgb(210, 214, 94)
HSL
hsl(62, 59%, 60%)
HSB
hsb(62, 56%, 84%)
CMYK
cmyk(2%, 0%, 56%, 16%)
Oklch
oklch(85.0% 0.143 110.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7D3E52
3E7E6A

Analogous

7E3E73
7D3E52
7E4A3E

Triadic

7D3E52
537E3E
3E537E

Split-Comp.

7D3E52
3E7E4A
3E737E

Tetradic

7D3E52
737E3E
3E7E6A
4A3E7E

Contrast Matrix WCAG 2.1 Contrast

7D3E52
B1696C
BFA46C
B5B85C
D2D65E
—
1.9
Fail
3.3
AA Large
3.7
AA Large
5.0
AA
1.9
Fail
—
1.7
Fail
2.0
Fail
2.6
Fail
3.3
AA Large
1.7
Fail
—
1.1
Fail
1.5
Fail
3.7
AA Large
2.0
Fail
1.1
Fail
—
1.4
Fail
5.0
AA
2.6
Fail
1.5
Fail
1.4
Fail
—
White BG
7.8AAA
4.1AA Large
2.4Fail
2.1Fail
1.6Fail
Black BG
2.7Fail
5.1AA
8.7AAA
10.0AAA
13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

62614D
92916B
B3B37A
B6B672
D4D47B

Deuteranopia

656A4C
969B6B
B5B77D
B6B678
D4D382

Tritanopia

7A4949
AD6B6B
BE8487
B58488
D29297

Achromatopsia

535353
7F7F7F
A6A6A6
ADADAD
C7C7C7

Shades & Tints Shades & Tints

#7D3E52

Dark
Light

#B1696C

Dark
Light

#BFA46C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7d3e52;
  --color-2: #b1696c;
  --color-3: #bfa46c;
  --color-4: #b5b85c;
  --color-5: #d2d65e;
}

SCSS

$color-1: #7d3e52;
$color-2: #b1696c;
$color-3: #bfa46c;
$color-4: #b5b85c;
$color-5: #d2d65e;

TAILWIND

colors: {
  'brand-1': '#7d3e52',
  'brand-2': '#b1696c',
  'brand-3': '#bfa46c',
  'brand-4': '#b5b85c',
  'brand-5': '#d2d65e',
}

RGB Array

[125, 62, 82], [177, 105, 108], [191, 164, 108], [181, 184, 92], [210, 214, 94]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7D3E52, #B1696C, #BFA46C, #B5B85C, #D2D65E 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: #7d3e52; --color-2: #b1696c; --color-3: #bfa46c; --color-4: #b5b85c; --color-5: #d2d65e. 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