← Back to Editor

#F76D18 · #7A2B37 · #631833 · #3A1B2C · #170535

bright

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#F76D18

Tangerine · Chocolate · Warm Sun

HEX
#F76D18
RGB
rgb(247, 109, 24)
HSL
hsl(23, 93%, 53%)
HSB
hsb(23, 90%, 97%)
CMYK
cmyk(0%, 56%, 90%, 3%)
Oklch
oklch(69.4% 0.189 45.5)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#7A2B37

Crimson · Brown · Wine Red

HEX
#7A2B37
RGB
rgb(122, 43, 55)
HSL
hsl(351, 48%, 32%)
HSB
hsb(351, 65%, 48%)
CMYK
cmyk(0%, 65%, 55%, 52%)
Oklch
oklch(40.8% 0.110 14.3)

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

#631833

Dark Violet · Maroon · Raspberry

HEX
#631833
RGB
rgb(99, 24, 51)
HSL
hsl(338, 61%, 24%)
HSB
hsb(338, 76%, 39%)
CMYK
cmyk(0%, 76%, 48%, 61%)
Oklch
oklch(34.3% 0.109 3.1)

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

#3A1B2C

Rose Purple · DarkSlateGray · Raspberry

HEX
#3A1B2C
RGB
rgb(58, 27, 44)
HSL
hsl(327, 36%, 17%)
HSB
hsb(327, 53%, 23%)
CMYK
cmyk(0%, 53%, 24%, 77%)
Oklch
oklch(27.2% 0.055 347.3)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

#170535

Deep Indigo · Black · Dark Purple

HEX
#170535
RGB
rgb(23, 5, 53)
HSL
hsl(263, 83%, 11%)
HSB
hsb(263, 91%, 21%)
CMYK
cmyk(57%, 91%, 0%, 79%)
Oklch
oklch(18.7% 0.087 293.7)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F76D18
18A1F7

Analogous

F71832
F76D18
F7DD18

Triadic

F76D18
18F76D
6D18F7

Split-Comp.

F76D18
18F7DD
1832F7

Tetradic

F76D18
32F718
18A1F7
DD18F7

Contrast Matrix WCAG 2.1 Contrast

F76D18
7A2B37
631833
3A1B2C
170535
—
3.2
AA Large
4.2
AA Large
5.2
AA
6.4
AA
3.2
AA Large
—
1.3
Fail
1.6
Fail
2.0
Fail
4.2
AA Large
1.3
Fail
—
1.2
Fail
1.5
Fail
5.2
AA
1.6
Fail
1.2
Fail
—
1.2
Fail
6.4
AA
2.0
Fail
1.5
Fail
1.2
Fail
—
White BG
2.9Fail
9.4AAA
12.3AAA
15.3AAA
18.9AAA
Black BG
7.2AAA
2.2Fail
1.7Fail
1.4Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBA2D
585734
43422C
2D2C28
0F0F29

Deuteranopia

C3CE31
5C6233
474D2B
2E3127
101227

Tritanopia

F03D40
763231
5F2726
382524
16201E

Achromatopsia

8D8D8D
444444
323232
262626
101010

Shades & Tints Shades & Tints

#F76D18

Dark
Light

#7A2B37

Dark
Light

#631833

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f76d18;
  --color-2: #7a2b37;
  --color-3: #631833;
  --color-4: #3a1b2c;
  --color-5: #170535;
}

SCSS

$color-1: #f76d18;
$color-2: #7a2b37;
$color-3: #631833;
$color-4: #3a1b2c;
$color-5: #170535;

TAILWIND

colors: {
  'brand-1': '#f76d18',
  'brand-2': '#7a2b37',
  'brand-3': '#631833',
  'brand-4': '#3a1b2c',
  'brand-5': '#170535',
}

RGB Array

[247, 109, 24], [122, 43, 55], [99, 24, 51], [58, 27, 44], [23, 5, 53]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This bright-style palette of #F76D18, #7A2B37, #631833, #3A1B2C, #170535 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: #f76d18; --color-2: #7a2b37; --color-3: #631833; --color-4: #3a1b2c; --color-5: #170535. 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 bright-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