#B23819 + #7F6B33 + #6D8357 + #2FA38C + #5C5E50 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B23819

Vermilion · FireBrick · Wine Red

HEX

#B23819

RGB

rgb(178, 56, 25)

HSL

hsl(12, 75%, 40%)

HSB

hsb(12, 86%, 70%)

CMYK

cmyk(0%, 69%, 86%, 30%)

Oklch

oklch(51.7% 0.164 34.8)

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

#7F6B33

Ochre · Sienna · Honey Gold

HEX

#7F6B33

RGB

rgb(127, 107, 51)

HSL

hsl(44, 43%, 35%)

HSB

hsb(44, 60%, 50%)

CMYK

cmyk(0%, 16%, 60%, 50%)

Oklch

oklch(53.5% 0.079 89.9)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#6D8357

Celadon · DimGray · Olive Green

HEX

#6D8357

RGB

rgb(109, 131, 87)

HSL

hsl(90, 20%, 43%)

HSB

hsb(90, 34%, 51%)

CMYK

cmyk(17%, 0%, 34%, 49%)

Oklch

oklch(58.1% 0.069 129.9)

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

#2FA38C

Mineral Blue · MediumSeaGreen · Mint Ice

HEX

#2FA38C

RGB

rgb(47, 163, 140)

HSL

hsl(168, 55%, 41%)

HSB

hsb(168, 71%, 64%)

CMYK

cmyk(71%, 0%, 14%, 36%)

Oklch

oklch(64.6% 0.107 176.4)

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

#5C5E50

Autumn Sage · DimGray · Charcoal

HEX

#5C5E50

RGB

rgb(92, 94, 80)

HSL

hsl(69, 8%, 34%)

HSB

hsb(69, 15%, 37%)

CMYK

cmyk(2%, 0%, 15%, 63%)

Oklch

oklch(47.6% 0.022 113.8)

Traditional「Autumn Sage」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B23819

1994B3

Analogous

B31947

B23819

B38519

Triadic

B23819

19B338

3819B3

Split-Comp.

B23819

19B385

1947B3

Tetradic

B23819

47B319

1994B3

8519B3

Contrast Matrix WCAG 2.1 Contrast

B23819	7F6B33	6D8357	2FA38C	5C5E50
—	1.2 Fail	1.4 Fail	1.9 Fail	1.1 Fail
1.2 Fail	—	1.2 Fail	1.7 Fail	1.3 Fail
1.4 Fail	1.2 Fail	—	1.3 Fail	1.6 Fail
1.9 Fail	1.7 Fail	1.3 Fail	—	2.1 Fail
1.1 Fail	1.3 Fail	1.6 Fail	2.1 Fail	—

White BG

6.0AA

5.2AA

4.2AA Large

3.1AA Large

6.6AA

Black BG

3.5AA Large

4.1AA Large

5.0AA

6.7AA

3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

7D7C21

767641

777762

616292

5D5D53

Deuteranopia

848D22

787944

757464

5B5293

5D5D54

Tritanopia

AC2628

7E4B4E

6E6A6C

359697

5C5657

Achromatopsia

595959

6B6B6B

777777

7E7E7E

5C5C5C

Shades & Tints Shades & Tints

#B23819

Dark

Light

#7F6B33

Dark

Light

#6D8357

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b23819;
  --color-2: #7f6b33;
  --color-3: #6d8357;
  --color-4: #2fa38c;
  --color-5: #5c5e50;
}

SCSS

$color-1: #b23819;
$color-2: #7f6b33;
$color-3: #6d8357;
$color-4: #2fa38c;
$color-5: #5c5e50;

TAILWIND

colors: {
  'brand-1': '#b23819',
  'brand-2': '#7f6b33',
  'brand-3': '#6d8357',
  'brand-4': '#2fa38c',
  'brand-5': '#5c5e50',
}

RGB Array

[178, 56, 25], [127, 107, 51], [109, 131, 87], [47, 163, 140], [92, 94, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B23819, #7F6B33, #6D8357, #2FA38C, #5C5E50 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: #b23819; --color-2: #7f6b33; --color-3: #6d8357; --color-4: #2fa38c; --color-5: #5c5e50. 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