# Color ## Library The Color library is where you build, organize, and refine color palettes for Motion Studio and your Adobe extension panels. Every change you make here syncs immediately to the After Effects and Illustrator color panels, so the palette you edit on the desktop is the same one you use inside Adobe. The library page lists all of your palettes as previewable swatch tiles. You can drag tiles to reorder them, group them into folders, rename a palette by clicking its title, and use the search bar to filter by name. Selecting one or more palettes (Cmd/Ctrl-click to multi-select, Shift-click for ranges) gives you access to export, delete, and "Create Mini" actions in the footer and right-click menu.
Your color palettes can be used in the Motion Studio base panel, and color panels in AE and ILST. All changes will be immediately reflected in your open Adobe extension panels:
Double-click a palette to open the Palette Editor, which has two views: **Designer** and **Matrix,** toggled from the page header. *** ## Creating a palette There are three ways to create a new color palette: 1. New empty palette — use the "+" button in the library footer. You get a blank palette with no colors. Add new colors from the Designer view. 2. Create from image — drop a PNG or JPG (or click to pick a file) onto the Create Palette from Image modal. Motion Studio extracts the colors from the image. The Color Variation slider controls how tightly colors are grouped: drag toward the right for fewer, more distinct hues; drag left for more granular variations. 3. Import — see [#importing-palettes](#importing-palettes "mention") below. Once created, click the palette name to rename it. Right-click any palette tile for the context menu (export, delete, duplicate, create mini, move to folder, etc.). *** ## Designer The Designer is the default editor view. It's split into three regions: * The color wheel with the harmony selector * The color picker / sliders for the selected color(s) * The swatch grid of every color in the palette
### Color wheel The wheel shows every color in the palette as a draggable cursor. The position is based on the color's hue (angle around the wheel) and saturation (distance from the center). Brightness is shown as a dark overlay across the whole wheel. When you select a color, the overlay updates to that color's brightness. * Drag a cursor to move that color around the wheel. * Hold Shift while dragging to lock the hue. * Hold Cmd/Ctrl while dragging to lock the saturation. * Click an empty spot on the wheel with a single color selected to snap it to that hue/saturation. * Locked colors show a dimmed cursor and cannot be dragged. Dragging behaves differently depending on the active harmony — see the next section. ### Harmony types The Harmony Type dropdown above the wheel constrains how colors relate to each other. When you drag one cursor, the others move with it according to the rules of the active harmony:
HarmonyBehavior
MonochromaticAll colors share the same hue. Dragging a swatch varies the hue together. Saturation differences are preserved with a "mirror". When saturation hits the edge of the wheel it bounces back rather than clamping, so the other cursors keep their visual relationship.
AnalogousColors are spaced within a 60° arc on the wheel. Hue offsets between cursors are preserved as you drag.
ComplementaryTwo opposing hues 180° apart, with saturation variations on each side.
Split ComplementaryThree hues: the base, plus the two colors 150°/210° from it.
TriadicThree hues evenly spaced 120° apart.
TetradicFour hues evenly spaced 90° apart (two complementary pairs).
CustomNo constraint — each color is independent. Dragging only moves the one you grab.
Switching from Custom to any constrained harmony will regenerate the unlocked colors in the palette to fit the new rule. Lock colors you want to preserve before switching (lock toggle is on each swatch tile). When you press **Add Color**, the new swatch is generated to fit whatever harmony is active — it inherits brightness from the existing palette so it sits visually with the others. ### Color picker and sliders Below the wheel is the picker for the selected color(s): * With one color selected, edits apply to just that color. * With multiple selected, the picker shows "Apply to N colors" and edits are applied to all selected at once. * With none selected, "Apply to all colors" — the picker edits every unlocked color in the palette. Use the mode dropdown at the top of the picker to switch between color spaces: * Wheel - Hex input + 2D HSL picker. Single-color only. Type a hex value or click/drag the gradient. * RGB * HSL * HSB * CMYK * LAB Each slider can be typed into directly, dragged, or scrolled. Conversion between modes is non-destructive — switching from RGB to LAB and back gives you the same color. The picker color mode is persisted per session, so the editor remembers which space you prefer. ### Swatch Actions Each color in the palette has a tile showing the color, its name, and four actions on hover: * Rename: Click on the title to rename the swatch. The default name is the HEX value, but this can be renamed to anything ("Light Blue", "Scene 02 - Grass", etc.) * Edit: opens the per-color picker as a popover. * Select: toggles selection. Selected colors get a checkmark; the wheel cursor gets a highlighted ring. * Lock: locks the color so harmony regeneration and bulk edits skip it. Shift-click the lock to lock or unlock a range up to the previous color with the same lock state. * Delete: removes the color. #### Other Actions: * Drag tiles to reorder them in the palette. * Click a tile to toggle its selection (single-select). * Cmd/Ctrl-click to multi-select. * Shift-click to select through a range. * Press 1–9 to select the color at that position. * Press Cmd/Ctrl + 1–9 to toggle lock on the color at that position. ### Saving The Designer holds local pending edits until you press Cmd/Ctrl+S or click Save. *** ## Matrix The Matrix view evaluates every pair of colors in the palette for WCAG contrast compliance. This is useful for designing accessible UI, captions, lower-thirds, or any motion graphic that has to be legible. Every color in the palette is both a row header (foreground) and a column header (background). Each cell shows what the row color looks like sitting on top of the column color, along with the contrast ratio and pass/fail status.
### Content type The content type dropdown (top right of the Matrix) sets which WCAG thresholds are applied. The same color pair can pass at one size and fail at another, because the standard demands more contrast for small text: | Content type | AA threshold | AAA threshold | | ------------ | ------------ | -------------------- | | Body Text | 4.5 : 1 | 7 : 1 | | Large Text | 3 : 1 | 4.5 : 1 | | Graphics | 3 : 1 | 3 : 1 (capped at AA) | ### Reading a cell Each cell shows: * The color pair — the cell is filled with the column color (background) and renders the row color as the foreground sample. * The contrast ratio (top-left badge) — e.g. 4.7 means 4.7:1. * The grade (top-right badge) — AAA, AA, or a fail icon. * A blue ring highlights any header whose color is currently selected. Click the foreground sample to select the row color; click the cell background to select the column color. Right-click any cell to open the same per-color context menu as the Designer. ### Filters Three filters (Fail / AA / AAA) toggle which cells stay at full opacity. Disabled grades fade into the background. With nothing toggled, all three are treated as active. ### Visible Matrix Colors Not every color in a palette is one you'd use for foreground/background. Right-click a color tile (in the Designer) and toggle Include in Matrix to keep it out of the matrix grid without deleting it. Excluded colors still appear in the Designer; they just don't form rows or columns in the Matrix. You can also toggle Matrix Colors in the info panel on the right. *** ## Importing palettes Use Import Palette (footer button on the library page) and drop or pick a file. Two formats are supported: ### JSON Palettes exported from Motion Studio are saved as .json with the palette name as the filename (e.g. brights.json). They import directly with no further options — colors, names, and the harmony method are all preserved. ### ASE (Adobe Swatch Exchange) ASE files are Adobe's interchange format and are most often used by Illustrator, Photoshop, or third-party palette tools. Dropping a .ase file opens the Import ASE Palette modal, which asks for two things: * **CMYK Profile** — many ASE palettes store colors in CMYK. Converting them to screen RGB requires an ICC profile to know which press conditions the original colors targeted. The dropdown lists every CMYK ICC profile installed on your system. The default is USWebCoatedSWOP (the standard for North American magazine print). * **Rendering Intent** — how colors are mapped during conversion: * Relative Colorimetric (w/ BPC) — default; preserves in-gamut colors exactly and uses Black Point Compensation to remap the darks. Best for most logos and brand palettes. * Perceptual — preserves the visual relationship between colors at the cost of exactness. Best for photographic or gradient-heavy palettes. * Saturation — keeps colors vivid; sacrifices accuracy for punch. Good for charts and infographics. * Absolute Colorimetric — exact in-gamut mapping with no white-point adjustment. Used for proofing. ASE files with only RGB values skip this modal and import directly. *** ## Exporting With one or more palettes selected, choose Export (footer or right-click menu) to open the export modal. Two formats: * JSON — Motion Studio's native format. Round-trip safe (re-importing reproduces the palette exactly, including harmony and lock states). * ASE — for handing off to Illustrator/Photoshop users or other DCC tools. Multi-selecting palettes and exporting writes one file per palette to the folder you choose. *** ## Info panel Open the Info panel from the header to see detailed info about the current selection on the right side of the screen: * With a palette selected: Name, a swatch list, and any notes you've added to the palette. * With a single color selected: the HEX, RGBA, CMYK, and HSL — click any value to copy it to the clipboard. You can also delete colors and copy/paste them between palettes from the Info panel. *** ## Folders Drag a palette onto another palette's folder, or use New Folder to organize. Folders nest, can be color-coded, and can be given an icon from the vector library. *** ## Create Mini Right-click a palette and choose Create Mini to create up a Motion Mini panel from its colors. See [Motion Mini](/motion-mini.md) for more info. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://motion-studio.mtmograph.com/libraries/color.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.