Palette Browser
The sidebar is your palette library. The current build includes explicit sorting and faster palette actions so you can keep experiments, imports, and built-in palettes organized while testing.
Search palettes
- Tap the search field in the sidebar.
- Type a palette name, subtitle, note, or generation recipe.
- Select any matching palette to open it in the detail pane.
Filter palettes
- All: show every palette.
- Built-In: show starter palettes that ship with the app.
- Imported: show palettes created from photos or websites.
- Custom: show blank, duplicated, generated, or edited user palettes.
Sort palettes
Open the Sort menu above the palette list to choose the current library order. Search and the segmented filter still apply before sorting.
| Sort option | What it prioritizes |
|---|---|
| Favorites | Starred palettes first, then names alphabetically. |
| Newest | Recently created, imported, or duplicated palettes first. |
| Oldest | Oldest palettes first. |
| Name | Alphabetical palette names. |
| Most Stops | Palettes with the largest stop counts first. |
| Fewest Stops | Palettes with the smallest stop counts first. |
| Type | Built-In, Custom, and Imported groups by palette kind. |
| Color Space | Groups palettes by sRGB or Display-P3. |
| LUT Size | Highest LUT sample count first. |
Tip: If you cannot find a palette, clear both the search field and the segmented filter.
Palette row actions
- Leading swipe: favorite or unfavorite a palette.
- Trailing swipe: duplicate any palette; restore appears for built-in palettes.
- Context menu: right-click or long-press a row to duplicate, restore an eligible built-in palette, or toggle favorite.
- Toolbar actions menu: use the ellipsis button for New Palette, Duplicate Selected, Restore Factory Palette, and Favorite commands for the selected palette.
Create, Favorite, Duplicate & Restore
Create a blank palette
- Tap the + button in the sidebar toolbar.
- If you are on Free and already have 5 custom/imported palettes, ChromaForge opens Pricing instead.
- The app creates Untitled Palette with four editable Display-P3 stops.
- Rename the palette directly in the large title field.
- Edit stops, generate harmonies, import source colors, or write notes.
Favorite a palette
- Open a palette.
- Tap the star in the palette header.
- Favorited palettes rise to the top of the sidebar list.
Duplicate a palette
- Open the palette you want to branch from.
- Use Duplicate Palette in Render Preview, Duplicate Selected in the toolbar actions menu, the row context menu, or the trailing swipe action.
- ChromaForge inserts a new custom copy named like Palette Name Copy and selects it immediately.
- Edit the duplicate freely without changing the original.
Free plan note: Duplicates count as custom palettes. If you are at the Free plan limit, ChromaForge opens Pricing instead of creating another copy.
Restore a built-in palette
- Select a built-in palette such as Glass Nebula, Polished Gold, Misty Woods, or Electric Coral.
- Use Restore Factory in Render Preview, Restore Factory Palette in the toolbar actions menu or row context menu, or Restore from the trailing swipe action.
- The command is enabled only when that built-in palette differs from its factory version.
- ChromaForge restores the original factory palette and keeps it selected.
Undo detail edits
The curved-arrow button is labeled Undo Last Palette Change. It appears in the detail header and in editable panels such as Stops, Generate, Render Preview, and Notes.
- Use it to step back through recent edits to the selected palette, including name, favorite state, stops, generation, preview metadata, and notes.
- The button is disabled when there is no palette snapshot to restore.
- The undo stack is scoped to the current palette and resets when you switch to a different palette.
Gradient & Render Preview
The large gradient canvas and Render Preview controls show how your palette behaves as a gradient and as a lookup-table style color ramp.
Preview controls
| Control | What it does | When to use it |
|---|---|---|
| LUT 512 / 1024 | Sets palette LUT metadata to 512 or 1024. | Use 512 for compact ramps and 1024 for smoother high-resolution color handoff. |
| sRGB / Display-P3 | Chooses the preview color space for SwiftUI colors and export metadata. | Use sRGB for broad web consistency; Display-P3 for wide-gamut Apple and modern display workflows. |
| Exact LUT preview | Shows a stepped 64-sample approximation instead of a continuous gradient. | Use when you need to inspect banding, palette stops, or Mandelbrot Metal style palettes. |
| Step markers | Draws a vertical guide at each stop position. | Use when editing stop spacing or diagnosing uneven ramps. |
| Dithering preview | Adds a subtle dot overlay to simulate dithering. | Use when testing whether texture can reduce visible banding in smooth gradients. |
Important: Exact LUT preview is a diagnostic view. For normal interface color work, leave it off so you can judge the continuous gradient.
Stop Editor
A stop is a color placed at a normalized position from 0% to 100% along the gradient.
Add a stop
- Tap Add Stop to insert a stop near the middle of the palette.
- Or tap/click directly on the large gradient canvas to add a stop at that position.
- The new stop inherits the interpolated color at that location.
- ChromaForge scrolls the stop editor to the new stop and briefly highlights it.
Edit a stop
- Tap a stop row to select it.
- Use the color picker to choose a new color.
- Use the position slider to move the stop along the gradient.
- Read the hex value beside the color picker for quick handoff.
- Release the slider to sort stops into position order.
Lock stops for generation
- Tap the lock icon on one or more important colors.
- Run a harmony in the Generate panel.
- Locked colors remain fixed; unlocked colors are regenerated around them.
- Tap Unlock All when you want the generator to rebuild the full palette.
Remove, sort, or distribute stops
- Trash: removes a stop. ChromaForge keeps at least two stops so the palette remains valid.
- Sort: orders stops by their position from left to right. ChromaForge also sorts after you finish dragging a position slider.
- Distribute: spaces stops evenly from 0% to 100% while preserving their current visual order.
- Position percent: shows where each stop sits in the gradient.
- Undo Last Palette Change: reverts the most recent stop edit, add, delete, sort, distribute, lock, unlock, or generation change while the undo stack is available.
OKLCH / Perceptual Generation
The Generate panel rebuilds unlocked stops in OKLCH/perceptual space. That means it adjusts hue, chroma, and lightness in a way that usually behaves better than simple HSB or RGB rotation.
Generate a harmony
- Open a palette.
- Lock any colors that must remain unchanged.
- Choose a harmony from the picker.
- Tap Generate Unlocked.
- Inspect the gradient, context preview, accessibility panel, and system audit.
Harmony types
| Harmony | What it creates | Best for |
|---|---|---|
| Perceptual Blend | Interpolates between locked colors in OKLab, or creates a balanced perceptual ramp from one anchor. | Clean gradients, UI ramps, controlled brand transitions. |
| Complementary | Builds around opposing hue relationships, including near-complements. | Strong accent/background contrast and dramatic themes. |
| Analogous | Uses neighboring hues with controlled lightness movement. | Harmonious product UI and subtle brand systems. |
| Triadic | Uses three roughly balanced hue families. | Expressive palettes with several usable accents. |
| Tetradic | Uses four hue anchors for broad color variety. | Charts, illustrations, dashboards, and visual systems. |
| Monochrome | Varies lightness and chroma while staying near one hue. | Quiet, focused interfaces and brand-safe ramps. |
| Warm Shift | Moves through warmer hue shifts with alternating lightness accents. | Editorial, energetic, or human-centered palettes. |
| Cool Shift | Moves through cooler hues with controlled chroma and lightness. | Technical, calm, scientific, or atmospheric systems. |
Recipe tracking: When you generate, ChromaForge records a recipe such as the harmony name and how many stops were locked. Search can find text in recipes. Use Undo Last Palette Change if the generated direction is not useful.
Photo, File & Website Import
The Import panel creates new imported palettes from images, local palette files, token files, CSS-like color text, or websites. It opens by default in the current workflow-oriented UI, because most projects begin by sourcing color. Imported palettes are inserted at the top of the library, selected immediately, and favorited by default.
Sample a photo gradient
- Open the Import disclosure panel.
- Choose a sampling mode: Row, Column, or Stripe.
- Tap Sample Photo Gradient.
- Choose an image from the photo picker.
- ChromaForge samples 12 stops and creates a palette named Photo Gradient.
| Mode | How it samples | Use for |
|---|---|---|
| Row | Samples left to right across the middle row of the image. | Sunsets, horizons, product shots, posters, and horizontal gradients. |
| Column | Samples top to bottom down the middle column. | Portraits, vertical scenes, UI screenshots, and tall artwork. |
| Stripe | Averages a small vertical stripe around each horizontal sample point. | Noisy photos, texture-heavy images, and sources where a single pixel may be misleading. |
Import palette files
- Open the Import disclosure panel.
- Tap Import Palette File.
- Choose one or more palette, token, CSS, CSV, GPL, ASE, JSON, or text files.
- ChromaForge parses each file, creates imported palettes for every usable palette it finds, and selects the newest imported palette.
| Format | What ChromaForge reads | Use when |
|---|---|---|
| Mandelbrot Metal JSON | Single-palette or multi-palette JSON with stop positions, RGB components, color space, schema version, and optional notes. | You want to reuse fractal palettes or move palettes between Mandelbrot Metal and ChromaForge. |
| ChromaForge JSON | Native ChromaForge palette exports, including positions, notes, recipes, LUT metadata, and color-space preference. | You are restoring or sharing ChromaForge palettes. |
| Design-token JSON | Hex values, RGB component objects, and structured component arrays for sRGB, Display-P3-like RGB, CIELAB, CIELCH, OKLab, and OKLCH values. | You want to turn an existing token package into a palette to audit and remap. |
| CSS, Sass, or text | CSS-compatible color syntax such as hex, RGB, HSL, HWB, CIELAB/LCH, OKLab/OKLCH, and Display-P3 color functions. | You have a stylesheet, variable file, copied code, or brand spec with color strings. |
| CSV | Spreadsheet-friendly hex rows or simple RGB component rows. | You are importing colors from a spreadsheet, audit file, or handoff table. |
| GIMP GPL | Classic GIMP palette files with 0-255 RGB rows and optional palette name. | You want to bring open-source or desktop-design palettes into ChromaForge. |
| Adobe ASE | Adobe Swatch Exchange color entries in RGB, CMYK, Lab, or grayscale models. | You receive swatches from Adobe Illustrator, Photoshop, InDesign, or a brand team. |
Import a website palette
- Open the Import disclosure panel.
- Paste a website URL. If you omit the scheme, ChromaForge tries https://.
- Tap Import Website or submit the URL from the keyboard.
- ChromaForge fetches readable HTML and scans inline styles.
- It follows up to 6 linked stylesheets and scans their CSS too.
- It ranks likely brand/theme/accent colors, dedupes near-identical colors, and creates a gradient palette.
Website color syntax supported
- #RGB, #RGBA, #RRGGBB, and #RRGGBBAA.
- rgb(), rgba(), and modern space-separated RGB syntax.
- hsl() and hsla().
- hwb().
- lab() and lch().
- oklab() and oklch().
- color(display-p3 ...).
Free plan limit: Free includes 2 website imports. Pro unlocks unlimited website imports. Photo and file import are included on Free, but creating imported palettes still counts toward the 5 custom/imported palette limit.
Context Preview
Context Preview catches palettes that look good as swatches but fail in real compositions. The preview adapts between side-by-side and stacked layouts so it remains readable across compact and wide layouts.
- Interface card: uses the first stop as background, a nearby accent as action color, and the last stop as text.
- Primary action: uses an icon and label so action color hierarchy is easier to judge.
- Gradient card: shows the same palette as a smooth ramp without step markers or dithering.
- Metadata row: shows stop count and color space so you can connect the preview to export decisions.
- Practical read: if the text or button feels weak here, check semantic tokens and contrast before exporting.
How to use it
- Edit or generate your palette.
- Look at the interface preview before opening advanced panels.
- If the composition looks muddy, adjust stop lightness or use Generate with locked anchor colors.
- Then validate the result in Accessibility, System Audit, and Developer Handoff.