#3B6B54 + #345754 + #822C54 + #DE0D36 + #FA481B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3B6B54

Mineral Blue · DarkSlateGray · Forest Green

HEX

#3B6B54

RGB

rgb(59, 107, 84)

HSL

hsl(151, 29%, 33%)

HSB

hsb(151, 45%, 42%)

CMYK

cmyk(45%, 0%, 21%, 58%)

Oklch

oklch(48.6% 0.065 161.9)

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

#345754

Mineral Blue · DarkSlateGray · Mint Ice

HEX

#345754

RGB

rgb(52, 87, 84)

HSL

hsl(175, 25%, 27%)

HSB

hsb(175, 40%, 34%)

CMYK

cmyk(40%, 0%, 3%, 66%)

Oklch

oklch(42.9% 0.041 188.8)

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

#822C54

Dark Violet · Brown · Camellia

HEX

#822C54

RGB

rgb(130, 44, 84)

HSL

hsl(332, 49%, 34%)

HSB

hsb(332, 66%, 51%)

CMYK

cmyk(0%, 66%, 35%, 49%)

Oklch

oklch(43.2% 0.125 354.8)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#DE0D36

Vermilion · Crimson · Passion Red

HEX

#DE0D36

RGB

rgb(222, 13, 54)

HSL

hsl(348, 89%, 46%)

HSB

hsb(348, 94%, 87%)

CMYK

cmyk(0%, 94%, 76%, 13%)

Oklch

oklch(57.2% 0.226 21.5)

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

#FA481B

Vermilion · OrangeRed · Passion Red

HEX

#FA481B

RGB

rgb(250, 72, 27)

HSL

hsl(12, 96%, 54%)

HSB

hsb(12, 89%, 98%)

CMYK

cmyk(0%, 71%, 89%, 2%)

Oklch

oklch(65.5% 0.221 34.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B6B54

6D3C53

Analogous

3C6D3D

3B6B54

3C6C6D

Triadic

3B6B54

553C6D

6D553C

Split-Comp.

3B6B54

6D3C6C

6D3D3C

Tetradic

3B6B54

3D3C6D

6D3C53

6C6D3C

Contrast Matrix WCAG 2.1 Contrast

3B6B54	345754	822C54	DE0D36	FA481B
—	1.3 Fail	1.4 Fail	1.2 Fail	1.8 Fail
1.3 Fail	—	1.1 Fail	1.6 Fail	2.3 Fail
1.4 Fail	1.1 Fail	—	1.7 Fail	2.5 Fail
1.2 Fail	1.6 Fail	1.7 Fail	—	1.4 Fail
1.8 Fail	2.3 Fail	2.5 Fail	1.4 Fail	—

White BG

6.1AA

8.0AAA

8.6AAA

5.0AA

3.5AA Large

Black BG

3.4AA Large

2.6Fail

2.4Fail

4.2AA Large

6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

50505A

434355

5D5C4A

84822C

ADAB26

Deuteranopia

4D495B

413F55

626848

909F2A

B7C529

Tritanopia

3D5E5F

365555

7E4341

D42423

F12E30

Achromatopsia

5A5A5A

4C4C4C

4A4A4A

505050

787878

Shades & Tints Shades & Tints

#3B6B54

Dark

Light

#345754

Dark

Light

#822C54

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b6b54;
  --color-2: #345754;
  --color-3: #822c54;
  --color-4: #de0d36;
  --color-5: #fa481b;
}

SCSS

$color-1: #3b6b54;
$color-2: #345754;
$color-3: #822c54;
$color-4: #de0d36;
$color-5: #fa481b;

TAILWIND

colors: {
  'brand-1': '#3b6b54',
  'brand-2': '#345754',
  'brand-3': '#822c54',
  'brand-4': '#de0d36',
  'brand-5': '#fa481b',
}

RGB Array

[59, 107, 84], [52, 87, 84], [130, 44, 84], [222, 13, 54], [250, 72, 27]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3B6B54, #345754, #822C54, #DE0D36, #FA481B 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: #3b6b54; --color-2: #345754; --color-3: #822c54; --color-4: #de0d36; --color-5: #fa481b. 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