#4F8073 + #635E58 + #783C3D + #8C1A22 + #37131D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4F8073

Mineral Blue · DimGray · Mint Ice

HEX

#4F8073

RGB

rgb(79, 128, 115)

HSL

hsl(164, 24%, 41%)

HSB

hsb(164, 38%, 50%)

CMYK

cmyk(38%, 0%, 10%, 50%)

Oklch

oklch(56.1% 0.057 175.4)

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

#635E58

Ink Gray · DimGray · Charcoal

HEX

#635E58

RGB

rgb(99, 94, 88)

HSL

hsl(33, 6%, 37%)

HSB

hsb(33, 11%, 39%)

CMYK

cmyk(0%, 5%, 11%, 61%)

Oklch

oklch(48.5% 0.011 72.5)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#783C3D

Crimson · Sienna · Wine Red

HEX

#783C3D

RGB

rgb(120, 60, 61)

HSL

hsl(359, 33%, 35%)

HSB

hsb(359, 50%, 47%)

CMYK

cmyk(0%, 50%, 49%, 53%)

Oklch

oklch(43.3% 0.084 20.1)

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

#8C1A22

Vermilion · Brown · Wine Red

HEX

#8C1A22

RGB

rgb(140, 26, 34)

HSL

hsl(356, 69%, 33%)

HSB

hsb(356, 81%, 55%)

CMYK

cmyk(0%, 81%, 76%, 45%)

Oklch

oklch(41.9% 0.148 23.3)

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

#37131D

Dark Violet · Black · Raspberry

HEX

#37131D

RGB

rgb(55, 19, 29)

HSL

hsl(343, 49%, 15%)

HSB

hsb(343, 65%, 22%)

CMYK

cmyk(0%, 65%, 47%, 78%)

Oklch

oklch(24.7% 0.059 5.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4F8073

824F5D

Analogous

4F825B

4F8073

4F7682

Triadic

4F8073

744F82

82744F

Split-Comp.

4F8073

824F76

825B4F

Tetradic

4F8073

5B4F82

824F5D

76824F

Contrast Matrix WCAG 2.1 Contrast

4F8073	635E58	783C3D	8C1A22	37131D
—	1.4 Fail	1.9 Fail	2.0 Fail	3.7 AA Large
1.4 Fail	—	1.3 Fail	1.4 Fail	2.6 Fail
1.9 Fail	1.3 Fail	—	1.1 Fail	2.0 Fail
2.0 Fail	1.4 Fail	1.1 Fail	—	1.8 Fail
3.7 AA Large	2.6 Fail	2.0 Fail	1.8 Fail	—

White BG

4.5AA Large

6.4AA

8.4AAA

9.2AAA

16.5AAA

Black BG

4.7AA

3.3AA Large

2.5Fail

2.3Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

646576

616159

5E5D3D

5B5A20

27271B

Deuteranopia

615E77

61625A

62663D

616A20

2A2C1A

Tritanopia

517979

635B5B

753D3D

861F1E

351918

Achromatopsia

707070

5F5F5F

4E4E4E

3D3D3D

1F1F1F

Shades & Tints Shades & Tints

#4F8073

Dark

Light

#635E58

Dark

Light

#783C3D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4f8073;
  --color-2: #635e58;
  --color-3: #783c3d;
  --color-4: #8c1a22;
  --color-5: #37131d;
}

SCSS

$color-1: #4f8073;
$color-2: #635e58;
$color-3: #783c3d;
$color-4: #8c1a22;
$color-5: #37131d;

TAILWIND

colors: {
  'brand-1': '#4f8073',
  'brand-2': '#635e58',
  'brand-3': '#783c3d',
  'brand-4': '#8c1a22',
  'brand-5': '#37131d',
}

RGB Array

[79, 128, 115], [99, 94, 88], [120, 60, 61], [140, 26, 34], [55, 19, 29]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4F8073, #635E58, #783C3D, #8C1A22, #37131D 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: #4f8073; --color-2: #635e58; --color-3: #783c3d; --color-4: #8c1a22; --color-5: #37131d. 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