Colors

Build your palette with the Palette Generator. The web tool produces every USS file described on this page — base color vars, utility classes, and component templates — in a single round-trip you drop into your project's Assets/UI/Theme/.

Already have a palette and just want to override individual values? See Theme Stack — where to put your overrides so package updates don't overwrite them.

The shipped ramps

Luna's default palette — what the Essentials sample defines in Theme/Colors/color-variables.uss, and what the Palette Generator's LunaUI preset reproduces — is 32 chromatic ramps plus 3 neutral ramps (slate, neutral, stone), 11 tones each (50 → 950). Browse them below; click a swatch to copy its var(--color-{name}-{tone}) reference or hex value.

The Palette Generator

The Palette Generator is a web tool that:

• Builds 11-tone color ramps (50 → 100 → … → 900 → 950) for as many hue palettes as you want — same scale as Tailwind.
• Builds 11-tone neutral ramps separately (greys for backgrounds, borders, text).
• Lets you tune hue / saturation / lightness offsets per ramp, with WCAG-contrast feedback so you can see legibility tone-by-tone.
• Exports three categories of USS, ready to drop straight into your TSS chain.

Open the tool, pick a preset (LunaUI / Tailwind / Material / Midnight / Pastel) or start from scratch, adjust per-ramp, then click Export.

What it exports

The Export modal has three tabs. You can download some or all.

1. Base color vars (color-variables.uss)

The raw :root { --color-{name}-{tone}: #...; } declarations — one block per hue palette, plus neutrals. Every other USS layer references these via var(--color-...).

Example fragment from an export:

This is the foundation layer — every other export depends on these tokens existing. Always include this in your bundle.

2. Utility classes (utility-colors.uss)

Tailwind-style one-property USS classes that route each token to a single CSS property:

Use these for ad-hoc styling — backgrounds on panels, accent colors on labels — without writing custom selectors.

Two export options on this tab:

• Export All as 1 .uss — single combined file (typical choice).
• Export Each .uss — separate file per CSS property (bg-colors.uss, text-colors.uss, border-colors.uss, …) for tree-shaking large palettes.

The -half suffix

Elsewhere in these docs and in a few sample files you'll meet a -half variant — --color-scarlet-500-half, class="text-red-500-half". It means the same tone at 50% opacity. It's a convention carried over from earlier Luna palettes: the current Palette Generator exports and the shipped Essentials theme do not define -half tokens or classes, so where you want one, define the alias yourself (in a USS file imported after your base colors):

3. Component templates (13 files)

The thing that makes Luna's components recolor with one class. Each Luna control has an internal set of CSS variables (--btn-bg, --btn-bg-hover, --color-slider-fill, …). The component templates route palette tokens onto those internal variables, per color class:

That's why <engine:Button class="btn red"/> works — btn defines the structure (padding, border-radius, layout); red routes the red palette into the button. Change one class to recolor.

The Components tab ships templates for 13 controls, each enableable independently:

Plus a Custom template option — write your own component-internal-variable mapping using the same {color} placeholder. Useful for routing palette tokens onto your project's own components.

Note the UI Effects row: the color is the same plain color word as everywhere else, scoped by the compound selector .luna-fx.{color} so it only activates on elements that carry the luna-fx marker class. So <Button class="luna-fx luna-fx-btn luna-fx-clay yellow"/> shares its yellow with class="btn yellow" — one palette word drives buttons and effects alike. See UI Effects for the effect classes themselves.

You already have all of this if you imported Essentials. The sample theme ships the same routing pre-baked: Theme/Colors/component-colors.uss holds the .{component}.{color} blocks for all 32 chromatic ramps across every control above, and Theme/Colors/component-colors-neutral.uss holds the slate / neutral / stone versions. The generator's component templates exist so you can re-export that routing for your own palette — the export replaces those two files' role in your TSS.

Chromatic vs Neutral modes

Each component template has two modes in the editor:

• Chromatic — applies to the hue palettes (red, blue, coral, …). Default tone-mapping (e.g. --btn-bg: {color}-400; --btn-bg-hover: {color}-300).
• Neutral — applies to the neutral palettes (slate, neutral, stone). Brightening a grey works differently than brightening a red, so neutrals often need their own tone curve (e.g. backgrounds tend to want 100/200 instead of 400).

The generator emits a {name}.uss for chromatics and a {name}_Neutral.uss for neutrals — both reference the same base tokens but with different {color}-{tone} routing.

Tone-mapping editor

Open the Components tab to see the per-line tone editor:

• Each var(--color-{color}-{tone}) reference is parseable. Click the tone (e.g. 400) to swap it to a different tone, or use ± buttons to bump by ±1.
• The ± controls on the {color} itself shift the palette family by an offset (e.g. {color+1}-50 becomes {color-2}-50) — useful for "the focus border picks the next palette" patterns.
• Pin a line to a fixed color instead of {color}. Click the pushpin to switch to a colour picker — handy for "always use the neutral-50 for text" routes that shouldn't shift per color class.

Or edit the template raw if you prefer — both views stay in sync.

Dropping into Unity

1. Place the files under Assets/UI/Theme/Colors/ (or wherever your project's theme lives):

   Assets/UI/Theme/Colors/ ├── color-variables.uss ├── utility-colors.uss ├── UButton_Colors.uss ├── USlider_Colors.uss └── … (the component templates you enabled)

2. @import them in your TSS — color-variables.uss first, then utilities, then component templates:

   css

   /* MyProjectTheme.tss */ @import url("/Packages/com.cupkekgames.luna/Runtime/Setup/CupkekGamesMainTheme.tss"); @import url("/Assets/UI/Theme/Colors/color-variables.uss"); @import url("/Assets/UI/Theme/Colors/utility-colors.uss"); @import url("/Assets/UI/Theme/Colors/UButton_Colors.uss"); @import url("/Assets/UI/Theme/Colors/USlider_Colors.uss"); /* … */

   Order matters: component templates reference variables defined in color-variables.uss, so the base file must import first.

3. Wire to Panel Settings — point your Panel Settings' Theme StyleSheet at your TSS. See Theme Stack for detail.

4. Use the color classes in UXML:

   xml

   <engine:Button class="btn red" text="Buy"/> <engine:Button class="btn coral" text="Cancel"/> <engine:Toggle class="unity-toggle violet" label="Notifications"/> <engine:VisualElement class="bg-neutral-100 text-neutral-900"/>

   The component class defines structure; the color class routes palette variables into the component's internal vars. Switch a button's color by changing one class — no per-element style overrides.

Tone-picking rules of thumb

The tone scale is consistent across all palettes — these conventions are what the default templates encode:

The Palette Generator's WCAG-contrast preview bakes this into the UI — you can see legibility per tone pairing as you tune the ramp.

Defining semantic aliases (optional)

The exported --color-{hue}-{tone} tokens are hue-named. If you'd rather refer to colors by role (--color-primary-500), alias them in your own USS imported after color-variables.uss:

Then re-skin the whole project by swapping which raw palette each semantic alias points at — no need to re-export.

See also

• Palette Generator — the web tool
• Palette Export — older companion page covering the basic round-trip
• Theme Stack — how the color-variables.uss fits into the broader Theme @import chain
• Styling — per-topic styling deep dives (Layout, Text, Border, etc.)
• UI Toolkit Basics — USS variables — primer on var(--…)