Radix Colors

https://www.radix-ui.com/colors/docs
Admin
Radix Colors provides a set of accessible and beautiful color scales designed for UI development,...
Tokens:4,564
Snippets:45
Trust Score:9.8
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Radix Colors via package manager

Source: https://www.radix-ui.com/colors/docs/overview/installation

Use these commands to add the Radix Colors package to your project dependencies.

```bash
# with npm

npm install @radix-ui/colors

# with yarn

yarn add @radix-ui/colors

# with pnpm

pnpm add @radix-ui/colors
```

--------------------------------

### Integrate Radix Colors with vanilla-extract

Source: https://www.radix-ui.com/colors/docs/overview/usage

Use createTheme to define theme variables from color scales. Apply the generated theme class to a parent element to scope the variables.

```js
import { gray, blue, red, green, grayDark, blueDark, redDark, greenDark } from "@radix-ui/colors";

import { createTheme } from "@vanilla-extract/css";

export const [theme, vars] = createTheme({
  colors: {
    ...gray,

    ...blue,

    ...red,

    ...green,
  },
});

export const darkTheme = createTheme(vars, {
  colors: {
    ...grayDark,

    ...blueDark,

    ...redDark,

    ...greenDark,
  },
});

// Use the colors in your styles

export const styles = {
  button: style({
    backgroundColor: vars.colors.blue4,

    color: vars.colors.blue11,

    borderColor: vars.colors.blue7,

    ":hover": {
      backgroundColor: vars.colors.blue5,

      borderColor: vars.colors.blue8,
    },
  }),
};

// Apply your theme to it

export default function App() {
  return (
    <body className={theme}>
      <button className={styles.button}>Radix Colors</button>
    </body>
  );
}
```

--------------------------------

### Include Radix Colors via CDN

Source: https://www.radix-ui.com/colors/docs/overview/installation

Load CSS files directly from the CDN for prototyping. Production use is not recommended.

```html
<!-- Load whichever light and dark scales you need -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/gray.css" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue.css" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/green.css" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/red.css" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/gray-dark.css" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue-dark.css" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/green-dark.css" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/red-dark.css" />
```

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/blue.css" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@3.0.0/blue-dark.css" />
```

--------------------------------

### Mapping Multiple Semantics to One Scale

Source: https://www.radix-ui.com/colors/docs/overview/aliasing

Demonstrates how to assign multiple semantic aliases to the same underlying color scale.

```css
/*

* Note: Importing from the CDN in production is not recommended.

* It's intended for prototyping only.

*/

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue.css";

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/green.css";

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/yellow.css";



:root {

--accent-1: var(--blue-1);

--accent-2: var(--blue-2);

--info-1: var(--blue-1);

--info-2: var(--blue-2);



--success-1: var(--green-1);

--success-2: var(--green-2);

--valid-1: var(--green-1);

--valid-2: var(--green-2);



--warning-1: var(--yellow-1);

--warning-2: var(--yellow-2);

--pending-1: var(--yellow-1);

--pending-2: var(--yellow-2);

}
```

--------------------------------

### Alias Radix UI color scales with CSS variables

Source: https://www.radix-ui.com/colors/docs/overview/aliasing

Use CSS custom properties to map standard Radix UI color scales to custom names. Note that importing from the CDN is intended for prototyping only.

```css
/*

* Note: Importing from the CDN in production is not recommended.

* It's intended for prototyping only.

*/

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/slate.css";

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/sky.css";

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/grass.css";

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/violet.css";

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/crimson.css";



:root {

--gray-1: var(--slate-1);

--gray-2: var(--slate-2);



--blue-1: var(--sky-1);

--blue-2: var(--sky-2);



--green-1: var(--grass-1);

--green-2: var(--grass-2);



--blurple-1: var(--violet-1);

--blurple-2: var(--violet-2);



--caribbean-sunset-1: var(--crimson-1);

--caribbean-sunset-2: var(--crimson-2);

}
```

--------------------------------

### Integrate Radix Colors with emotion

Source: https://www.radix-ui.com/colors/docs/overview/usage

Usage is similar to styled-components, requiring specific imports from @emotion/react and @emotion/styled.

```js
import { gray, blue, red, green, grayDark, blueDark, redDark, greenDark } from "@radix-ui/colors";

import { ThemeProvider } from "@emotion/react";

import styled from "@emotion/styled";
```

--------------------------------

### Import and use Radix Colors in Vanilla CSS

Source: https://www.radix-ui.com/colors/docs/overview/usage

Import specific color scales and apply them using CSS variables. Dark mode is supported by applying a .dark class to a parent element.

```css
/* Import only the scales you need */

@import "@radix-ui/colors/gray.css";

@import "@radix-ui/colors/blue.css";

@import "@radix-ui/colors/green.css";

@import "@radix-ui/colors/red.css";

@import "@radix-ui/colors/gray-dark.css";

@import "@radix-ui/colors/blue-dark.css";

@import "@radix-ui/colors/green-dark.css";

@import "@radix-ui/colors/red-dark.css";

/* Use the colors as CSS variables */

.button {
  background-color: var(--blue-4);

  color: var(--blue-11);

  border-color: var(--blue-7);
}

.button:hover {
  background-color: var(--blue-5);

  border-color: var(--blue-8);
}
```

```html
<!-- For dark mode, apply a `.dark` class to <body> or a parent. -->

<body class="dark">
  <button class="button">Button</button>
</body>
```

--------------------------------

### Define semantic color aliases

Source: https://www.radix-ui.com/colors/docs/overview/aliasing

Map specific color scale steps to semantic variable names within the :root selector.

```css
/*

* Note: Importing from the CDN in production is not recommended.

* It's intended for prototyping only.

*/

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue.css";

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/green.css";

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/yellow.css";

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/red.css";



:root {

--accent-base: var(--blue-1);

--accent-bg-subtle: var(--blue-2);

--accent-bg: var(--blue-3);

--accent-bg-hover: var(--blue-4);

--accent-bg-active: var(--blue-5);

--accent-line: var(--blue-6);

--accent-border: var(--blue-7);

--accent-border-hover: var(--blue-8);

--accent-solid: var(--blue-9);

--accent-solid-hover: var(--blue-10);

--accent-text: var(--blue-11);

--accent-text-contrast: var(--blue-12);



--success-base: var(--green-1);

--success-bg-subtle: var(--green-2);

/* repeat for all steps */



--warning-base: var(--yellow-1);

--warning-bg-subtle: var(--yellow-2);

/* repeat for all steps */



--danger-base: var(--red-1);

--danger-bg-subtle: var(--red-2);

/* repeat for all steps */

}
```

```css
/*

* Note: Importing from the CDN in production is not recommended.

* It's intended for prototyping only.

*/

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/gray.css";

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue.css";

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/green.css";

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/yellow.css";

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/red.css";



:root {

--gray-solid: var(--gray-9);

--gray-placeholder-text: var(--gray-9);



--accent-border-hover: var(--blue-8);

--accent-focus-ring: var(--blue-8);

}
```

--------------------------------

### Integrate Radix Colors with styled-components

Source: https://www.radix-ui.com/colors/docs/overview/usage

Spread color scales into a theme object and provide it via ThemeProvider. Access colors within styled components using the theme prop.

```js
import { gray, blue, red, green, grayDark, blueDark, redDark, greenDark } from "@radix-ui/colors";

import styled, { ThemeProvider } from "styled-components";

// Create your theme

const theme = {
  colors: {
    ...gray,

    ...blue,

    ...red,

    ...green,
  },
};

// Create your dark theme

const darkTheme = {
  colors: {
    ...grayDark,

    ...blueDark,

    ...redDark,

    ...greenDark,
  },
};

// Use the colors in your styles

const Button = styled.button`
  background-color: ${(props) => props.theme.colors.blue4};
  color: ${(props) => props.theme.colors.blue11};
  border-color: ${(props) => props.theme.colors.blue7};
  &:hover {
    background-color: ${(props) => props.theme.colors.blue5};
    border-color: ${(props) => props.theme.colors.blue8};
  }
`;

// Wrap your app with the theme provider and apply your theme to it

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button>Radix Colors</Button>
    </ThemeProvider>
  );
}
```

--------------------------------

### Define Mutable Aliases for Light and Dark Modes

Source: https://www.radix-ui.com/colors/docs/overview/aliasing

Use CSS variables to remap color values between light and dark themes. Avoid component-specific naming to ensure variables remain reusable across different UI elements.

```css
/*

* Note: Importing from the CDN in production is not recommended.

* It's intended for prototyping only.

*/

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/slate.css";

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/slate-alpha.css";

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/white-alpha.css";

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/black-alpha.css";



:root {

--panel: white;

--panel-contrast: var(--black-a9);

--shadow: var(--slate-a3);

--overlay: var(--black-a8);

}



.dark {

/* Remap your colors for dark mode */

--panel: var(--slate-2);

--panel-contrast: var(--white-a9);

--shadow: black;

--overlay: var(--black-a11);

}
```

--------------------------------

### Defining Semantic Color Aliases

Source: https://www.radix-ui.com/colors/docs/overview/aliasing

Maps specific Radix color scales to semantic CSS variables within the :root selector.

```css
/*

* Note: Importing from the CDN in production is not recommended.

* It's intended for prototyping only.

*/

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue.css";

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/green.css";

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/yellow.css";

@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/red.css";



:root {

--accent-1: var(--blue-1);

--accent-2: var(--blue-2);

--accent-3: var(--blue-3);

--accent-4: var(--blue-4);

--accent-5: var(--blue-5);

--accent-6: var(--blue-6);

--accent-7: var(--blue-7);

--accent-8: var(--blue-8);

--accent-9: var(--blue-9);

--accent-10: var(--blue-10);

--accent-11: var(--blue-11);

--accent-12: var(--blue-12);



--success-1: var(--green-1);

--success-2: var(--green-2);

/* repeat for all steps */



--warning-1: var(--yellow-1);

--warning-2: var(--yellow-2);

/* repeat for all steps */



--danger-1: var(--red-1);

--danger-2: var(--red-2);

/* repeat for all steps */

}
```
Tokens:
Raw