#B1E856 + #67C443 + #118F5F + #2A5866 + #2B3452 · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B1E856

Willow Green · GreenYellow · Apple Green

HEX

#B1E856

RGB

rgb(177, 232, 86)

HSL

hsl(83, 76%, 62%)

HSB

hsb(83, 63%, 91%)

CMYK

cmyk(24%, 0%, 63%, 9%)

Oklch

oklch(86.5% 0.183 127.4)

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

#67C443

Emerald · LimeGreen · Olive Green

HEX

#67C443

RGB

rgb(103, 196, 67)

HSL

hsl(103, 52%, 52%)

HSB

hsb(103, 66%, 77%)

CMYK

cmyk(47%, 0%, 66%, 23%)

Oklch

oklch(73.6% 0.188 138.2)

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

#118F5F

Mineral Blue · SeaGreen · Forest Green

HEX

#118F5F

RGB

rgb(17, 143, 95)

HSL

hsl(157, 79%, 31%)

HSB

hsb(157, 88%, 56%)

CMYK

cmyk(88%, 0%, 34%, 44%)

Oklch

oklch(57.5% 0.126 160.3)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

#2A5866

Slate Blue · DarkSlateGray · Mint Ice

HEX

#2A5866

RGB

rgb(42, 88, 102)

HSL

hsl(194, 42%, 28%)

HSB

hsb(194, 59%, 40%)

CMYK

cmyk(59%, 14%, 0%, 60%)

Oklch

oklch(43.4% 0.055 220.2)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#2B3452

Indigo · DarkSlateGray · Prussian Blue

HEX

#2B3452

RGB

rgb(43, 52, 82)

HSL

hsl(226, 31%, 25%)

HSB

hsb(226, 48%, 32%)

CMYK

cmyk(48%, 37%, 0%, 68%)

Oklch

oklch(33.1% 0.055 270.5)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1E856

8D54E8

Analogous

E8D754

B1E856

66E854

Triadic

B1E856

54AFE8

E854AF

Split-Comp.

B1E856

5466E8

D754E8

Tetradic

B1E856

54E8D7

8D54E8

E85466

Contrast Matrix WCAG 2.1 Contrast

B1E856	67C443	118F5F	2A5866	2B3452
—	1.5 Fail	2.8 Fail	5.4 AA	8.5 AAA
1.5 Fail	—	1.9 Fail	3.6 AA Large	5.6 AA
2.8 Fail	1.9 Fail	—	1.9 Fail	3.0 Fail
5.4 AA	3.6 AA Large	1.9 Fail	—	1.6 Fail
8.5 AAA	5.6 AA	3.0 Fail	1.6 Fail	—

White BG

1.4Fail

2.2Fail

4.1AA Large

7.8AAA

12.2AAA

Black BG

14.5AAA

9.6AAA

5.1AA

2.7Fail

1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C979

8F9062

48496B

3E3E63

2F2F4B

Deuteranopia

C6C282

8A836A

40376D

3B3862

2E2E49

Tritanopia

B4959B

6C7B80

177476

2C605F

2B4544

Achromatopsia

C7C7C7

999999

646464

4C4C4C

353535

Shades & Tints Shades & Tints

#B1E856

Dark

Light

#67C443

Dark

Light

#118F5F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1e856;
  --color-2: #67c443;
  --color-3: #118f5f;
  --color-4: #2a5866;
  --color-5: #2b3452;
}

SCSS

$color-1: #b1e856;
$color-2: #67c443;
$color-3: #118f5f;
$color-4: #2a5866;
$color-5: #2b3452;

TAILWIND

colors: {
  'brand-1': '#b1e856',
  'brand-2': '#67c443',
  'brand-3': '#118f5f',
  'brand-4': '#2a5866',
  'brand-5': '#2b3452',
}

RGB Array

[177, 232, 86], [103, 196, 67], [17, 143, 95], [42, 88, 102], [43, 52, 82]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #B1E856, #67C443, #118F5F, #2A5866, #2B3452 is ideal for: tech websites, dark mode UIs, game UIs. 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: #b1e856; --color-2: #67c443; --color-3: #118f5f; --color-4: #2a5866; --color-5: #2b3452. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 dark-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