#3B8E7E + #5B6E6E + #7C4F5D + #9C2F4D + #BC0F3C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3B8E7E

Mineral Blue · MediumSeaGreen · Mint Ice

HEX

#3B8E7E

RGB

rgb(59, 142, 126)

HSL

hsl(168, 41%, 39%)

HSB

hsb(168, 58%, 56%)

CMYK

cmyk(58%, 0%, 11%, 44%)

Oklch

oklch(59.1% 0.084 178.5)

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

#5B6E6E

Slate Blue · DimGray · Charcoal

HEX

#5B6E6E

RGB

rgb(91, 110, 110)

HSL

hsl(180, 9%, 39%)

HSB

hsb(180, 17%, 43%)

CMYK

cmyk(17%, 0%, 0%, 57%)

Oklch

oklch(52.3% 0.023 196.5)

Traditional「Slate Blue」· Paint「Charcoal」· Creative Midnight Shadow

#7C4F5D

Dark Violet · DimGray · Camellia

HEX

#7C4F5D

RGB

rgb(124, 79, 93)

HSL

hsl(341, 22%, 40%)

HSB

hsb(341, 36%, 49%)

CMYK

cmyk(0%, 36%, 25%, 51%)

Oklch

oklch(48.2% 0.063 359.6)

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

#9C2F4D

Dark Violet · Brown · Camellia

HEX

#9C2F4D

RGB

rgb(156, 47, 77)

HSL

hsl(343, 54%, 40%)

HSB

hsb(343, 70%, 61%)

CMYK

cmyk(0%, 70%, 51%, 39%)

Oklch

oklch(47.7% 0.145 8.0)

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

#BC0F3C

Dark Violet · Crimson · Camellia

HEX

#BC0F3C

RGB

rgb(188, 15, 60)

HSL

hsl(344, 85%, 40%)

HSB

hsb(344, 92%, 74%)

CMYK

cmyk(0%, 92%, 68%, 26%)

Oklch

oklch(50.9% 0.197 16.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B8E7E

8C3B4B

Analogous

3B8C53

3B8E7E

3B748C

Triadic

3B8E7E

7C3B8C

8C7C3B

Split-Comp.

3B8E7E

8C3B74

8C533B

Tetradic

3B8E7E

533B8C

8C3B4B

748C3B

Contrast Matrix WCAG 2.1 Contrast

3B8E7E	5B6E6E	7C4F5D	9C2F4D	BC0F3C
—	1.4 Fail	1.7 Fail	1.8 Fail	1.6 Fail
1.4 Fail	—	1.2 Fail	1.3 Fail	1.2 Fail
1.7 Fail	1.2 Fail	—	1.1 Fail	1.0 Fail
1.8 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
1.6 Fail	1.2 Fail	1.0 Fail	1.1 Fail	—

White BG

3.9AA Large

5.4AA

6.7AA

7.2AAA

6.4AA

Black BG

5.4AA

3.9AA Large

3.1AA Large

2.9Fail

3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

5F6082

63636E

69685A

6D6C46

717031

Deuteranopia

5A5483

62616E

6B6F59

737B44

7B882F

Tritanopia

3F8586

5C6E6E

7A5756

97403F

B32927

Achromatopsia

737373

686868

5E5E5E

535353

484848

Shades & Tints Shades & Tints

#3B8E7E

Dark

Light

#5B6E6E

Dark

Light

#7C4F5D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b8e7e;
  --color-2: #5b6e6e;
  --color-3: #7c4f5d;
  --color-4: #9c2f4d;
  --color-5: #bc0f3c;
}

SCSS

$color-1: #3b8e7e;
$color-2: #5b6e6e;
$color-3: #7c4f5d;
$color-4: #9c2f4d;
$color-5: #bc0f3c;

TAILWIND

colors: {
  'brand-1': '#3b8e7e',
  'brand-2': '#5b6e6e',
  'brand-3': '#7c4f5d',
  'brand-4': '#9c2f4d',
  'brand-5': '#bc0f3c',
}

RGB Array

[59, 142, 126], [91, 110, 110], [124, 79, 93], [156, 47, 77], [188, 15, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3B8E7E, #5B6E6E, #7C4F5D, #9C2F4D, #BC0F3C 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: #3b8e7e; --color-2: #5b6e6e; --color-3: #7c4f5d; --color-4: #9c2f4d; --color-5: #bc0f3c. 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