@radix-ui/colors

What is @radix-ui/colors?

@radix-ui/colors is a collection of color palettes designed for use in user interfaces. It provides a set of carefully crafted color scales that can be used to create visually appealing and accessible designs.

What are @radix-ui/colors's main functionalities?

Color Scales

Provides a set of color scales for different colors like blue, red, and green. Each color scale has multiple shades that can be used for different UI elements.

import { blue, red, green } from '@radix-ui/colors';

const primaryColor = blue.blue9;
const errorColor = red.red9;
const successColor = green.green9;

console.log(primaryColor); // Outputs: #3b82f6
console.log(errorColor); // Outputs: #ef4444
console.log(successColor); // Outputs: #10b981

Dark Mode Support

Provides dark mode variants for each color scale, allowing for seamless integration with dark mode themes.

import { blueDark, redDark, greenDark } from '@radix-ui/colors';

const primaryColorDark = blueDark.blue9;
const errorColorDark = redDark.red9;
const successColorDark = greenDark.green9;

console.log(primaryColorDark); // Outputs: #1e40af
console.log(errorColorDark); // Outputs: #b91c1c
console.log(successColorDark); // Outputs: #047857

Accessibility

Includes color shades that are optimized for accessibility, ensuring that text and UI elements are readable for users with visual impairments.

import { blue, red, green } from '@radix-ui/colors';

const accessiblePrimary = blue.blue11;
const accessibleError = red.red11;
const accessibleSuccess = green.green11;

console.log(accessiblePrimary); // Outputs: #1e3a8a
console.log(accessibleError); // Outputs: #991b1b
console.log(accessibleSuccess); // Outputs: #065f46

Other packages similar to @radix-ui/colors

tailwindcss

Tailwind CSS is a utility-first CSS framework that includes a comprehensive set of color utilities. It provides a wide range of color scales similar to @radix-ui/colors, but also includes a full suite of other utility classes for building responsive and modern web interfaces.

chakra-ui

Chakra UI is a component library that includes a set of color palettes designed for building accessible and themeable React applications. It offers similar color scales and dark mode support, along with a collection of pre-built components.

material-ui

Material-UI is a popular React component library that follows Google's Material Design guidelines. It includes a set of color palettes and themes that can be customized, providing similar functionality to @radix-ui/colors but within the context of Material Design.

README

Radix Colors

A gorgeous, accessible color system.

---

Documentation

For full documentation, visit radix-ui.com/colors/docs.

Installation

yarn add @radix-ui/colors

Authors

• Colm Tuite (@colmtuite)
• Vlad Moroz (@vladyslavmoroz)