#C14A22 + #B51241 + #31261E + #43B5B6 + #787838 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#C14A22

Tangerine · Chocolate · Amber Brown

HEX

#C14A22

RGB

rgb(193, 74, 34)

HSL

hsl(15, 70%, 45%)

HSB

hsb(15, 82%, 76%)

CMYK

cmyk(0%, 62%, 82%, 24%)

Oklch

oklch(56.4% 0.162 38.0)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#B51241

Dark Violet · FireBrick · Camellia

HEX

#B51241

RGB

rgb(181, 18, 65)

HSL

hsl(343, 82%, 39%)

HSB

hsb(343, 90%, 71%)

CMYK

cmyk(0%, 90%, 64%, 29%)

Oklch

oklch(49.8% 0.190 13.7)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#31261E

Tangerine · DarkSlateGray · Cinnamon

HEX

#31261E

RGB

rgb(49, 38, 30)

HSL

hsl(25, 24%, 15%)

HSB

hsb(25, 39%, 19%)

CMYK

cmyk(0%, 22%, 39%, 81%)

Oklch

oklch(27.9% 0.022 57.7)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#43B5B6

Slate Blue · MediumTurquoise · Mint Ice

HEX

#43B5B6

RGB

rgb(67, 181, 182)

HSL

hsl(181, 46%, 49%)

HSB

hsb(181, 63%, 71%)

CMYK

cmyk(63%, 1%, 0%, 29%)

Oklch

oklch(71.0% 0.101 195.9)

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

#787838

Autumn Sage · DarkOliveGreen · Honey Gold

HEX

#787838

RGB

rgb(120, 120, 56)

HSL

hsl(60, 36%, 35%)

HSB

hsb(60, 53%, 47%)

CMYK

cmyk(0%, 0%, 53%, 53%)

Oklch

oklch(55.8% 0.086 108.9)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C14A22

229BC3

Analogous

C3224B

C14A22

C39B22

Triadic

C14A22

22C34B

4B22C3

Split-Comp.

C14A22

22C39B

224BC3

Tetradic

C14A22

4BC322

229BC3

9B22C3

Contrast Matrix WCAG 2.1 Contrast

C14A22	B51241	31261E	43B5B6	787838
—	1.4 Fail	3.0 Fail	2.0 Fail	1.1 Fail
1.4 Fail	—	2.2 Fail	2.7 Fail	1.5 Fail
3.0 Fail	2.2 Fail	—	6.0 AA	3.2 AA Large
2.0 Fail	2.7 Fail	6.0 AA	—	1.9 Fail
1.1 Fail	1.5 Fail	3.2 AA Large	1.9 Fail	—

White BG

4.9AA

6.7AA

14.7AAA

2.5Fail

4.6AA

Black BG

4.3AA Large

3.1AA Large

1.4Fail

8.5AAA

4.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8D8C2C

6E6D36

2C2C20

7475B6

787847

Deuteranopia

949D2E

788433

2D2E20

6E65B6

78784B

Tritanopia

BB3335

AD2D2B

302122

49B6B6

785456

Achromatopsia

696969

484848

282828

939393

717171

Shades & Tints Shades & Tints

#C14A22

Dark

Light

#B51241

Dark

Light

#31261E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c14a22;
  --color-2: #b51241;
  --color-3: #31261e;
  --color-4: #43b5b6;
  --color-5: #787838;
}

SCSS

$color-1: #c14a22;
$color-2: #b51241;
$color-3: #31261e;
$color-4: #43b5b6;
$color-5: #787838;

TAILWIND

colors: {
  'brand-1': '#c14a22',
  'brand-2': '#b51241',
  'brand-3': '#31261e',
  'brand-4': '#43b5b6',
  'brand-5': '#787838',
}

RGB Array

[193, 74, 34], [181, 18, 65], [49, 38, 30], [67, 181, 182], [120, 120, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C14A22, #B51241, #31261E, #43B5B6, #787838 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: #c14a22; --color-2: #b51241; --color-3: #31261e; --color-4: #43b5b6; --color-5: #787838. 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