#1F6F6A + #456165 + #933129 + #C62028 + #3B4848 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#1F6F6A

Mineral Blue · SeaGreen · Mint Ice

HEX

#1F6F6A

RGB

rgb(31, 111, 106)

HSL

hsl(176, 56%, 28%)

HSB

hsb(176, 72%, 44%)

CMYK

cmyk(72%, 0%, 5%, 56%)

Oklch

oklch(49.4% 0.075 188.9)

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

#456165

Slate Blue · DarkSlateGray · Mint Ice

HEX

#456165

RGB

rgb(69, 97, 101)

HSL

hsl(188, 19%, 33%)

HSB

hsb(188, 32%, 40%)

CMYK

cmyk(32%, 4%, 0%, 60%)

Oklch

oklch(47.2% 0.034 207.1)

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

#933129

Crimson · Brown · Wine Red

HEX

#933129

RGB

rgb(147, 49, 41)

HSL

hsl(5, 56%, 37%)

HSB

hsb(5, 72%, 58%)

CMYK

cmyk(0%, 67%, 72%, 42%)

Oklch

oklch(45.6% 0.134 28.2)

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

#C62028

Vermilion · FireBrick · Passion Red

HEX

#C62028

RGB

rgb(198, 32, 40)

HSL

hsl(357, 72%, 45%)

HSB

hsb(357, 84%, 78%)

CMYK

cmyk(0%, 84%, 80%, 22%)

Oklch

oklch(53.3% 0.199 25.5)

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

#3B4848

Slate Blue · DarkSlateGray · Mint Ice

HEX

#3B4848

RGB

rgb(59, 72, 72)

HSL

hsl(180, 10%, 26%)

HSB

hsb(180, 18%, 28%)

CMYK

cmyk(18%, 0%, 0%, 72%)

Oklch

oklch(39.0% 0.017 196.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1F6F6A

6F1F25

Analogous

1F6F42

1F6F6A

1F4D6F

Triadic

1F6F6A

6A1F6F

6F6A1F

Split-Comp.

1F6F6A

6F1F4D

6F421F

Tetradic

1F6F6A

421F6F

6F1F25

4D6F1F

Contrast Matrix WCAG 2.1 Contrast

1F6F6A	456165	933129	C62028	3B4848
—	1.1 Fail	1.3 Fail	1.0 Fail	1.6 Fail
1.1 Fail	—	1.2 Fail	1.2 Fail	1.4 Fail
1.3 Fail	1.2 Fail	—	1.3 Fail	1.2 Fail
1.0 Fail	1.2 Fail	1.3 Fail	—	1.6 Fail
1.6 Fail	1.4 Fail	1.2 Fail	1.6 Fail	—

White BG

5.9AA

6.7AA

7.7AAA

5.8AA

9.5AAA

Black BG

3.5AA Large

3.2AA Large

2.7Fail

3.6AA Large

2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

42426B

515164

69682B

7E7D26

414148

Deuteranopia

3D376B

504D64

6E762B

889426

403F48

Tritanopia

236C6C

466363

8E2C2D

BE2524

3C4848

Achromatopsia

575757

595959

4D4D4D

535353

444444

Shades & Tints Shades & Tints

#1F6F6A

Dark

Light

#456165

Dark

Light

#933129

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1f6f6a;
  --color-2: #456165;
  --color-3: #933129;
  --color-4: #c62028;
  --color-5: #3b4848;
}

SCSS

$color-1: #1f6f6a;
$color-2: #456165;
$color-3: #933129;
$color-4: #c62028;
$color-5: #3b4848;

TAILWIND

colors: {
  'brand-1': '#1f6f6a',
  'brand-2': '#456165',
  'brand-3': '#933129',
  'brand-4': '#c62028',
  'brand-5': '#3b4848',
}

RGB Array

[31, 111, 106], [69, 97, 101], [147, 49, 41], [198, 32, 40], [59, 72, 72]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1F6F6A, #456165, #933129, #C62028, #3B4848 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: #1f6f6a; --color-2: #456165; --color-3: #933129; --color-4: #c62028; --color-5: #3b4848. 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