#6F1413 + #6D514E + #51727B + #3694A0 + #0CBAD2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#6F1413

Vermilion · Maroon · Wine Red

HEX

#6F1413

RGB

rgb(111, 20, 19)

HSL

hsl(1, 71%, 25%)

HSB

hsb(1, 83%, 44%)

CMYK

cmyk(0%, 82%, 83%, 56%)

Oklch

oklch(35.5% 0.125 26.9)

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

#6D514E

Crimson · DimGray · Wine Red

HEX

#6D514E

RGB

rgb(109, 81, 78)

HSL

hsl(6, 17%, 37%)

HSB

hsb(6, 28%, 43%)

CMYK

cmyk(0%, 26%, 28%, 57%)

Oklch

oklch(46.4% 0.038 25.6)

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

#51727B

Slate Blue · DimGray · Mint Ice

HEX

#51727B

RGB

rgb(81, 114, 123)

HSL

hsl(193, 21%, 40%)

HSB

hsb(193, 34%, 48%)

CMYK

cmyk(34%, 7%, 0%, 52%)

Oklch

oklch(53.0% 0.040 216.5)

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

#3694A0

Slate Blue · SteelBlue · Mint Ice

HEX

#3694A0

RGB

rgb(54, 148, 160)

HSL

hsl(187, 50%, 42%)

HSB

hsb(187, 66%, 63%)

CMYK

cmyk(66%, 7%, 0%, 37%)

Oklch

oklch(61.7% 0.088 207.0)

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

#0CBAD2

Lake Blue · DarkTurquoise · Mint Ice

HEX

#0CBAD2

RGB

rgb(12, 186, 210)

HSL

hsl(187, 89%, 44%)

HSB

hsb(187, 94%, 82%)

CMYK

cmyk(94%, 11%, 0%, 18%)

Oklch

oklch(72.4% 0.124 211.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6F1413

126C6D

Analogous

6D123E

6F1413

6D4112

Triadic

6F1413

126D14

14126D

Split-Comp.

6F1413

126D41

123E6D

Tetradic

6F1413

3E6D12

126C6D

41126D

Contrast Matrix WCAG 2.1 Contrast

6F1413	6D514E	51727B	3694A0	0CBAD2
—	1.6 Fail	2.3 Fail	3.3 AA Large	5.0 AA
1.6 Fail	—	1.4 Fail	2.0 Fail	3.1 AA Large
2.3 Fail	1.4 Fail	—	1.5 Fail	2.2 Fail
3.3 AA Large	2.0 Fail	1.5 Fail	—	1.5 Fail
5.0 AA	3.1 AA Large	2.2 Fail	1.5 Fail	—

White BG

11.8AAA

7.1AAA

5.2AA

3.6AA Large

2.3Fail

Black BG

1.8Fail

2.9Fail

4.0AA Large

5.9AA

9.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

484713

61614F

5F6079

5F609D

5759CC

Deuteranopia

4D5413

63654F

5D5B78

59529C

4D40CB

Tritanopia

6A1313

6C4F4F

537777

3B9B9A

15C8C7

Achromatopsia

2F2F2F

595959

696969

797979

898989

Shades & Tints Shades & Tints

#6F1413

Dark

Light

#6D514E

Dark

Light

#51727B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6f1413;
  --color-2: #6d514e;
  --color-3: #51727b;
  --color-4: #3694a0;
  --color-5: #0cbad2;
}

SCSS

$color-1: #6f1413;
$color-2: #6d514e;
$color-3: #51727b;
$color-4: #3694a0;
$color-5: #0cbad2;

TAILWIND

colors: {
  'brand-1': '#6f1413',
  'brand-2': '#6d514e',
  'brand-3': '#51727b',
  'brand-4': '#3694a0',
  'brand-5': '#0cbad2',
}

RGB Array

[111, 20, 19], [109, 81, 78], [81, 114, 123], [54, 148, 160], [12, 186, 210]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6F1413, #6D514E, #51727B, #3694A0, #0CBAD2 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: #6f1413; --color-2: #6d514e; --color-3: #51727b; --color-4: #3694a0; --color-5: #0cbad2. 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