← Back to Editor

#7A766A · #BF5D0D · #FF1F1F · #910035 · #381522

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#7A766A

Ink Gray · DimGray · Warm Gray

HEX
#7A766A
RGB
rgb(122, 118, 106)
HSL
hsl(45, 7%, 45%)
HSB
hsb(45, 13%, 48%)
CMYK
cmyk(0%, 3%, 13%, 52%)
Oklch
oklch(56.6% 0.019 91.7)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#BF5D0D

Tangerine · Chocolate · Amber Brown

HEX
#BF5D0D
RGB
rgb(191, 93, 13)
HSL
hsl(27, 87%, 40%)
HSB
hsb(27, 93%, 75%)
CMYK
cmyk(0%, 51%, 93%, 25%)
Oklch
oklch(58.7% 0.148 51.1)

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

#FF1F1F

Vermilion · Red · Passion Red

HEX
#FF1F1F
RGB
rgb(255, 31, 31)
HSL
hsl(0, 100%, 56%)
HSB
hsb(0, 88%, 100%)
CMYK
cmyk(0%, 88%, 88%, 0%)
Oklch
oklch(63.7% 0.249 28.2)

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

#910035

Dark Violet · Brown · Camellia

HEX
#910035
RGB
rgb(145, 0, 53)
HSL
hsl(338, 100%, 28%)
HSB
hsb(338, 100%, 57%)
CMYK
cmyk(0%, 100%, 63%, 43%)
Oklch
oklch(41.9% 0.168 11.3)

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

#381522

Dark Violet · Black · Raspberry

HEX
#381522
RGB
rgb(56, 21, 34)
HSL
hsl(338, 45%, 15%)
HSB
hsb(338, 63%, 22%)
CMYK
cmyk(0%, 62%, 39%, 78%)
Oklch
oklch(25.4% 0.058 358.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7A766A
6B6F7B

Analogous

7B6F6B
7A766A
777B6B

Triadic

7A766A
6B7B77
776B7B

Split-Comp.

7A766A
6B777B
6F6B7B

Tetradic

7A766A
6B7B6F
6B6F7B
7B6B77

Contrast Matrix WCAG 2.1 Contrast

7A766A
BF5D0D
FF1F1F
910035
381522
—
1.0
Fail
1.2
Fail
2.1
Fail
3.6
AA Large
1.0
Fail
—
1.1
Fail
2.1
Fail
3.7
AA Large
1.2
Fail
1.1
Fail
—
2.4
Fail
4.2
AA Large
2.1
Fail
2.1
Fail
2.4
Fail
—
1.7
Fail
3.6
AA Large
3.7
AA Large
4.2
AA Large
1.7
Fail
—
White BG
4.5AA
4.4AA Large
3.8AA Large
9.3AAA
16.2AAA
Black BG
4.6AA
4.8AA
5.5AA
2.3Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

78786D
959420
9E9C1F
525128
29291F

Deuteranopia

79796E
9AA225
ABBC1F
5B6625
2B2D1E

Tritanopia

7A6F70
BA3033
F41F1F
8A1E1C
361C1C

Achromatopsia

767676
717171
626262
313131
212121

Shades & Tints Shades & Tints

#7A766A

Dark
Light

#BF5D0D

Dark
Light

#FF1F1F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7a766a;
  --color-2: #bf5d0d;
  --color-3: #ff1f1f;
  --color-4: #910035;
  --color-5: #381522;
}

SCSS

$color-1: #7a766a;
$color-2: #bf5d0d;
$color-3: #ff1f1f;
$color-4: #910035;
$color-5: #381522;

TAILWIND

colors: {
  'brand-1': '#7a766a',
  'brand-2': '#bf5d0d',
  'brand-3': '#ff1f1f',
  'brand-4': '#910035',
  'brand-5': '#381522',
}

RGB Array

[122, 118, 106], [191, 93, 13], [255, 31, 31], [145, 0, 53], [56, 21, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7A766A, #BF5D0D, #FF1F1F, #910035, #381522 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #7a766a; --color-2: #bf5d0d; --color-3: #ff1f1f; --color-4: #910035; --color-5: #381522. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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