← Back to Editor

#621B3B · #7637A2 · #986E7A · #C5B53C · #B9E724

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

#621B3B

Dark Violet · Brown · Raspberry

HEX
#621B3B
RGB
rgb(98, 27, 59)
HSL
hsl(333, 57%, 25%)
HSB
hsb(333, 72%, 38%)
CMYK
cmyk(0%, 72%, 40%, 62%)
Oklch
oklch(34.7% 0.107 356.5)

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

#7637A2

Dark Plum · DarkSlateBlue · Violet

HEX
#7637A2
RGB
rgb(118, 55, 162)
HSL
hsl(275, 49%, 43%)
HSB
hsb(275, 66%, 64%)
CMYK
cmyk(27%, 66%, 0%, 36%)
Oklch
oklch(47.2% 0.169 308.3)

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

#986E7A

Dark Violet · Gray · Rose Pink

HEX
#986E7A
RGB
rgb(152, 110, 122)
HSL
hsl(343, 17%, 51%)
HSB
hsb(343, 28%, 60%)
CMYK
cmyk(0%, 28%, 20%, 40%)
Oklch
oklch(58.4% 0.056 0.2)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#C5B53C

Autumn Sage · GoldenRod · Honey Gold

HEX
#C5B53C
RGB
rgb(197, 181, 60)
HSL
hsl(53, 54%, 50%)
HSB
hsb(53, 70%, 77%)
CMYK
cmyk(0%, 8%, 70%, 23%)
Oklch
oklch(76.5% 0.138 101.6)

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

#B9E724

Grass Green · GreenYellow · Olive Green

HEX
#B9E724
RGB
rgb(185, 231, 36)
HSL
hsl(74, 80%, 52%)
HSB
hsb(74, 84%, 91%)
CMYK
cmyk(20%, 0%, 84%, 9%)
Oklch
oklch(86.5% 0.205 123.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

621B3B
1B6443

Analogous

641B60
621B3B
641F1B

Triadic

621B3B
3C641B
1B3C64

Split-Comp.

621B3B
1B641F
1B6064

Tetradic

621B3B
60641B
1B6443
1F1B64

Contrast Matrix WCAG 2.1 Contrast

621B3B
7637A2
986E7A
C5B53C
B9E724
—
1.6
Fail
2.8
Fail
5.8
AA
8.3
AAA
1.6
Fail
—
1.7
Fail
3.5
AA Large
5.1
AA
2.8
Fail
1.7
Fail
—
2.1
Fail
3.0
Fail
5.8
AA
3.5
AA Large
2.1
Fail
—
1.4
Fail
8.3
AAA
5.1
AA
3.0
Fail
1.4
Fail
—
White BG
12.1AAA
7.4AAA
4.3AA Large
2.1Fail
1.4Fail
Black BG
1.7Fail
2.8Fail
4.8AA
10.0AAA
14.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

434333
5B5A88
868577
BEBE59
CDCD53

Deuteranopia

474D31
5E6382
888B76
BFC060
CAC75F

Tritanopia

5E2D2C
73746F
967574
C47075
BB7881

Achromatopsia

343434
565656
7C7C7C
ACACAC
C3C3C3

Shades & Tints Shades & Tints

#621B3B

Dark
Light

#7637A2

Dark
Light

#986E7A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #621b3b;
  --color-2: #7637a2;
  --color-3: #986e7a;
  --color-4: #c5b53c;
  --color-5: #b9e724;
}

SCSS

$color-1: #621b3b;
$color-2: #7637a2;
$color-3: #986e7a;
$color-4: #c5b53c;
$color-5: #b9e724;

TAILWIND

colors: {
  'brand-1': '#621b3b',
  'brand-2': '#7637a2',
  'brand-3': '#986e7a',
  'brand-4': '#c5b53c',
  'brand-5': '#b9e724',
}

RGB Array

[98, 27, 59], [118, 55, 162], [152, 110, 122], [197, 181, 60], [185, 231, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #621B3B, #7637A2, #986E7A, #C5B53C, #B9E724 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: #621b3b; --color-2: #7637a2; --color-3: #986e7a; --color-4: #c5b53c; --color-5: #b9e724. 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