← Back to Editor

#B7D527 · #999953 · #7B5D7F · #B4628F · #EC679F

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

#B7D527

Grass Green · GreenYellow · Olive Green

HEX
#B7D527
RGB
rgb(183, 213, 39)
HSL
hsl(70, 69%, 49%)
HSB
hsb(70, 82%, 84%)
CMYK
cmyk(14%, 0%, 82%, 16%)
Oklch
oklch(82.3% 0.185 119.7)

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

#999953

Autumn Sage · Gray · Honey Gold

HEX
#999953
RGB
rgb(153, 153, 83)
HSL
hsl(60, 30%, 46%)
HSB
hsb(60, 46%, 60%)
CMYK
cmyk(0%, 0%, 46%, 40%)
Oklch
oklch(66.7% 0.093 108.7)

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

#7B5D7F

Dark Plum · DimGray · Violet

HEX
#7B5D7F
RGB
rgb(123, 93, 127)
HSL
hsl(293, 15%, 43%)
HSB
hsb(293, 27%, 50%)
CMYK
cmyk(3%, 27%, 0%, 50%)
Oklch
oklch(52.1% 0.064 322.5)

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

#B4628F

Rose Purple · Gray · Rose Pink

HEX
#B4628F
RGB
rgb(180, 98, 143)
HSL
hsl(327, 35%, 55%)
HSB
hsb(327, 46%, 71%)
CMYK
cmyk(0%, 46%, 21%, 29%)
Oklch
oklch(60.4% 0.119 347.2)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

#EC679F

Rouge · LightCoral · Rose Pink

HEX
#EC679F
RGB
rgb(236, 103, 159)
HSL
hsl(335, 78%, 66%)
HSB
hsb(335, 56%, 93%)
CMYK
cmyk(0%, 56%, 33%, 7%)
Oklch
oklch(69.2% 0.173 356.2)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7D527
4327D3

Analogous

D39A27
B7D527
60D327

Triadic

B7D527
27B6D3
D327B6

Split-Comp.

B7D527
2760D3
9A27D3

Tetradic

B7D527
27D39A
4327D3
D32760

Contrast Matrix WCAG 2.1 Contrast

B7D527
999953
7B5D7F
B4628F
EC679F
—
1.8
Fail
3.4
AA Large
2.5
Fail
1.8
Fail
1.8
Fail
—
1.9
Fail
1.4
Fail
1.0
Fail
3.4
AA Large
1.9
Fail
—
1.4
Fail
1.9
Fail
2.5
Fail
1.4
Fail
1.4
Fail
—
1.4
Fail
1.8
Fail
1.0
Fail
1.9
Fail
1.4
Fail
—
White BG
1.7Fail
3.0Fail
5.7AA
4.1AA Large
3.0Fail
Black BG
12.6AAA
7.0AAA
3.7AA Large
5.1AA
7.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C451
999964
6E6E77
909084
B2B191

Deuteranopia

C2C05B
999968
707275
959B82
BAC48E

Tritanopia

B9727A
997174
7A706F
B07C7A
E58784

Achromatopsia

B8B8B8
919191
6A6A6A
808080
959595

Shades & Tints Shades & Tints

#B7D527

Dark
Light

#999953

Dark
Light

#7B5D7F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7d527;
  --color-2: #999953;
  --color-3: #7b5d7f;
  --color-4: #b4628f;
  --color-5: #ec679f;
}

SCSS

$color-1: #b7d527;
$color-2: #999953;
$color-3: #7b5d7f;
$color-4: #b4628f;
$color-5: #ec679f;

TAILWIND

colors: {
  'brand-1': '#b7d527',
  'brand-2': '#999953',
  'brand-3': '#7b5d7f',
  'brand-4': '#b4628f',
  'brand-5': '#ec679f',
}

RGB Array

[183, 213, 39], [153, 153, 83], [123, 93, 127], [180, 98, 143], [236, 103, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B7D527, #999953, #7B5D7F, #B4628F, #EC679F 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: #b7d527; --color-2: #999953; --color-3: #7b5d7f; --color-4: #b4628f; --color-5: #ec679f. 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