radix themes/colors

62 notes in this subject, read out of this brain and free to use. This is page 1 of 2.

Radix Themes color system

Radix Themes comes with almost 30 color scales, each with light, dark, and alpha variants. The color system is powered by Radix Colors. Every scale is tuned to provide fully accessible contrast ratios, with steps corresponding to backgrounds, interactive components, borders, and text.

Custom color palette generator

Radix Themes 3.0 introduces a tool to create custom brand palettes. Users specify a primary color, a gray color, and page background to generate a color configuration that can be copied into theme styles.

Multiple semantic aliases for one scale

A single color scale can be mapped to multiple semantic aliases when the same scale is needed for different semantic purposes. For example, blue can be aliased to both 'accent' and 'info', yellow to both 'warning' and 'pending', green to both 'success' and 'valid', and red to both 'danger' and 'error'.

Use case color aliases

Each step in Radix Colors scales is designed for specific use cases. You can provide aliases based on these designed use cases to help teams know which step to use. Examples include aliases like 'bg-subtle', 'bg', 'bg-hover', 'bg-active', 'border', 'border-hover', 'solid', 'solid-hover', 'text', and 'text-contrast' mapped to their corresponding color steps.

Multiple use case aliases for one step

A single color step can be mapped to multiple use case aliases when the same step works for different purposes. For example, step 9 is designed for solid backgrounds but also works for input placeholder text. Step 8 is designed for hovered component borders but also works well for focus rings.

Mutable color aliases for light and dark modes

Mutable aliases map a variable to one color in light mode and a different color in dark mode. Common examples include components with white backgrounds in light mode and subtle gray backgrounds in dark mode (Card, Popover, DropdownMenu, HoverCard, Dialog), components with transparent black backgrounds in light mode and transparent white backgrounds in dark mode (Tooltip), shadows that use saturated transparent gray in light mode and pure black in dark mode, and overlays that use light transparent black in light mode and darker transparent black in dark mode.

Avoid specific component names in color aliases

Avoid using specific variable names like 'CardBg' or 'TooltipBg' because each variable will likely need to be used for multiple use cases. Use more generic functional names instead.

Renaming color scales

Color scales can be renamed for several reasons: to rename a saturated gray to 'gray' for simplicity, to rename 'sky' or 'grass' to 'blue' or 'green' for intuitive naming, or to rename a scale to match your brand identity, such as Discord's use of 'blurple'.

CSS semantic alias example

```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 { --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); --warning-1: var(--yellow-1); --warning-2: var(--yellow-2); --danger-1: var(--red-1); --danger-2: var(--red-2); } ``` This example shows how to create semantic color aliases in CSS by mapping scale variables to semantic names for all color steps.

CSS mutable alias example with light and dark modes

```css @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 { --panel: var(--slate-2); --panel-contrast: var(--white-a9); --shadow: black; --overlay: var(--black-a11); } ``` This example shows how to create mutable aliases that remap colors for dark mode, changing panel backgrounds from white to slate-2, overlay colors, and shadow definitions.

Semantic color aliases

Semantic aliases provide descriptive names for color scales to make theming easier. Instead of referencing scales by their actual names like 'blue' or 'red', you can create aliases like 'accent', 'primary', 'neutral', or 'brand'. This is especially helpful when implementing theme systems.

CSS-in-JS semantic alias example

```js import { blue, green, yellow, red } from "@radix-ui/colors"; const theme = { ...blue, ...green, ...yellow, ...red, accent1: blue.blue1, accent2: blue.blue2, accent3: blue.blue3, accent4: blue.blue4, accent5: blue.blue5, accent6: blue.blue6, accent7: blue.blue7, accent8: blue.blue8, accent9: blue.blue9, accent10: blue.blue10, accent11: blue.blue11, accent12: blue.blue12, success1: green.green1, success2: green.green2, warning1: yellow.yellow1, warning2: yellow.yellow2, danger1: red.red1, danger2: red.red2, }; ``` This example shows how to create semantic color aliases in CSS-in-JS by spreading color imports and mapping individual steps to semantic names.

CSS use case alias example

```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 { --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); } ``` This example shows how to create use case aliases in CSS that map color steps to their designed purposes like backgrounds, borders, solids, and text.

CSS scale renaming example

```css @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); } ``` This example shows how to rename color scales for simplicity or branding, such as renaming slate to gray, sky to blue, grass to green, or violet to blurple.

Custom palette accepts multiple CSS color formats including wide-gamut

You can use any common CSS color format in the custom palette input fields, or even wide-gamut color spaces such as color(display-p3 1 0.5 0). The generated CSS will provide the closest sRGB fallbacks.

Generating dark theme custom colors

To generate dark theme colors, toggle the appearance to dark in the website header. Make sure to paste the generated CSS after your light theme color overrides.

Custom color palette tool for generating Radix Colors scales

The custom color palette tool at /colors/custom generates a Radix Colors scale based on a couple reference colors. Once generated, paste the CSS into your project and use them the same way as regular Radix Colors scales.

Custom palette scales work well with Radix component designs

Generated scales are based on the Radix Colors scales themselves, so they will work well with similar component designs. When using a reasonable background color, the contrast ratios will be similar to what Radix Colors provide.

Custom palette includes steps 1-12, alpha variants, and wide-gamut definitions

Your custom color palette will include Radix Colors steps 1 through 12, as well as their alpha variants and wide-gamut color definitions. Wide-gamut color definitions ensure that alpha colors are displayed with full saturation in wide-gamut color spaces like Apple's displays that support P3, because alpha blending works differently in P3 than in sRGB.

Custom palette includes surface, indicator, and track colors for Radix Themes

The generated CSS includes extra colors used exclusively in Radix Themes: surface color used by certain variant='surface' components, indicator color used by components like Checkbox, Radio, and Tabs, and track color used by components like Slider and Progress Bar.

Remove unused colors from generated custom palette CSS

You can remove colors from the generated CSS that you don't need.

Radix Colors CDN production warning

Importing Radix Colors from the CDN in production is not recommended. CDN imports are intended for prototyping only.

Radix Colors npm package installation

Radix Colors can be installed from npm, yarn, or pnpm. The current version is 3.0.0. Installation commands are: npm install @radix-ui/colors, yarn add @radix-ui/colors, or pnpm add @radix-ui/colors.

Radix Colors CDN installation

Radix Colors can be loaded via CDN from jsdelivr.net. Individual color scales are available as separate CSS files. Available scales include gray, blue, green, and red, with both light and dark variants (e.g., gray.css, gray-dark.css). The CDN URL format is https://cdn.jsdelivr.net/npm/@radix-ui/colors@VERSION/COLORNAME.css. The @latest tag points to the latest version, or specific versions can be pinned (e.g., @3.0.0).

Radix Colors 1.0.0 CSS file naming breaking change

Radix Colors version 1.0.0, released June 23, 2023, changed CSS file names from camelCase to hyphen-separated naming. Specifically: grayA.css became gray-alpha.css, grayDark.css became gray-dark.css, and grayDarkA.css became gray-dark-alpha.css.

Radix Colors 2.1.0 release August 21 2023

Radix Colors version 2.1.0 was released on August 21, 2023. This release added ruby, iris, and jade color scales.

Radix Colors 3.0.0 release October 2 2023

Radix Colors version 3.0.0 was released on October 2, 2023. This release included a breaking change with a complete rework of all colors. It also added P3 colorspace versions of all scales.

Radix Colors 0.1.9 light theme class support

Radix Colors version 0.1.9, released June 19, 2023, applied light scale CSS variables to the .light-theme class in addition to the :root element.

Radix Colors 2.0.0 release August 7 2023

Radix Colors version 2.0.0 was released on August 7, 2023. This release included a breaking change with a complete rework of all colors, dramatically improving contrast across the board.

CSS variables naming for Radix Colors

Light scales apply their CSS variables to the :root element and to the .light and .light-theme classes. Dark scales apply their CSS variables to the .dark and .dark-theme classes. Color variables follow the pattern --colorname-number, where number is a step from 1 to 12.

Radix Colors are JavaScript objects

Radix Colors scales are simple JavaScript objects that can be used with any preferred styling solution.

Vanilla CSS import syntax for Radix Colors

Import Radix Colors CSS files using @import statements. Import only the scales you need. Example: @import "@radix-ui/colors/gray.css"; @import "@radix-ui/colors/blue.css"; Use colors as CSS variables with the naming pattern var(--colorname-step).

Vanilla CSS dark mode with Radix Colors

For dark mode, apply a .dark class to the body element or a parent container. This triggers the dark scale CSS variables.

styled-components integration with Radix Colors

Import color scales from @radix-ui/colors as JavaScript objects. Create a theme object by spreading the imported scales. Use colors in styled components by accessing theme.colors.colornamestep. Wrap your app with ThemeProvider and pass the theme prop.

emotion integration with Radix Colors

Usage with emotion is almost identical to styled-components. Import ThemeProvider from @emotion/react and styled from @emotion/styled, then use the same pattern as styled-components for theme creation and application.

vanilla-extract integration with Radix Colors

Import color scales from @radix-ui/colors. Use createTheme function to create a theme with the color scales spread into a colors object. The function returns an array with theme class name and vars object. Access colors using vars.colors.colornamestep in style definitions. Create a separate dark theme by calling createTheme with vars and dark color scales. Apply the theme to the body element via className.

Radix Colors available color scales

Light color scales include: gray, blue, green, red. Dark color scales include: grayDark, blueDark, greenDark, redDark. Each scale is a JavaScript object that can be imported and used independently.

Radix Colors are not customizable

Radix Colors are not intended to be customised. They are designed to be accessible, well-balanced, and harmonious. Any customisation would likely break these features. If custom brand colors are needed, the recommendation is to add custom scales alongside Radix scales, for example using Radix Colors for gray and semantic scales while adding custom brand or accent colors.

Gray scale options in Radix Colors

Radix Colors provides six gray scale options: gray (pure gray), mauve (based on a purple hue), slate (based on a blue hue), sage (based on a green hue), olive (based on a lime hue), and sand (based on a yellow hue).

Neutral pairing with gray scale

The pure gray scale will work well with any hue or palette when a neutral vibe is desired or when keeping things simple.

Natural pairing gray scales

To create a more colorful and harmonious vibe, choose the gray scale that is saturated with the hue closest to your accent hue. For example, if your accent is blue, use slate; if your accent is green, use sage.

Saturated grays with colorful UI components caution

When using saturated grays for an app background, be careful especially in dark mode. Colorful UI components like Badge may clash with saturated gray background colors.

Semantic color scale recommendations

Common semantic color pairings that work well in Western culture are: Error (red, ruby, tomato, crimson), Success (green, teal, jade, grass, mint), Warning (yellow, amber, orange), Info (blue, indigo, sky, cyan).

Text contrast steps in color scales

Steps 11 and 12 in Radix color scales are designed for low-contrast text and high-contrast text respectively. You can use either your accent scale or your gray scale for text, depending on the desired vibe.

Accent scale for colorful text vibe

Using your accent scale for text steps 11 and 12 results in a more colorful vibe. This approach works well for marketing sites.

Gray scale for functional text vibe

Using your gray scale for text steps 11 and 12 results in a more functional vibe. This approach works well for application interfaces.

Multiple color scales needed in applications

Most projects eventually need most of the available color scales for various reasons: supporting multiplayer mode with user-assigned colors, labeling features where users assign colors to tasks, or using badges to communicate states like 'pending' or 'rejected'.

Radix Colors harmony and balance

Radix Colors are well-balanced and designed to work in harmony. For product communication purposes, most color pairings will work together effectively.

Radix Colors neutral and achromatic scales

Radix Colors provides the following neutral and achromatic color scales: Gray, Mauve, Slate, Sage, Olive, and Sand. Each scale is available in four variants: the base scale, an Alpha variant for transparency, a Dark variant for dark mode, and a Dark Alpha variant combining dark mode with transparency.

Radix Colors warm hue scales

Radix Colors provides the following warm hue color scales: Yellow, Amber, Orange, Tomato, Red, Ruby, Crimson, Pink, Brown, Bronze, Gold, and Plum. Each scale is available in four variants: the base scale, an Alpha variant for transparency, a Dark variant for dark mode, and a Dark Alpha variant combining dark mode with transparency.

Radix Colors cool and blue hue scales

Radix Colors provides the following cool and blue hue color scales: Purple, Violet, Iris, Indigo, Blue, and Cyan. Each scale is available in four variants: the base scale, an Alpha variant for transparency, a Dark variant for dark mode, and a Dark Alpha variant combining dark mode with transparency.

Radix Colors green and teal hue scales

Radix Colors provides the following green and teal hue color scales: Teal, Jade, Green, Grass, Lime, Mint, and Sky. Each scale is available in four variants: the base scale, an Alpha variant for transparency, a Dark variant for dark mode, and a Dark Alpha variant combining dark mode with transparency.

Radix Colors overlay scales for light and dark mode

Radix Colors provides Black Alpha and White Alpha overlay scales that are designed for overlays and do not change across light and dark themes.

Color scale has 12 steps with specific use cases

Each of the 12 steps in the Radix Colors scale was designed for at least one specific use case. Steps 1–2 are for backgrounds, steps 3–5 for component backgrounds, steps 6–8 for borders, steps 9–10 for solid backgrounds, and steps 11–12 for text.

Steps 1–2: backgrounds use cases

Steps 1 and 2 are designed for app backgrounds and subtle component backgrounds and can be used interchangeably. Appropriate applications include main app background, striped table background, code block background, card background, sidebar background, and canvas area background. In light mode, white may be preferred for app background, while in dark mode, step 1 or 2 from a gray or coloured scale should be used.

Steps 3–5: component backgrounds use cases

Steps 3, 4, and 5 are designed for UI component backgrounds. Step 3 is for normal states, step 4 is for hover states, and step 5 is for pressed or selected states. If a component has a transparent background in its default state, step 3 can be used for its hover state.

Steps 11–12 text contrast guarantee on step 2 background

Steps 11 and 12, which are designed for text, are guaranteed to achieve Lc 60 and Lc 90 APCA contrast ratio respectively on top of a step 2 background from the same scale.

Steps 6–8: borders use cases

Steps 6, 7, and 8 are designed for borders. Step 6 is designed for subtle borders on components which are not interactive, such as sidebars, headers, cards, alerts, and separators. Step 7 is designed for subtle borders on interactive components. Step 8 is designed for stronger borders on interactive components and focus rings.

Steps 9–10: solid backgrounds use cases

Steps 9 and 10 are designed for solid backgrounds. Step 9 has the highest chroma of all steps, making it the purest step mixed with the least amount of white or black. Step 9 applications include website/app backgrounds, website section backgrounds, header backgrounds, component backgrounds, graphics/logos, overlays, coloured shadows, and accent borders. Step 10 is designed for component hover states where step 9 is the component's normal state background.

Step 9 foreground text color varies by color family

Most step 9 colors are designed for white foreground text. However, Sky, Mint, Lime, Yellow, and Amber are designed for dark foreground text on both steps 9 and 10.

Give your agent this brain