#270804 + #336577 + #4A5064 + #332536 + #C0122F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#270804

Vermilion · Black · Deep Berry

HEX

#270804

RGB

rgb(39, 8, 4)

HSL

hsl(7, 81%, 8%)

HSB

hsb(7, 90%, 15%)

CMYK

cmyk(0%, 79%, 90%, 85%)

Oklch

oklch(18.9% 0.054 32.2)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#336577

Slate Blue · DarkSlateGray · Mint Ice

HEX

#336577

RGB

rgb(51, 101, 119)

HSL

hsl(196, 40%, 33%)

HSB

hsb(196, 57%, 47%)

CMYK

cmyk(57%, 15%, 0%, 53%)

Oklch

oklch(48.0% 0.061 223.9)

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

#4A5064

Indigo · DarkSlateGray · Prussian Blue

HEX

#4A5064

RGB

rgb(74, 80, 100)

HSL

hsl(226, 15%, 34%)

HSB

hsb(226, 26%, 39%)

CMYK

cmyk(26%, 20%, 0%, 61%)

Oklch

oklch(43.4% 0.034 271.9)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#332536

Dark Plum · DarkSlateGray · Dark Purple

HEX

#332536

RGB

rgb(51, 37, 54)

HSL

hsl(289, 19%, 18%)

HSB

hsb(289, 31%, 21%)

CMYK

cmyk(6%, 31%, 0%, 79%)

Oklch

oklch(28.8% 0.036 320.3)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

#C0122F

Vermilion · FireBrick · Passion Red

HEX

#C0122F

RGB

rgb(192, 18, 47)

HSL

hsl(350, 83%, 41%)

HSB

hsb(350, 91%, 75%)

CMYK

cmyk(0%, 91%, 76%, 25%)

Oklch

oklch(51.6% 0.200 21.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

270804

042125

Analogous

250411

270804

251804

Triadic

270804

042508

080425

Split-Comp.

270804

042518

041125

Tetradic

270804

112504

042125

180425

Contrast Matrix WCAG 2.1 Contrast

270804	336577	4A5064	332536	C0122F
—	2.9 Fail	2.3 Fail	1.3 Fail	3.0 AA Large
2.9 Fail	—	1.2 Fail	2.2 Fail	1.0 Fail
2.3 Fail	1.2 Fail	—	1.8 Fail	1.3 Fail
1.3 Fail	2.2 Fail	1.8 Fail	—	2.3 Fail
3.0 AA Large	1.0 Fail	1.3 Fail	2.3 Fail	—

White BG

18.7AAA

6.4AA

8.0AAA

14.4AAA

6.2AA

Black BG

1.1Fail

3.3AA Large

2.6Fail

1.5Fail

3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

1A1905

494973

4D4D5F

2D2D32

757328

Deuteranopia

1B1E05

464272

4C4C5E

2E2F31

7F8C26

Tritanopia

250606

366F6E

4A5B5B

322F2E

B72221

Achromatopsia

111111

585858

505050

2B2B2B

494949

Shades & Tints Shades & Tints

#270804

Dark

Light

#336577

Dark

Light

#4A5064

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #270804;
  --color-2: #336577;
  --color-3: #4a5064;
  --color-4: #332536;
  --color-5: #c0122f;
}

SCSS

$color-1: #270804;
$color-2: #336577;
$color-3: #4a5064;
$color-4: #332536;
$color-5: #c0122f;

TAILWIND

colors: {
  'brand-1': '#270804',
  'brand-2': '#336577',
  'brand-3': '#4a5064',
  'brand-4': '#332536',
  'brand-5': '#c0122f',
}

RGB Array

[39, 8, 4], [51, 101, 119], [74, 80, 100], [51, 37, 54], [192, 18, 47]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #270804, #336577, #4A5064, #332536, #C0122F 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: #270804; --color-2: #336577; --color-3: #4a5064; --color-4: #332536; --color-5: #c0122f. 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