Color System

The Noise Heroes color palette - vibrant, accessible, and purposeful

Brand Colors

Orange

Hex

#FF5500

RGB

rgb(255, 85, 0)

HSL

hsl(20, 100%, 50%)

Noise Heroes signature orange - vibrant, energetic, and bold

Usage: Primary actions, brand identity, key UI elements

Primary Chip
Primary Badge

Teal

Hex

#00D9B5

RGB

rgb(0, 217, 181)

HSL

hsl(170, 100%, 43%)

Fresh and modern teal - provides perfect contrast to orange

Usage: Secondary actions, success states, complementary accents

Secondary Chip
Secondary Badge

Color Shades

Primary Orange Shades

50

#FFF5F0

100

#FFE6D9

200

#FFCCB3

300

#FFB38C

400

#FF9966

500

#FF5500

600

#CC4400

700

#993300

800

#662200

900

#331100

Secondary Teal Shades

50

#E6FFFB

100

#B3FFF0

200

#80FFE5

300

#4DFFD9

400

#1AFFCE

500

#00D9B5

600

#00AD91

700

#00826D

800

#00574A

900

#002B25

Semantic Colors

Success

#17C964

Positive actions and success states

Warning

#F5A524

Warning messages and cautionary actions

Danger

#F31260

Errors, destructive actions, and critical alerts

Info

#006FEE

Informational messages and highlights

Neutral Colors

Gray 50

#FAFAFA

Gray 100

#F4F4F5

Gray 200

#E4E4E7

Gray 300

#D4D4D8

Gray 400

#A1A1AA

Gray 500

#71717A

Gray 600

#52525B

Gray 700

#3F3F46

Gray 800

#27272A

Gray 900

#18181B

HeroUI • Build: 2025-08-04T19:49:44.889Z