#382F2F + #F50505 + #628573 + #6D8562 + #FF0033 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#382F2F

Crimson · DarkSlateGray · Dark Stone

HEX

#382F2F

RGB

rgb(56, 47, 47)

HSL

hsl(0, 9%, 20%)

HSB

hsb(0, 16%, 22%)

CMYK

cmyk(0%, 16%, 16%, 78%)

Oklch

oklch(31.5% 0.013 17.9)

Traditional「Crimson」· Paint「Dark Stone」· Creative Midnight Shadow

#F50505

Vermilion · Red · Passion Red

HEX

#F50505

RGB

rgb(245, 5, 5)

HSL

hsl(0, 96%, 49%)

HSB

hsb(0, 98%, 96%)

CMYK

cmyk(0%, 98%, 98%, 4%)

Oklch

oklch(61.0% 0.249 29.1)

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

#628573

Celadon · DimGray · Olive Green

HEX

#628573

RGB

rgb(98, 133, 115)

HSL

hsl(149, 15%, 45%)

HSB

hsb(149, 26%, 52%)

CMYK

cmyk(26%, 0%, 14%, 48%)

Oklch

oklch(58.5% 0.048 162.1)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#6D8562

Celadon · DimGray · Olive Green

HEX

#6D8562

RGB

rgb(109, 133, 98)

HSL

hsl(101, 15%, 45%)

HSB

hsb(101, 26%, 52%)

CMYK

cmyk(18%, 0%, 26%, 48%)

Oklch

oklch(58.8% 0.059 136.0)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#FF0033

Vermilion · Crimson · Passion Red

HEX

#FF0033

RGB

rgb(255, 0, 51)

HSL

hsl(348, 100%, 50%)

HSB

hsb(348, 100%, 100%)

CMYK

cmyk(0%, 100%, 80%, 0%)

Oklch

oklch(63.1% 0.255 23.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

382F2F

2E3838

Analogous

382E33

382F2F

38332E

Triadic

382F2F

2E382E

2E2E38

Split-Comp.

382F2F

2E3833

2E3338

Tetradic

382F2F

33382E

2E3838

332E38

Contrast Matrix WCAG 2.1 Contrast

382F2F	F50505	628573	6D8562	FF0033
—	3.0 AA Large	3.2 AA Large	3.2 AA Large	3.3 AA Large
3.0 AA Large	—	1.0 Fail	1.1 Fail	1.1 Fail
3.2 AA Large	1.0 Fail	—	1.0 Fail	1.0 Fail
3.2 AA Large	1.1 Fail	1.0 Fail	—	1.0 Fail
3.3 AA Large	1.1 Fail	1.0 Fail	1.0 Fail	—

White BG

13.0AAA

4.3AA Large

4.1AA Large

4.0AA Large

Black BG

1.6Fail

4.9AA

5.1AA

5.2AA

5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

34342F

8D8B05

717177

77786A

918E27

Deuteranopia

35352F

9BAD05

6F6D78

76746D

9FB324

Tritanopia

382F2F

E90505

647B7C

6E7173

F21D1B

Achromatopsia

323232

4D4D4D

787878

7A7A7A

525252

Shades & Tints Shades & Tints

#382F2F

Dark

Light

#F50505

Dark

Light

#628573

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #382f2f;
  --color-2: #f50505;
  --color-3: #628573;
  --color-4: #6d8562;
  --color-5: #ff0033;
}

SCSS

$color-1: #382f2f;
$color-2: #f50505;
$color-3: #628573;
$color-4: #6d8562;
$color-5: #ff0033;

TAILWIND

colors: {
  'brand-1': '#382f2f',
  'brand-2': '#f50505',
  'brand-3': '#628573',
  'brand-4': '#6d8562',
  'brand-5': '#ff0033',
}

RGB Array

[56, 47, 47], [245, 5, 5], [98, 133, 115], [109, 133, 98], [255, 0, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #382F2F, #F50505, #628573, #6D8562, #FF0033 is ideal for: corporate websites, product showcases, portfolios. 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: #382f2f; --color-2: #f50505; --color-3: #628573; --color-4: #6d8562; --color-5: #ff0033. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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