Palettes

Colors define the Extraction UI palette and provide consistent usage across components.

Overview

Each color palette has 11 shades:

• 50-100 — Very light: use for backgrounds, disabled states
• 200-400 — Light: borders, hover states
• 500-600 — Mid-tone: primary text, icons
• 700-800 — Dark: secondary text, emphasis
• 900-950 — Very dark: text contrast, prominent emphasis

Accessibility

All color combinations are tested to meet WCAG AA (minimum 4.5:1 contrast) for text and WCAG AAA (7:1) where possible. WebAIM Contrast Checker 

Colors

Extraction UI supports the following custom colors out of the box.

Because these colors are defined under @theme, Tailwind also generates the matching color utility classes, such as bg-primary, text-primary-500, border-primary-200, etc. For more information about default color utilities and usage, visit Tailwind 

Extra Palettes

While Extraction UI only includes by default the primary and neutral palettes to keep the css as optimal as possible, we’ve included an extra file that provides the accent, success, error, info, and warning colors.

Include the palettes file in your main CSS:

/** main.css */
@import 'extraction-ui/palettes';

You now have access to the full suite of colors.