Color Palette Test

Test all color combinations for readability and contrast

Typography & Text Contrast Test

Headings

H1 Heading - White Text

H2 Heading - Primary Color

H3 Heading - Secondary Text

H4 Heading - Muted Text

H5 Heading - Light Text

H6 Heading - White Text

Body Text

Primary Text (White): This is the main text color used throughout the interface. It should be highly readable on dark backgrounds.

Secondary Text: Used for supporting information and labels.

Muted Text: Used for less important information and metadata.

Primary Color Text: Used for links and emphasis.

Color Swatches

Primary

#00d4ff

Primary Dark

#00a8cc

Primary Light

#33ddff

Secondary

#ff6b35

Accent

#00ff88

Danger

#ff3366

Warning

#ffb800

Info

#17a2b8

Bg Primary

#0a0a0b

Bg Secondary

#1a1a1d

Bg Tertiary

#2d2d32

Bg Card

#1e1e23

Bg Input

#262629

Bg Nav

#141418

Text Primary

#ffffff

Text Secondary

#e0e0e0

Text Muted

#b0b0b0

Text Inverse

#0a0a0b

Text Heading

#ffffff

Admin Table Bg

#1e1e23

Admin Table Header

#2d2d32

Admin Table Text

#ffffff

Admin Table Text Secondary

#e0e0e0

Admin Table Border

#3a3a42

Admin Table Hover

rgba(0, 212, 255, 0.1)

Border Primary

#3a3a42

Border Secondary

#2a2a32

Border Light

#404040

Component Tests

Buttons

Form Elements

Text Input

Select

Alert Messages

Success! This is a success message with proper contrast.

Error! This is an error message with proper contrast.

Warning! This is a warning message with proper contrast.

Info! This is an info message with proper contrast.

Stats Display Test

99.9%

Uptime

1000+

Active Members

24/7

Security Monitoring

∞

Possibilities

Badges & Status Indicators

Primary Badge Success Badge Secondary Badge Danger Badge Warning Badge Info Badge

Status Examples:

Account Status: Active

Security: Encrypted

Products: 5