Tutorials

Setting Up Android Colors with PaletteRx

Android manages colors through XML resource files (res/values/colors.xml) and Material Design theme attributes. Each color gets a resource name that you reference in layouts, styles, and code. PaletteRx generates the XML entries and theme attribute mappings your Android project needs.

Android's Color Resource System

In colors.xml, each color is defined as a named resource: <color name="primary">#4F46E5</color>. These resources are referenced in XML layouts as @color/primary and in Kotlin/Java as R.color.primary. Material Design's theme system adds semantic layer on top with attributes like colorPrimary, colorSecondary, and colorSurface.

Exporting from PaletteRx

Select Android from the Native Apps section in PaletteRx's export step. The output generates two blocks: the colors.xml resource entries with each color named by its PaletteRx role, and a themes.xml snippet that maps your colors to Material Design theme attributes.

Setting Up colors.xml

Open your project's res/values/colors.xml file and paste the generated color resources. Each PaletteRx role maps to a standard Android naming convention: Primary becomes primary, Dark Base becomes dark_base, and so on.

Material Design Theme Integration

Material Design 3 uses color roles (primary, secondary, tertiary, surface, background) that map directly to PaletteRx's role system. The exported theme snippet sets colorPrimary, colorSecondary, colorSurface, and colorOnPrimary using your palette values.

Material Design also generates tonal palettes from your base colors. The key tones (0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100) are derived automatically, so getting the base values right is the critical step.

💡 Tip: Android supports night mode via res/values-night/colors.xml. Build a dark palette in PaletteRx and export it separately for your night mode color resources.

Ready to Build Your Palette?

PaletteRx guides you from color selection to accessible, export-ready design systems in minutes.

🎨 Launch PaletteRx