#284950 + #1E967B + #4DAA7B + #82CD68 + #BDCE5C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#284950

Slate Blue · DarkSlateGray · Peacock Green

HEX

#284950

RGB

rgb(40, 73, 80)

HSL

hsl(191, 33%, 24%)

HSB

hsb(191, 50%, 31%)

CMYK

cmyk(50%, 9%, 0%, 69%)

Oklch

oklch(38.3% 0.040 212.8)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#1E967B

Mineral Blue · Teal · Mint Ice

HEX

#1E967B

RGB

rgb(30, 150, 123)

HSL

hsl(167, 67%, 35%)

HSB

hsb(167, 80%, 59%)

CMYK

cmyk(80%, 0%, 18%, 41%)

Oklch

oklch(60.4% 0.109 173.0)

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

#4DAA7B

Mineral Blue · MediumSeaGreen · Olive Green

HEX

#4DAA7B

RGB

rgb(77, 170, 123)

HSL

hsl(150, 38%, 48%)

HSB

hsb(150, 55%, 67%)

CMYK

cmyk(55%, 0%, 28%, 33%)

Oklch

oklch(66.9% 0.114 159.0)

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

#82CD68

Celadon · DarkSeaGreen · Apple Green

HEX

#82CD68

RGB

rgb(130, 205, 104)

HSL

hsl(105, 50%, 61%)

HSB

hsb(105, 49%, 80%)

CMYK

cmyk(37%, 0%, 49%, 20%)

Oklch

oklch(77.6% 0.155 138.2)

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

#BDCE5C

Autumn Sage · Tan · Sunflower

HEX

#BDCE5C

RGB

rgb(189, 206, 92)

HSL

hsl(69, 54%, 58%)

HSB

hsb(69, 55%, 81%)

CMYK

cmyk(8%, 0%, 55%, 19%)

Oklch

oklch(81.5% 0.140 116.7)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

284950

513029

Analogous

295145

284950

293651

Triadic

284950

51294A

4A5129

Split-Comp.

284950

512936

514529

Tetradic

284950

452951

513029

365129

Contrast Matrix WCAG 2.1 Contrast

284950	1E967B	4DAA7B	82CD68	BDCE5C
—	2.6 Fail	3.4 AA Large	5.0 AA	5.6 AA
2.6 Fail	—	1.3 Fail	1.9 Fail	2.1 Fail
3.4 AA Large	1.3 Fail	—	1.5 Fail	1.7 Fail
5.0 AA	1.9 Fail	1.5 Fail	—	1.1 Fail
5.6 AA	2.1 Fail	1.7 Fail	1.1 Fail	—

White BG

9.7AAA

3.7AA Large

2.9Fail

1.9Fail

1.7Fail

Black BG

2.2Fail

5.7AA

7.4AAA

10.9AAA

12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

36374E

525382

757686

A2A380

C4C578

Deuteranopia

34324E

4B4283

706989

9E9986

C3C27E

Tritanopia

2A4D4D

248788

528F91

869498

BE8D92

Achromatopsia

404040

6F6F6F

898989

ABABAB

BCBCBC

Shades & Tints Shades & Tints

#284950

Dark

Light

#1E967B

Dark

Light

#4DAA7B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #284950;
  --color-2: #1e967b;
  --color-3: #4daa7b;
  --color-4: #82cd68;
  --color-5: #bdce5c;
}

SCSS

$color-1: #284950;
$color-2: #1e967b;
$color-3: #4daa7b;
$color-4: #82cd68;
$color-5: #bdce5c;

TAILWIND

colors: {
  'brand-1': '#284950',
  'brand-2': '#1e967b',
  'brand-3': '#4daa7b',
  'brand-4': '#82cd68',
  'brand-5': '#bdce5c',
}

RGB Array

[40, 73, 80], [30, 150, 123], [77, 170, 123], [130, 205, 104], [189, 206, 92]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #284950, #1E967B, #4DAA7B, #82CD68, #BDCE5C 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: #284950; --color-2: #1e967b; --color-3: #4daa7b; --color-4: #82cd68; --color-5: #bdce5c. 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