Colors

Learn about the color system in Radix Themes Native.

Colors

Radix Themes Native provides a comprehensive color system with carefully designed color scales for both light and dark modes.

Color Scale Structure

Each color has a 12-step scale designed for different purposes:

Step	Purpose
1	App background
2	Subtle background
3	UI element background
4	Hovered UI element background
5	Active / Selected UI element background
6	Subtle borders
7	UI element border, focus ring
8	Hovered UI element border
9	Solid backgrounds
10	Hovered solid backgrounds
11	Low-contrast text
12	High-contrast text

Using Colors

In Components

Most components accept a color prop:

<Button color="blue">Blue Button</Button>
<Badge color="green">Success</Badge>
<Callout color="red">Error message</Callout>

In Custom Styles

Access colors through the theme object:

import { useTheme, useThemeMode } from 'radix-native-ui';

function CustomComponent() {
  const theme = useTheme();
  const mode = useThemeMode();

  // Get the blue color scale
  const blueScale = mode === 'dark'
    ? theme.colors.blue.dark
    : theme.colors.blue;

  return (
    <View style={{
      backgroundColor: blueScale[3],
      borderColor: blueScale[6]
    }}>
      <Text style={{ color: blueScale[11] }}>
        Custom styled component
      </Text>
    </View>
  );
}

Available Colors

Accent Colors

amber - Warm yellow-orange

black - Pure black

blue - Classic blue

bronze - Metallic brown

brown - Earth brown

crimson - Deep red

cyan - Light blue-green

gold - Rich golden

grass - Natural green

green - Standard green

indigo - Purple-blue

iris - Light purple

jade - Cool green

lime - Bright green

mint - Soft green

orange - Vibrant orange

pink - Light red

plum - Deep purple

purple - Standard purple

red - Standard red

ruby - Jewel red

sky - Light blue

teal - Blue-green

tomato - Red-orange

violet - Blue-purple

white - Pure white

yellow - Bright yellow

Gray Scales

Scale	Description	Best For
gray	Standard neutral gray	General purpose
mauve	Warm gray with purple tint	Warm color schemes
olive	Green-tinted gray	Natural/organic themes
sage	Soft green-tinted gray	Calm, natural themes
sand	Warm beige-tinted gray	Warm, earthy themes
slate	Cool blue-tinted gray	Cool, modern themes

Alpha Colors

For transparent overlays, use the alpha color scales:

import { useTheme, useThemeMode } from 'radix-native-ui';

function Overlay() {
  const theme = useTheme();
  const mode = useThemeMode();

  // Use blackAlpha for light mode, whiteAlpha for dark mode
  const alphaScale = mode === 'dark'
    ? theme.colors.whiteAlpha
    : theme.colors.blackAlpha;

  return (
    <View style={{
      backgroundColor: alphaScale[3] // 8% opacity
    }}>
      <Text>Overlay content</Text>
    </View>
  );
}

Alpha Scale Values

Step	Opacity
1	4%
2	6%
3	8%
4	12%
5	16%
6	24%
7	36%
8	48%
9	64%
10	80%
11	92%
12	100%

High Contrast Mode

Many components support a highContrast prop for improved visibility:

<Button highContrast>High Contrast Button</Button>
<Badge highContrast color="blue">Badge</Badge>

High contrast mode uses:

• Background: Color step 11 (instead of 9)
• Text: Black/white (depending on mode)

Color Helper Functions

getVariantColors

Get colors for a specific variant:

import { getVariantColors, useTheme, useThemeMode } from 'radix-native-ui';

function CustomButton({ variant = 'solid', highContrast = false }) {
  const theme = useTheme();
  const mode = useThemeMode();

  const colors = getVariantColors(
    theme,
    'blue',      // color name
    mode,
    variant,     // 'solid' | 'soft' | 'outline' | 'ghost'
    highContrast
  );

  // Returns: { backgroundColor, textColor, borderColor }
}

getColorScale

Get the full color scale:

import { getColorScale, useTheme, useThemeMode } from 'radix-native-ui';

function Component() {
  const theme = useTheme();
  const mode = useThemeMode();

  const blueScale = getColorScale(theme, 'blue', mode);
  // Returns color scale with steps 1-12
}

needsDarkText

Check if a color needs dark text (for light backgrounds):

import { needsDarkText } from 'radix-native-ui';

function Component() {
  // Returns true for colors like sky, mint, lime, yellow, amber
  const needsDark = needsDarkText('yellow');
}

getForegroundColor

Get the appropriate text color for a given background:

import { getForegroundColor, useTheme, useThemeMode } from 'radix-native-ui';

function Component() {
  const theme = useTheme();
  const mode = useThemeMode();

  const textColor = getForegroundColor(theme, 'blue', mode, false);
  // Returns the appropriate text color for the background
}

Best Practices

1. Use appropriate colors - Use green for success states, red for errors, amber for warnings
2. Maintain contrast - Ensure text has sufficient contrast against backgrounds
3. Use highContrast - Enable for accessibility when needed
4. Test both modes - Always test your UI in both light and dark modes

Related

• ThemeProvider
• Dark Mode
• Color Helpers API