Colors

Color System

Dracula UI ships with a handcrafted color system that helps you design apps and websites that are pleasing and easy on the eyes.

The color system includes a variety of CSS classes, utilities, and properties that can be used to manage the main accent color, as well as override the colors of specific components and text.

Base / Accent Colors

Base colors are the elemental colors derived from the Dracula color palette. The entire palette was tested against the WCAG 2.0 level AA spec, which requires a contrast ratio of at least 4.5:1 for normal text, therefore affording the best readability.

• .drac-text-cyan

  .drac-bg-cyan

  .drac-border-cyan
• .drac-text-green

  .drac-bg-green

  .drac-border-green
• .drac-text-orange

  .drac-bg-orange

  .drac-border-orange
• .drac-text-pink

  .drac-bg-pink

  .drac-border-pink
• .drac-text-purple

  .drac-bg-purple

  .drac-border-purple
• .drac-text-red

  .drac-bg-red

  .drac-border-red
• .drac-text-yellow

  .drac-bg-yellow

  .drac-border-yellow

Gradients

Gradients can be used to add a more playful tone to your application, and can be very aesthetically pleasing when used in moderation.

• .drac-text-purple-cyan

  .drac-bg-purple-cyan
• .drac-text-yellow-pink

  .drac-bg-yellow-pink
• .drac-text-cyan-green

  .drac-bg-cyan-green
• .drac-text-pink-purple

  .drac-bg-pink-purple

Color Animations (Experimental)

The animated color takes gradients one step further by alternating gradient colors in an infinite loop.

Conveying Hiearchy with Colors

Conveying hierarchy is one of the most challenging problems when designing for Dark Mode. Dracula UI helps solve for it by providing transparent and secondary colors.

Utility Classes and Properties

Here's a full list of all CSS classes and React properties.