The Radix Colors plugin makes it easy to apply Radix Colors, an advanced color system that meets accessibility standards, to Framer projects. From selecting colors to applying them, the process is straightforward, simplifying the designer's workflow and providing users with a better visual experience.

What is Radix Colors?

Radix Colors is a sophisticated color system developed by UI experts at WorkOS (the creators of Radix UI). This system offers the following features:

• Accessibility-focused colors: Colors designed to meet contrast standards

• Diverse design systems: 30 color scales, each with 12 precise color steps

• Automatic dark mode: Built-in light/dark mode auto-pairing for all colors

• Scientific approach: Utilizes principles of color science for color derivation

• Transparency options: Alpha (transparency) versions of all colors for various designs

Features

• Real-time preview: See how colors look in the current Framer theme.

• Flexible color selection: Get the colors you need as you wish.

• Intuitive color naming: Quick and easy-to-find naming system (e.g., "Radix/blue10")

How to Use

1. Install the plugin from the Framer Marketplace

2. Open the plugin from the main toolbar

3. Choose from solid or alpha (transparent) colors

4. Select individual colors or entire color scales

5. Click "Import" to add the selected colors to your project’s color styles

Why Use This Plugin?

This plugin eliminates the need for lengthy manual color settings. You can instantly use a professional color system trusted by renowned designers worldwide, without creating color styles from scratch.

We recommend this plugin for the following people:

• Designers starting new projects who need a reliable color system

• Team designers aiming to offer a consistent color experience in both light and dark modes

• Anyone looking to upgrade their design system with accessible and well-crafted colors