Library

15 min read

The sidebar inventory of every color asset in the project, where you browse palettes, gradients, and swatches with content-accurate thumbnails, narrow the list by name or tag, then load an asset into the active editor tab with a double-click or drag its colors where you need them.

The Library sidebar is Chroma’s project-asset browser. Three sub-tabs (Palettes, Gradients, Swatches), one shared search field, one shared tag filter, drag-drop in and out of the active editor tab, multi-select for batch operations, context menus for per-asset actions, and live refresh whenever the project’s color assets change on disk. The sidebar runs down the left edge of the Chroma window and stays visible regardless of which editor tab is active.

Summary

A project that uses Chroma builds up a lot of color assets: palettes for UI themes and character variants, gradients for ramps and skies, swatch collections for brand references. Browsing those assets through the Project window works but loses the visual cue (every ColorPaletteAsset shows the same generic icon). The Library sidebar fixes that by showing each asset’s actual content as the thumbnail: a color band for palettes, a gradient bar for gradients, a single swatch for swatch-collection entries.

The sidebar is also the connective tissue between Chroma’s editor tabs. Double-click a palette entry to load it in the Palette tab; double-click a gradient to load it in the Gradient tab. You can also drag palette or swatch colors from the library directly onto the Palette Editor to append them, or drag a swatch onto the gradient bar in the Gradient Editor to insert a new stop. The sidebar is always visible (subject to the resizable split between sidebar and right pane), so loading or feeding an asset is one click, not a tab-switch round-trip.

  • Browse every project palette, gradient, and swatch collection with content-accurate thumbnails instead of generic asset icons.
  • Filter by name (search field) and by palette-level tags (filter dropdown) to find a specific asset in a large project.
  • Double-click an asset to load it in the corresponding editor tab, or drag its colors onto the Palette or Gradient editor.
  • Manage assets with right-click context menus: duplicate, ping in the Project window, delete with confirmation.

Features

  • Three sub-tabs. Palettes (all ColorPaletteAsset files), Gradients (all ColorGradientAsset files), Swatches (all entries in the active ColorSwatchCollectionAsset). Tab choice is persisted across window opens via EditorPrefs.
  • Content-accurate thumbnails. Palettes show a color band sampling every entry across the asset’s width. Gradients show a full gradient bar evaluated from the asset’s stops. Swatches show a single solid color.
  • Shared search field. A Filter... text input above the tab bar that filters the active sub-tab by name or description (case-insensitive substring match). Clearing the field restores the full list.
  • Tag filter dropdown. A second filter that lists every palette-level tag found across the active sub-tab, plus an (All) sentinel. Filtering by a tag restricts the list to assets carrying that tag. Tag editing happens in the Palette Editor; the dropdown only consumes the tag values.
  • Multi-select on all sub-tabs. Standard list-view selection (click, Shift+click for ranges, Cmd/Ctrl+click for toggle). Multi-select unlocks the Duplicate N and Delete N context-menu variants.
  • Context menus. Palettes and Gradients sub-tabs: Duplicate / Duplicate N, Select Asset (single-select only; pings the asset in the Project window), separator, Delete… / Delete N… (with confirmation dialog). Swatches sub-tab: Add to Palette (when a palette is loaded in the editor), Remove Swatch / Remove N Swatches, separator, Clear All (with confirmation dialog).
  • Double-click to load. Double-clicking a palette entry loads it into the Palette tab and switches editor focus there. Double-clicking a gradient does the same for the Gradient tab. Double-clicking a swatch pushes its color into the Color tab as the active color.
  • Drag-drop onto editor tabs. Drag a palette from the Palettes sub-tab onto the Palette Editor to append its colors to the currently loaded palette. Drag a swatch from the Swatches sub-tab onto the gradient bar in the Gradient Editor to insert a stop at the drop position.
  • Drag-drop external files. Drop an external .ase, .gpl, .act, .json, .cpalette, .cgradient, .hex, or .grd file from disk (or from the Project window) directly onto the sidebar to auto-import it as a new project asset. See Import and Export for the full format matrix.
  • Live refresh. The sidebar subscribes to ChromaAssetPostprocessor.AssetsChanged, so adding, renaming, deleting, or modifying a color asset anywhere in the project (Project window, version control, external tools) updates the list immediately without a manual refresh.
  • Sortable columns. The Name column and the entry-count column are sortable; click either header to toggle ascending/descending order. Sort state is maintained independently per sub-tab.
  • Tab persistence. The active sub-tab is persisted in EditorPrefs["Scylla.Editor.Chroma.LibraryActiveTab"] and restored on the next Chroma window open. Defaults to Palettes when no value exists.
  • 256-swatch cap on Swatches. The ColorSwatchCollectionAsset backing the Swatches sub-tab is capped at 256 entries. Adds beyond the cap no-op silently; use a second collection asset for additional swatches.
  • Resizable sidebar. The split between the sidebar and the right pane is drag-resizable; the position is persisted across window opens.
  • New-asset buttons. A New Palette button at the top of the Palettes sub-tab and a New Gradient button at the top of the Gradients sub-tab create the respective asset, load it into the editor state, and ping it in the Project window.

Recipes

These recipes cover the Library sidebar’s main workflows. Each one is self-contained, so jump to the one that matches what you need right now.

Browse and find an asset

Problem. Your project has grown to thirty palettes and a dozen gradients. The Project window shows them all as identical ScriptableObject icons. You want to find the right asset by sight or by the tag you applied when you created it, without opening every asset one by one.

Solution. Open the Chroma window and make sure the sidebar is visible (it is always present on the left edge). Click the Palettes, Gradients, or Swatches tab to switch sub-tabs. Every entry in the list shows a content-accurate thumbnail: palettes display a color band, gradients display a gradient bar, swatches display a solid color rectangle. Use the two filter controls above the list to narrow it down:

  • Search field. Type any substring of the asset name or its description. The filter is case-insensitive and updates the list on every keystroke. Clear the field with the X button to restore the full list.
  • Tag dropdown. Select a tag from the dropdown to show only assets that carry that tag. Tags are defined on the palette asset itself (in the Palette Editor); the dropdown reads them automatically and sorts them alphabetically. Select (All) to remove the tag filter.

The two filters combine as AND: a search for dark plus a tag of ui shows only ui-tagged assets whose name or description contains “dark”.

Load an asset into the editor

Problem. You’ve found the palette or gradient you want to work on in the sidebar list. You need it open in the editor so you can add, edit, or reorder its contents.

Solution. Double-click the entry. The corresponding editor tab opens with that asset loaded, and focus switches to that tab. For palettes, the Palette tab activates; for gradients, the Gradient tab. For swatches, a double-click pushes the swatch’s color into the Color tab as the active color (it does not open a separate tab). Single-click only highlights the row for selection purposes and does not change the active editor asset.

Find a specific asset in the Project window

Problem. You see a palette in the Library list and you want to locate its .asset file in the Project window – to rename it, move it to a different folder, or inspect its serialized data directly.

Solution. Right-click the entry and choose Select Asset from the context menu (available in single-select only). The Project window scrolls to and highlights the asset, and the Inspector shows its serialized properties. This does not load the asset into Chroma; it only selects it in Unity.

Append palette colors to the active palette

Problem. You have two palettes, and you want to merge the colors from one into the other without copying swatches by hand – say you’re building a master character palette by combining a base skin palette with an outfit palette.

Solution. With the target palette loaded in the Palette tab, drag the source palette’s row from the Library Palettes sub-tab onto the Palette Editor’s work area. The palette’s colors are appended as new entries to the currently loaded palette, with names uniquified automatically. If no palette is loaded when you drop, Chroma creates a new palette from the dropped colors and loads it.

For multi-select, select several palette rows first (Shift+click or Cmd/Ctrl+click), then drag from any of the selected rows; all selected palettes’ colors are appended in sequence.

Append a swatch as a gradient stop

Problem. You’re editing a gradient and want to seed one of its stops from a named reference color in your swatch collection, rather than picking the color manually.

Solution. In the Swatches sub-tab, drag a swatch row onto the gradient bar in the Gradient Editor. A new color stop is inserted at the drop position using the swatch’s color. Multi-select and drag to insert several stops at once.

Import external palette and gradient files

Problem. You received a .ase swatch file from a graphic designer, a GIMP .gpl palette, or a Photoshop .grd gradient file, and you want to bring it into your Chroma asset library without leaving the editor.

Solution. Drag the file from Finder or Explorer (or from the Project window) directly onto the Library sidebar. Chroma auto-detects the format via its importer registry and creates a new project asset in the configured color directory (set in Project Settings > Scylla; see Preferences). The new asset appears in the sidebar immediately via the live-refresh path.

Supported formats for drop-import:

  • .ase (Adobe Swatch Exchange)
  • .gpl (GIMP Palette)
  • .act (Photoshop Color Table)
  • .json (Lospec Palette JSON)
  • .cpalette (Chroma Palette JSON)
  • .cgradient (Chroma Gradient JSON)
  • .hex (plain hex-code list)
  • .grd (Photoshop Gradient, GRD3 and GRD5 layouts)

The full format matrix, color-space mappings, and round-trip fidelity notes live on the Import and Export page.

Duplicate or delete assets

Problem. You want to save a palette as a baseline before experimenting with it (duplicate first, edit the copy), or you’ve accumulated several test palettes that should be cleaned up (delete with confirmation). You want to do this from within Chroma rather than hunting through the Project window.

Solution. Right-click any entry in the Palettes or Gradients sub-tab to open the context menu.

  • Duplicate (single-select) or Duplicate N Palettes / N Gradients (multi-select). Creates a copy of each asset in the same directory with a Copy suffix on the filename. The new asset is pinged in the Project window so you can find it immediately.
  • Delete… (single-select) or Delete N Palettes… / N Gradients… (multi-select). Shows a confirmation dialog before removing the asset from disk. The trailing ... in the menu label signals the confirmation step.

For multi-select, select the rows you want first (Shift+click for a range, Cmd/Ctrl+click for individual toggles), then right-click any selected row.

Manage the swatch collection

Problem. You use the Swatches sub-tab as a shared color reference, adding colors from palettes and removing the ones that are no longer relevant. You want to know how to add, remove, and clear swatches without accidentally destroying the whole collection.

Solution. The Swatches sub-tab reads from and writes to the project’s ColorSwatchCollectionAsset. Use the following paths:

  • Add from the active color. Click the Add button at the top of the Swatches sub-tab. The current color in the Color tab is added as a named swatch. The name is derived from the nearest-named color in the configured color database and is uniquified automatically.
  • Add from the Palette Editor. Drag one or more swatches from a loaded palette’s swatch grid in the Palette Editor onto the Swatches sub-tab to add them to the collection.
  • Remove individual swatches. Right-click a row and choose Remove Swatch (single) or Remove N Swatches (multi-select). No confirmation dialog for individual removes; the swatch can be re-added at any time.
  • Clear all. Right-click any row and choose Clear All. A confirmation dialog appears before emptying the collection.
  • Add to palette. Right-click a swatch row and choose Add to Palette (requires a palette to be loaded in the Palette tab). The selected swatches are appended to the active palette with uniquified names.

Tips and pitfalls

  • The sidebar shows every project asset of the matching type, regardless of folder. Filtering by folder is not directly supported; use the search field with a folder-name fragment for a similar effect (searching UI/ finds assets stored under Assets/UI/).
  • The active sub-tab is persisted; the search text is not. Reopening Chroma restores the sub-tab choice but starts the search field empty.
  • The Swatches sub-tab follows the project’s ColorSwatchCollectionAsset. When the project has none, the sub-tab shows an empty state. The first swatch added (via the Add button or drag) creates the asset under the configured default directory.
  • The 256-swatch cap is per-collection. A project that needs more than 256 reference colors can keep multiple ColorSwatchCollectionAsset files; the sidebar shows one at a time. To switch between collections, select the desired collection in the Project window.
  • Tags are palette-level, not swatch-level. The tag filter dropdown reads the Tags property on the ColorPaletteAsset itself, edited via the tags field in the Palette Editor. Per-swatch tags inside a palette are separate and do not appear in the tag filter dropdown.
  • Double-click loads; drag appends. Double-clicking a palette or gradient entry loads it as the active asset in the corresponding editor tab. Dragging a palette from the Library onto the Palette Editor appends its colors to the currently loaded palette rather than replacing it.
  • The live refresh fires on Project-window operations. Renaming, deleting, or moving a ColorPaletteAsset or ColorGradientAsset in the Project window updates the sidebar immediately. Version-control operations that add new asset files also trigger the refresh.
  • The thumbnail for a palette with one entry shows that single color across the entire band. Palettes with very small entry counts may look like solid-color rows; the sidebar does not pad the band with neutral space.
  • The thumbnail for a gradient with no alpha variation shows a fully-opaque bar. Alpha rendering uses a checkerboard background that only becomes visible where alpha drops below 1.
  • The context menu’s Select Asset does not load the asset into Chroma. It only pings the asset in the Project window. To load into Chroma, double-click instead.
  • External file drops land in the configured palette or gradient directory, not in the drop target’s visual location. A .ase dropped onto the sidebar imports into the directory set in Project Settings, not into whatever folder the drop visually targeted. See Preferences for how to configure the target directories.
  • The sidebar cannot show non-Chroma color assets. Unity’s built-in Gradient (used inline on serialized fields) and Color[] arrays are not project assets and do not appear in the sidebar. Only ColorPaletteAsset, ColorGradientAsset, and ColorSwatchCollectionAsset files are surfaced. See Palette and Gradient assets for the ColorAssetRegistry that Chroma uses for asset discovery.
Updated on July 9, 2026