← Back to Editor

#3D574C · #F53F02 · #1F3538 · #435250 · #8A9E99

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#3D574C

Mineral Blue · DarkSlateGray · Forest Green

HEX
#3D574C
RGB
rgb(61, 87, 76)
HSL
hsl(155, 18%, 29%)
HSB
hsb(155, 30%, 34%)
CMYK
cmyk(30%, 0%, 13%, 66%)
Oklch
oklch(43.2% 0.036 166.7)

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

#F53F02

Tangerine · OrangeRed · Amber Brown

HEX
#F53F02
RGB
rgb(245, 63, 2)
HSL
hsl(15, 98%, 48%)
HSB
hsb(15, 99%, 96%)
CMYK
cmyk(0%, 74%, 99%, 4%)
Oklch
oklch(63.8% 0.224 34.7)

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

#1F3538

Slate Blue · DarkSlateGray · Peacock Green

HEX
#1F3538
RGB
rgb(31, 53, 56)
HSL
hsl(187, 29%, 17%)
HSB
hsb(187, 45%, 22%)
CMYK
cmyk(45%, 5%, 0%, 78%)
Oklch
oklch(31.2% 0.028 206.7)

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

#435250

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#435250
RGB
rgb(67, 82, 80)
HSL
hsl(172, 10%, 29%)
HSB
hsb(172, 18%, 32%)
CMYK
cmyk(18%, 0%, 2%, 68%)
Oklch
oklch(42.5% 0.019 186.6)

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

#8A9E99

Mineral Blue · LightSlateGray · Silver Sand

HEX
#8A9E99
RGB
rgb(138, 158, 153)
HSL
hsl(165, 9%, 58%)
HSB
hsb(165, 13%, 62%)
CMYK
cmyk(13%, 0%, 3%, 38%)
Oklch
oklch(68.2% 0.024 178.8)

Traditional「Mineral Blue」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D574C
573D48

Analogous

3D573F
3D574C
3D5557

Triadic

3D574C
4C3D57
574C3D

Split-Comp.

3D574C
573D55
573F3D

Tetradic

3D574C
3F3D57
573D48
55573D

Contrast Matrix WCAG 2.1 Contrast

3D574C
F53F02
1F3538
435250
8A9E99
—
2.1
Fail
1.6
Fail
1.0
Fail
2.8
Fail
2.1
Fail
—
3.4
AA Large
2.2
Fail
1.3
Fail
1.6
Fail
3.4
AA Large
—
1.6
Fail
4.6
AA
1.0
Fail
2.2
Fail
1.6
Fail
—
2.9
Fail
2.8
Fail
1.3
Fail
4.6
AA
2.9
Fail
—
White BG
7.9AAA
3.8AA Large
12.9AAA
8.2AAA
2.8Fail
Black BG
2.7Fail
5.6AA
1.6Fail
2.6Fail
7.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

48484F
A6A511
292937
494A50
93939A

Deuteranopia

47454F
B1BE14
272637
494851
92909B

Tritanopia

3E5151
EC1C1F
203737
445151
8B9B9B

Achromatopsia

4E4E4E
6E6E6E
2F2F2F
4D4D4D
979797

Shades & Tints Shades & Tints

#3D574C

Dark
Light

#F53F02

Dark
Light

#1F3538

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d574c;
  --color-2: #f53f02;
  --color-3: #1f3538;
  --color-4: #435250;
  --color-5: #8a9e99;
}

SCSS

$color-1: #3d574c;
$color-2: #f53f02;
$color-3: #1f3538;
$color-4: #435250;
$color-5: #8a9e99;

TAILWIND

colors: {
  'brand-1': '#3d574c',
  'brand-2': '#f53f02',
  'brand-3': '#1f3538',
  'brand-4': '#435250',
  'brand-5': '#8a9e99',
}

RGB Array

[61, 87, 76], [245, 63, 2], [31, 53, 56], [67, 82, 80], [138, 158, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3D574C, #F53F02, #1F3538, #435250, #8A9E99 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #3d574c; --color-2: #f53f02; --color-3: #1f3538; --color-4: #435250; --color-5: #8a9e99. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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