← Back to Editor

#BEF788 · #A3BD91 · #888299 · #685469 · #36282F

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#BEF788

Emerald · LightGreen · Apple Green

HEX
#BEF788
RGB
rgb(190, 247, 136)
HSL
hsl(91, 87%, 75%)
HSB
hsb(91, 45%, 97%)
CMYK
cmyk(23%, 0%, 45%, 3%)
Oklch
oklch(91.3% 0.152 131.1)

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

#A3BD91

Celadon · DarkSeaGreen · Apple Green

HEX
#A3BD91
RGB
rgb(163, 189, 145)
HSL
hsl(95, 25%, 65%)
HSB
hsb(95, 23%, 74%)
CMYK
cmyk(14%, 0%, 23%, 26%)
Oklch
oklch(76.7% 0.067 132.7)

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

#888299

Deep Indigo · LightSlateGray · Navy Blue

HEX
#888299
RGB
rgb(136, 130, 153)
HSL
hsl(256, 10%, 55%)
HSB
hsb(256, 15%, 60%)
CMYK
cmyk(11%, 15%, 0%, 40%)
Oklch
oklch(62.0% 0.035 297.3)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#685469

Dark Plum · DimGray · Eggplant

HEX
#685469
RGB
rgb(104, 84, 105)
HSL
hsl(297, 11%, 37%)
HSB
hsb(297, 20%, 41%)
CMYK
cmyk(1%, 20%, 0%, 59%)
Oklch
oklch(47.4% 0.042 324.7)

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

#36282F

Dark Violet · DarkSlateGray · Raspberry

HEX
#36282F
RGB
rgb(54, 40, 47)
HSL
hsl(330, 15%, 18%)
HSB
hsb(330, 26%, 21%)
CMYK
cmyk(0%, 26%, 13%, 79%)
Oklch
oklch(29.6% 0.024 347.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BEF788
C188F7

Analogous

F5F788
BEF788
88F78A

Triadic

BEF788
88BDF7
F788BD

Split-Comp.

BEF788
8A88F7
F788F5

Tetradic

BEF788
88F5F7
C188F7
F78A88

Contrast Matrix WCAG 2.1 Contrast

BEF788
A3BD91
888299
685469
36282F
—
1.6
Fail
3.0
Fail
5.5
AA
11.2
AAA
1.6
Fail
—
1.8
Fail
3.3
AA Large
6.8
AA
3.0
Fail
1.8
Fail
—
1.9
Fail
3.8
AA Large
5.5
AA
3.3
AA Large
1.9
Fail
—
2.0
Fail
11.2
AAA
6.8
AA
3.8
AA Large
2.0
Fail
—
White BG
1.2Fail
2.0Fail
3.7AA Large
6.9AA
14.0AAA
Black BG
16.8AAA
10.2AAA
5.7AA
3.1AA Large
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D7A3
AEAE9C
858593
5F5F64
30302D

Deuteranopia

D3CFA9
ADAB9E
868692
616263
31322D

Tritanopia

C1B8BD
A4A4A6
888F8E
67605F
352C2C

Achromatopsia

D9D9D9
B0B0B0
868686
5C5C5C
2D2D2D

Shades & Tints Shades & Tints

#BEF788

Dark
Light

#A3BD91

Dark
Light

#888299

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bef788;
  --color-2: #a3bd91;
  --color-3: #888299;
  --color-4: #685469;
  --color-5: #36282f;
}

SCSS

$color-1: #bef788;
$color-2: #a3bd91;
$color-3: #888299;
$color-4: #685469;
$color-5: #36282f;

TAILWIND

colors: {
  'brand-1': '#bef788',
  'brand-2': '#a3bd91',
  'brand-3': '#888299',
  'brand-4': '#685469',
  'brand-5': '#36282f',
}

RGB Array

[190, 247, 136], [163, 189, 145], [136, 130, 153], [104, 84, 105], [54, 40, 47]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BEF788, #A3BD91, #888299, #685469, #36282F is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #bef788; --color-2: #a3bd91; --color-3: #888299; --color-4: #685469; --color-5: #36282f. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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. Restrained colors convey professionalism and trust. 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