#284E4F + #1C8571 + #B1B354 + #B87C4B + #523531 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#284E4F

Slate Blue · DarkSlateGray · Peacock Green

HEX

#284E4F

RGB

rgb(40, 78, 79)

HSL

hsl(182, 33%, 23%)

HSB

hsb(182, 49%, 31%)

CMYK

cmyk(49%, 1%, 0%, 69%)

Oklch

oklch(39.6% 0.043 197.8)

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

#1C8571

Mineral Blue · Teal · Mint Ice

HEX

#1C8571

RGB

rgb(28, 133, 113)

HSL

hsl(169, 65%, 32%)

HSB

hsb(169, 79%, 52%)

CMYK

cmyk(79%, 0%, 15%, 48%)

Oklch

oklch(55.5% 0.096 176.2)

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

#B1B354

Autumn Sage · Tan · Sunflower

HEX

#B1B354

RGB

rgb(177, 179, 84)

HSL

hsl(61, 38%, 52%)

HSB

hsb(61, 53%, 70%)

CMYK

cmyk(1%, 0%, 53%, 30%)

Oklch

oklch(74.5% 0.119 110.1)

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

#B87C4B

Tangerine · Chocolate · Warm Sun

HEX

#B87C4B

RGB

rgb(184, 124, 75)

HSL

hsl(27, 43%, 51%)

HSB

hsb(27, 59%, 72%)

CMYK

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

Oklch

oklch(63.8% 0.099 58.9)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#523531

Crimson · DarkSlateGray · Wine Red

HEX

#523531

RGB

rgb(82, 53, 49)

HSL

hsl(7, 25%, 26%)

HSB

hsb(7, 40%, 32%)

CMYK

cmyk(0%, 35%, 40%, 68%)

Oklch

oklch(36.2% 0.043 28.0)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

284E4F

4E2927

Analogous

274E3C

284E4F

27394E

Triadic

284E4F

4E274D

4D4E27

Split-Comp.

284E4F

4E2739

4E3C27

Tetradic

284E4F

3C274E

4E2927

394E27

Contrast Matrix WCAG 2.1 Contrast

284E4F	1C8571	B1B354	B87C4B	523531
—	2.0 Fail	4.1 AA Large	2.6 Fail	1.2 Fail
2.0 Fail	—	2.0 Fail	1.3 Fail	2.4 Fail
4.1 AA Large	2.0 Fail	—	1.6 Fail	4.9 AA
2.6 Fail	1.3 Fail	1.6 Fail	—	3.1 AA Large
1.2 Fail	2.4 Fail	4.9 AA	3.1 AA Large	—

White BG

9.2AAA

4.5AA

2.2Fail

3.5AA Large

11.0AAA

Black BG

2.3Fail

4.6AA

9.4AAA

6.0AA

1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

38394F

494A76

B2B26B

9E9D57

454532

Deuteranopia

36334F

433C77

B2B271

A2A65A

474932

Tritanopia

2A4F4F

217A7B

B17D81

B56062

513333

Achromatopsia

434343

636363

A8A8A8

888888

3D3D3D

Shades & Tints Shades & Tints

#284E4F

Dark

Light

#1C8571

Dark

Light

#B1B354

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #284e4f;
  --color-2: #1c8571;
  --color-3: #b1b354;
  --color-4: #b87c4b;
  --color-5: #523531;
}

SCSS

$color-1: #284e4f;
$color-2: #1c8571;
$color-3: #b1b354;
$color-4: #b87c4b;
$color-5: #523531;

TAILWIND

colors: {
  'brand-1': '#284e4f',
  'brand-2': '#1c8571',
  'brand-3': '#b1b354',
  'brand-4': '#b87c4b',
  'brand-5': '#523531',
}

RGB Array

[40, 78, 79], [28, 133, 113], [177, 179, 84], [184, 124, 75], [82, 53, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #284E4F, #1C8571, #B1B354, #B87C4B, #523531 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: #284e4f; --color-2: #1c8571; --color-3: #b1b354; --color-4: #b87c4b; --color-5: #523531. 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