repository·main·Indexed 23 days ago
https://github.com/radix-ui/colorsAn accessible color system providing consistent color scales for UI development. Version 3.0.0 includes light and dark mode palettes, standard hex scales, and display-p3 wide-gamut support. It features primary scales (1-12), accent scales with alpha transparency (A1-A12), and specialized blackA and whiteA opacity scales.
You can install the Radix Colors package using npm, yarn, or pnpm depending on your preferred package manager.
# using npm
npm install @radix-ui/colors
# using yarn
yarn add @radix-ui/colors
# using pnpm
pnpm add @radix-ui/colorsRadix Colors provides several color scales specifically designed for dark mode themes. These scales are exported as constant objects and include different color spaces and opacity variants:
grayDark, mauveDark): Standard hex color values for dark mode.grayDarkA, mauveDarkA): Accent colors with varying opacities, useful for highlights and overlays.grayDarkP3, mauveDarkP3): Colors using the display-p3 color space for wider gamut support on compatible displays.grayDarkP3A, mauveDarkP3A): Accent colors in the display-p3 color space with varying opacities.Each scale follows a consistent naming convention for its steps (e.g., color1 through color12 for base colors, and colorA1 through colorA12 for accent colors).
The @radix-ui/colors package exports several color palettes. You can import specific palettes or all of them from the main entrypoint. The available palettes include:
dark: The dark mode palette.light: The light mode palette.blackA: The black-alpha palette (typically used for dark backgrounds).whiteA: The white-alpha palette (typically used for light backgrounds).Each palette provides a scale of color steps designed for consistent UI design.
The @radix-ui/colors package exports several color scale objects for light mode themes. Each scale is organized into specific sub-objects based on the color format and intended use:
jade, green, sky): Contains 12 steps (1-12) in hex format. These are the primary color scales.jadeA, greenA, skyA): Contains 12 steps (A1-A12) in hex format, typically used for accents or highlights.jadeP3, greenP3, skyP3): Contains 12 steps (1-12) using the color(display-p3 ...) syntax for wide-gamut color support.jadeP3A, greenP3A, skyP3A): Contains 12 steps (A1-A12) using the color(display-p3 ... / opacity) syntax for wide-gamut accents with alpha transparency.Available color families in this segment include jade, green, grass, brown, bronze, gold, sky, mint, lime, yellow, amber, and orange.
Accent scales (suffixed with DarkA or DarkP3A) provide color values with built-in alpha transparency, useful for overlays, borders, or subtle highlights in dark mode.
*DarkA: Standard hex-based accent scales (e.g., jadeDarkA, greenDarkA).*DarkP3A: P3-based accent scales using the color(display-p3 ... / alpha) syntax (e.g., jadeDarkP3A, greenDarkP3A).The following constant objects are exported for dark mode color scales. Each object contains a mapping of scale steps to color values (hex or display-p3 strings).
export const grayDark = {
gray1: "#111111",
gray2: "#191919",
gray3: "#222222",
gray4: "#2a2a2a",
gray5: "#313131",
gray6: "#3a3a3a",
gray7: "#484848",
gray8: "#606060",
gray9: "#6e6e6e",
gray10: "#7b7b7b",
gray11: "#b4b4b4",
gray12: "#eeeeee",
};
export const grayDarkA = {
grayA1: "#00000000",
grayA2: "#ffffff09",
grayA3: "#ffffff12",
grayA4: "#ffffff1b",
grayA5: "#ffffff22",
grayA6: "#ffffff2c",
grayA7: "#ffffff3b",
grayA8: "#ffffff55",
grayA9: "#ffffff64",
grayA10: "#ffffff72",
grayA11: "#ffffffaf",
grayA12: "#ffffffed",
};
export const grayDarkP3 = {
gray1: "color(display-p3 0.067 0.067 0.067)",
gray2: "color(display-p3 0.098 0.098 0.098)",
gray3: "color(display-p3 0.135 0.135 0.135)",
gray4: "color(display-p3 0.163 0.163 0.163)",
gray5: "color(display-p3 0.192 0.192 0.192)",
gray6: "color(display-p3 0.228 0.228 0.228)",
gray7: "color(display-p3 0.283 0.283 0.283)",
gray8: "color(display-p3 0.375 0.375 0.375)",
gray9: "color(display-p3 0.431 0.431 0.431)",
gray10: "color(display-p3 0.484 0.484 0.484)",
gray11: "color(display-p3 0.706 0.706 0.706)",
gray12: "color(display-p3 0.933 0.933 0.933)",
};
export const grayDarkP3A = {
grayA1: "color(display-p3 0 0 0 / 0)",
grayA2: "color(display-p3 1 1 1 / 0.034)",
grayA3: "color(display-p3 1 1 1 / 0.071)",
grayA4: "color(display-p3 1 1 1 / 0.105)",
grayA5: "color(display-p3 1 1 1 / 0.134)",
grayA6: "color(display-p3 1 1 1 / 0.172)",
grayA7: "color(display-p3 1 1 1 / 0.231)",
grayA8: "color(display-p3 1 1 1 / 0.332)",
grayA9: "color(display-p3 1 1 1 / 0.391)",
grayA10: "color(display-p3 1 1 1 / 0.445)",
grayA11: "color(display-p3 1 1 1 / 0.685)",
grayA12: "color(display-p3 1 1 1 / 0.929)",
};
// ... (Other scales like mauveDark, slateDark, sageDark, oliveDark, sandDark, tomatoDark, redDark, rubyDark, crimsonDark, pinkDark, plumDark, purpleDark, violetDark, irisDark, indigoDark, blueDark, cyanDark, tealDark follow the same pattern)The blackA object provides a scale of black colors with varying alpha (opacity) levels using the rgba format. The scale ranges from blackA1 (5% opacity) to blackA12 (95% opacity).
export const blackA = {
blackA1: "rgba(0, 0, 0, 0.05)",
blackA2: "rgba(0, 0, 0, 0.1)",
blackA3: "rgba(0, 0, 0, 0.15)",
blackA4: "rgba(0, 0, 0, 0.2)",
blackA5: "rgba(0, 0, 0, 0.3)",
blackA6: "rgba(0, 0, 0, 0.4)",
blackA7: "rgba(0, 0, 0, 0.5)",
blackA8: "rgba(0, 0, 0, 0.6)",
blackA9: "rgba(0, 0, 0, 0.7)",
blackA10: "rgba(0, 0, 0, 0.8)",
blackA11: "rgba(0, 0, 0, 0.9)",
blackA12: "rgba(0, 0, 0, 0.95)",
};For high-end displays that support the P3 color gamut, use the *DarkP3 scales. These provide color values using the color(display-p3 ...) CSS function, offering wider color coverage than standard hex codes.
Example scales include:
jadeDarkP3greenDarkP3grassDarkP3brownDarkP3bronzeDarkP3goldDarkP3skyDarkP3mintDarkP3limeDarkP3yellowDarkP3amberDarkP3orangeDarkP3Standard dark mode scales provide hex code values for each step in the color scale. Use these for general dark theme applications.
Example scales include:
jadeDarkgreenDarkgrassDarkbrownDarkbronzeDarkgoldDarkskyDarkmintDarklimeDarkyellowDarkamberDarkorangeDarkThe blackP3A object provides a scale of black colors with varying alpha levels specifically using the display-p3 color space. This is useful for wide-gamut color support in modern browsers. The scale ranges from blackA1 (5% opacity) to blackA12 (95% opacity).
export const blackP3A = {
blackA1: "color(display-p3 0 0 0 / 0.05)",
blackA2: "color(display-p3 0 0 0 / 0.1)",
blackA3: "color(display-p3 0 0 0 / 0.15)",
blackA4: "color(display-p3 0 0 0 / 0.2)",
blackA5: "color(display-p3 0 0 0 / 0.3)",
blackA6: "color(display-p3 0 0 0 / 0.4)",
blackA7: "color(display-p3 0 0 0 / 0.5)",
blackA8: "color(display-p3 0 0 0 / 0.6)",
blackA9: "color(display-p3 0 0 0 / 0.7)",
blackA10: "color(display-p3 0 0 0 / 0.8)",
blackA11: "color(display-p3 0 0 0 / 0.9)",
blackA12: "color(display-p3 0 0 0 / 0.95)",
};