Basic Color Tools User Guide

The page opens on the Workspace view, a tool launcher with a stage the panels open into; the Catalogue view holds the tool cards, and the Panels view lists what is open. The Catalogue header contains search, a category menu, and a Level switch. The catalog updates instantly as you search or change modes.

• Categories: Generate, Pick, Compose, and Convert.
• Depth modes: Basic shows simpler daily tools, Advanced shows pro tools, and Both shows every card.
• Favorites: star any card to keep it in the Favorites category. Favorites are stored in browser local storage.
• Open Panels: this category lists active floating panels so you can return to a minimized or hidden workspace quickly.
• Search: tool names, summaries, and tags are searchable, including terms like palette, remix, battle, gradient, picker, collage, HEX, OKLCh, and CMYK.

Clicking a card opens a floating panel. A single panel instance opens by default; using duplicate from the title bar creates another instance when you need side-by-side experiments.

• Drag: move a panel by dragging its title bar.
• Resize: use the bottom-right resize handle. Panels are clamped to the workspace stage (or the viewport outside the Workspace view) so controls remain reachable.
• Maximize: expand a panel to the viewport. Double-clicking the title bar also toggles maximize.
• Minimize: collapse a panel into the dock area, then restore it from the Workspace panel list or the Open Panels category.
• Close: the close button removes the panel and runs any tool cleanup.
• Limit: the workspace keeps up to five panels open. Opening beyond the limit evicts the oldest panel.

Palette Studio is the quickest generator. It creates a live swatch strip, supports locked colors, and adds analysis tabs for contrast, OKLCh curves, CVD previews, and color details.

• Harmony modes: Random, Analogous, Complementary, Triadic, Monochromatic, Split complementary, Tetradic, Compound, Shades, Tints, WCAG AA palette, WCAG AAA palette, and Accessibility palette.
• Swatch actions: lock, copy, delete, edit with the color picker, or adjust L, C, and H with the OKLCh overlay.
• Reorder: drag swatches to rearrange palette order.
• Image extraction: choose From Image to run client-side k-means extraction on a local image and replace the palette with dominant colors.
• CVD preview: simulate deuteranopia, protanopia, tritanopia, or achromatopsia while keeping original HEX values available for export.
• Exports: share URL, CSS variables, SCSS variables, Tailwind config snippet, JSON with color metrics, SVG, PNG, and ASE-style tab-separated text.

Palette Remix takes seed colors and generates multiple controlled variants. It is useful when you already have a brand palette and need editorial, analogous, complementary, or tonal alternatives.

• Seed input: paste HEX, RGB, HSL, or OKLCh-style color strings, one per line or separated by whitespace.
• Styles: Editorial kit, Analog drift, Complement battle, and Tonal system.
• Count: choose 3 to 9 colors per output palette.
• Remix energy: raises hue, lightness, and chroma variation around each recipe.
• Use as seed: move any generated set back into the seed field for iterative exploration.
• Exports: copy CSS, JSON, all HEX values, individual palettes, or individual swatches.

Gradient Maker builds linear, radial, and conic gradients with editable stops and optional perceptual interpolation. It is designed for CSS handoff as well as raster and vector export.

• Types: linear, radial, and conic.
• Interpolation: native sRGB, OKLCh, HSL, or CIE Lab. Non-native interpolation is approximated by generated intermediate stops.
• Easing: linear, ease in, ease out, ease in-out, and sine.
• Stops: add a stop from the button or by clicking the track, edit HEX/color and position, reverse, distribute evenly, or shuffle.
• Analytics: curves show OKLCh lightness, chroma, hue, and CIE 1931 positions.
• Presets: Sunset, Ocean, Aurora, Coral, Mint, Royal, Auric, Spectrum, and Mono dark.
• Exports: copy CSS, download SVG, download 1600px PNG, download 4K PNG, copy JSON, or copy a Tailwind backgroundImage snippet.

Color Picker is an HSV picker with richer output tabs. Use it for a single color when you need format conversion, harmonies, CVD previews, chromaticity charts, and practical contrast notes.

• Controls: native color input, HEX text input, saturation/value plane, hue slider, random color, and browser EyeDropper when supported.
• Formats: HEX, RGB, HSL, HSV, OKLCh, Lab, XYZ, and CMYK with copy buttons.
• Harmonies: complementary, analogous, triadic, tetradic, split-complementary, square, shades, and tints.
• CVD: preview normal vision plus deuteranopia, protanopia, tritanopia, and achromatopsia with Delta E 2000 difference values.
• Info: luminance, Lab L, OKLCh L/C/H, warm/cool classification, nearest named color, and contrast against common backgrounds.

Color Battle compares two palettes and ranks them for contrast, accessibility, perceptual separation, and resilience under simulated color vision deficiencies.

• Input: Team A and Team B accept color lists in common formats; each team is normalized to HEX and capped at 9 colors.
• Random teams: generate OKLCh-based palette teams for quick stress tests.
• Scoring: total score is weighted from average contrast, percentage of AA contrast pairs, average Delta E 2000, and average CVD Delta E.
• Results: cards show internal pair counts, score, swatches, metrics, and a cross-palette contrast matrix.
• Exports: copy the winning palette or copy a report with winner and team scores.

Collage Maker composes local images into a grid-style artwork. It is useful for moodboards, palette boards, collection previews, and visual reference panels.

• Layouts: 29 layouts, including grid, brick, mosaic, hero, magazine, contact sheet, polaroid, strip, and filmstrip.
• Structure: set columns, rows, gap, corner radius, background color, border width/color, and drop shadow.
• Images: add multiple images at once or click a cell to replace one image. Images are read locally with FileReader.
• Filters: none, grayscale, sepia, invert, blur, warm, cool, contrast, and vintage. Right-click an occupied cell to cycle a per-cell filter.
• Title overlay: add optional centered title text with a selectable color.
• Export: render a 4K PNG from the current DOM layout into a canvas download.

Quick Converter is the fastest single-color utility. Type a color, pick from the native input, or randomize a value, then copy normalized outputs and inspect the color across comparison and visualization tabs.

• Accepted input: common HEX, RGB, HSL, and OKLCh-style values parsed by the shared color parser.
• Formats: HEX, RGB, RGB percent, HSL, HSV, OKLCh, OKLab, Lab D65, XYZ D65, CIE xyY, CMYK, CSS oklch(), CSS oklab(), and CSS lab().
• Quick info: relative luminance and nearest named color.
• Compare tab: compare two colors using Delta E 76, Delta E 2000, WCAG contrast, Lab lightness, OKLCh lightness/chroma, hue delta, and a CIE chart.
• Wide gamut: view linear sRGB, Display P3, Rec.2020, and Adobe RGB coordinates with in-gamut/out-of-gamut status.
• Visualize: CIE 1931 position, hue wheel, fixed-hue shade ramp, and fixed-L/C hue ramp.

• Save to Library: the universal library integration can capture focused panels as palettes, gradients, colors, images, reports, or workspace presets. Captures also include restorable UI state where available.
• Restore from Library: saved palette assets reopen Palette Studio, remix assets reopen Palette Remix, gradients reopen Gradient Maker, colors reopen Color Picker or Quick Converter, and battle assets reopen Color Battle teams.
• Clipboard blocked: browser privacy rules can block clipboard writes outside a user gesture. Click the copy button again directly.
• EyeDropper unavailable: the EyeDropper API is browser-dependent. Use native color input or HEX entry when unsupported.
• Image extraction fails: local files normally work. Remote images can taint a canvas if CORS headers are missing.
• Large collage export is slow: reduce grid size, image count, or browser zoom before exporting 4K PNG.
• Panel is off-screen: resize the browser window; panels are clamped back into the viewport on resize.