#3D274B + #165F65 + #B4BB6D + #D79620 + #BD2821 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3D274B

Dark Plum · DarkSlateGray · Eggplant

HEX

#3D274B

RGB

rgb(61, 39, 75)

HSL

hsl(277, 32%, 22%)

HSB

hsb(277, 48%, 29%)

CMYK

cmyk(19%, 48%, 0%, 71%)

Oklch

oklch(31.6% 0.068 311.2)

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

#165F65

Lake Blue · DarkSlateGray · Peacock Green

HEX

#165F65

RGB

rgb(22, 95, 101)

HSL

hsl(185, 64%, 24%)

HSB

hsb(185, 78%, 40%)

CMYK

cmyk(78%, 6%, 0%, 60%)

Oklch

oklch(44.6% 0.069 203.2)

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

#B4BB6D

Autumn Sage · Tan · Sunflower

HEX

#B4BB6D

RGB

rgb(180, 187, 109)

HSL

hsl(65, 36%, 58%)

HSB

hsb(65, 42%, 73%)

CMYK

cmyk(4%, 0%, 42%, 27%)

Oklch

oklch(76.9% 0.102 113.0)

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

#D79620

Ochre · GoldenRod · Amber Brown

HEX

#D79620

RGB

rgb(215, 150, 32)

HSL

hsl(39, 74%, 48%)

HSB

hsb(39, 85%, 84%)

CMYK

cmyk(0%, 30%, 85%, 16%)

Oklch

oklch(71.9% 0.143 75.9)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#BD2821

Vermilion · FireBrick · Passion Red

HEX

#BD2821

RGB

rgb(189, 40, 33)

HSL

hsl(3, 70%, 44%)

HSB

hsb(3, 83%, 74%)

CMYK

cmyk(0%, 79%, 83%, 26%)

Oklch

oklch(52.1% 0.186 28.4)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D274B

344A26

Analogous

2A264A

3D274B

4A2646

Triadic

3D274B

4A3C26

264A3C

Split-Comp.

3D274B

464A26

264A2A

Tetradic

3D274B

4A2A26

344A26

26464A

Contrast Matrix WCAG 2.1 Contrast

3D274B	165F65	B4BB6D	D79620	BD2821
—	1.8 Fail	6.5 AA	5.2 AA	2.2 Fail
1.8 Fail	—	3.6 AA Large	2.9 Fail	1.2 Fail
6.5 AA	3.6 AA Large	—	1.2 Fail	2.9 Fail
5.2 AA	2.9 Fail	1.2 Fail	—	2.4 Fail
2.2 Fail	1.2 Fail	2.9 Fail	2.4 Fail	—

White BG

13.2AAA

7.3AAA

2.0Fail

2.5Fail

6.0AA

Black BG

1.6Fail

2.9Fail

10.3AAA

8.3AAA

3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

333342

363664

B7B780

BBBA3D

7C7B23

Deuteranopia

353640

312C63

B7B684

BFC443

859023

Tritanopia

3C3B3A

1A6262

B48F92

D45358

B62424

Achromatopsia

323232

4A4A4A

B0B0B0

9C9C9C

545454

Shades & Tints Shades & Tints

#3D274B

Dark

Light

#165F65

Dark

Light

#B4BB6D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d274b;
  --color-2: #165f65;
  --color-3: #b4bb6d;
  --color-4: #d79620;
  --color-5: #bd2821;
}

SCSS

$color-1: #3d274b;
$color-2: #165f65;
$color-3: #b4bb6d;
$color-4: #d79620;
$color-5: #bd2821;

TAILWIND

colors: {
  'brand-1': '#3d274b',
  'brand-2': '#165f65',
  'brand-3': '#b4bb6d',
  'brand-4': '#d79620',
  'brand-5': '#bd2821',
}

RGB Array

[61, 39, 75], [22, 95, 101], [180, 187, 109], [215, 150, 32], [189, 40, 33]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3D274B, #165F65, #B4BB6D, #D79620, #BD2821 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: #3d274b; --color-2: #165f65; --color-3: #b4bb6d; --color-4: #d79620; --color-5: #bd2821. 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