#9BB347 + #7D9918 + #176B85 + #283D61 + #2E1C3D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9BB347

Grass Green · DarkSeaGreen · Olive Green

HEX

#9BB347

RGB

rgb(155, 179, 71)

HSL

hsl(73, 43%, 49%)

HSB

hsb(73, 60%, 70%)

CMYK

cmyk(13%, 0%, 60%, 30%)

Oklch

oklch(72.6% 0.137 120.5)

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

#7D9918

Grass Green · Olive · Forest Green

HEX

#7D9918

RGB

rgb(125, 153, 24)

HSL

hsl(73, 73%, 35%)

HSB

hsb(73, 84%, 60%)

CMYK

cmyk(18%, 0%, 84%, 40%)

Oklch

oklch(63.9% 0.148 122.1)

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

#176B85

Lake Blue · Teal · Mint Ice

HEX

#176B85

RGB

rgb(23, 107, 133)

HSL

hsl(194, 71%, 31%)

HSB

hsb(194, 83%, 52%)

CMYK

cmyk(83%, 20%, 0%, 48%)

Oklch

oklch(49.3% 0.085 224.2)

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

#283D61

Indigo · DarkSlateGray · Prussian Blue

HEX

#283D61

RGB

rgb(40, 61, 97)

HSL

hsl(218, 42%, 27%)

HSB

hsb(218, 59%, 38%)

CMYK

cmyk(59%, 37%, 0%, 62%)

Oklch

oklch(36.1% 0.068 260.7)

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

#2E1C3D

Dark Plum · DarkSlateGray · Dark Purple

HEX

#2E1C3D

RGB

rgb(46, 28, 61)

HSL

hsl(273, 37%, 17%)

HSB

hsb(273, 54%, 24%)

CMYK

cmyk(25%, 54%, 0%, 76%)

Oklch

oklch(26.6% 0.063 307.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9BB347

5F47B3

Analogous

B39447

9BB347

66B347

Triadic

9BB347

479BB3

B3479B

Split-Comp.

9BB347

4766B3

9447B3

Tetradic

9BB347

47B394

5F47B3

B34766

Contrast Matrix WCAG 2.1 Contrast

9BB347	7D9918	176B85	283D61	2E1C3D
—	1.4 Fail	2.6 Fail	4.6 AA	6.6 AA
1.4 Fail	—	1.9 Fail	3.3 AA Large	4.8 AA
2.6 Fail	1.9 Fail	—	1.8 Fail	2.6 Fail
4.6 AA	3.3 AA Large	1.8 Fail	—	1.4 Fail
6.6 AA	4.8 AA	2.6 Fail	1.4 Fail	—

White BG

2.4Fail

3.3AA Large

6.0AA

10.9AAA

15.6AAA

Black BG

8.9AAA

6.4AA

3.5AA Large

1.9Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A5A661

898937

3B3C7F

313158

262635

Deuteranopia

A4A267

88853F

37307D

302E56

272933

Tritanopia

9C767A

7E5055

1B7A79

295150

2D2F2D

Achromatopsia

A0A0A0

828282

555555

3B3B3B

252525

Shades & Tints Shades & Tints

#9BB347

Dark

Light

#7D9918

Dark

Light

#176B85

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9bb347;
  --color-2: #7d9918;
  --color-3: #176b85;
  --color-4: #283d61;
  --color-5: #2e1c3d;
}

SCSS

$color-1: #9bb347;
$color-2: #7d9918;
$color-3: #176b85;
$color-4: #283d61;
$color-5: #2e1c3d;

TAILWIND

colors: {
  'brand-1': '#9bb347',
  'brand-2': '#7d9918',
  'brand-3': '#176b85',
  'brand-4': '#283d61',
  'brand-5': '#2e1c3d',
}

RGB Array

[155, 179, 71], [125, 153, 24], [23, 107, 133], [40, 61, 97], [46, 28, 61]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9BB347, #7D9918, #176B85, #283D61, #2E1C3D 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: #9bb347; --color-2: #7d9918; --color-3: #176b85; --color-4: #283d61; --color-5: #2e1c3d. 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 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