Colors
Type-safe color primitives from hex codes to wide gamut P3,
with built-in Radix palette and theme support.
Familiar Formats
Start with what you know. Hex codes, RGB values, and HSL are all supported.HexColor.hex('#3b82f6')
RGBColor.rgb(59, 130, 246)
HSLColor.hsl(217, 91, 60)
With Alpha
Hex with alphaColor.hex('#3b82f680')
RGBAColor.rgb(59, 130, 246, 0.5)
HSLAColor.hsl(217, 91, 60, 0.5)
Modern Color Spaces
Take advantage of modern CSS color capabilities for wider gamuts and perceptual uniformity.Display P3~25% more colors than sRGB. Vivid reds, greens, and cyans. Supported on modern Apple devices.
Vivid Red (P3)Color.p3(1, 0.2, 0.1)
Vivid Green (P3)Color.p3(0, 0.9, 0.5)
OKLCHPerceptually uniform lightness. Great for generating consistent color scales.
CoralColor.oklch(0.7, 0.15, 29)
SkyColor.oklch(0.7, 0.15, 250)
Palette Colors
Access the Radix color system directly. 30 hues, 12 steps each, designed for accessibility.Theme Colors
Colors that respond to the current Motif. Change the accent color once, and these update everywhere.Color.currentAccentThe 12 semantic steps for the current accent color.
AppBackground
1
SubtleBackground
2
Element
3
ElementHover
4
ElementActive
5
SubtleBorder
6
Border
7
BorderHover
8
Solid
9
SolidHover
10
MutedText
11
Text
12
Color.currentGrayThe 12 semantic steps for the current gray scale.
AppBackground
1
SubtleBackground
2
Element
3
ElementHover
4
ElementActive
5
SubtleBorder
6
Border
7
BorderHover
8
Solid
9
SolidHover
10
MutedText
11
Text
12
Use these for UI that adapts to any theme:Color.currentAccent.Solid // primary buttonsColor.currentGray.Text // body textColor.currentGray.Border // input borders