Documentation
Complete documentation for every module, format, URL parameter, keyboard shortcut, and non-obvious behavior in Alchromatic. Organized for scanning — use your browser's find function (Ctrl+F) to jump to any topic.
The active color can be set in any of the following ways. All methods update every module on the page immediately.
Type into the HEX field at the top of the picker. Accepts #rrggbb, #rgb, or the bare hex without the #. Three-character shorthand is expanded automatically (f6b → ff66bb).
Type directly into any format input (RGB, HSL, OKLCH, etc.) to set the color in that format. Each field validates and updates the active color on blur or on Enter.
Click or drag anywhere on the saturation/lightness canvas. The hue slider on the right selects the base hue; the canvas controls saturation (x-axis) and lightness (y-axis).
Press Ctrl+V (or Cmd+V on Mac) anywhere on the page when an input field does not have focus. Alchromatic reads your clipboard and accepts any recognized color format — hex, rgb(), hsl(), oklch(), or a CSS named color.
Type any CSS named color into the HEX input — tomato, rebeccapurple, deepskyblue, hotpink, etc. All 148 CSS named colors are recognized.
Press E or click the eyedropper icon in the picker toolbar to open the native screen eyedropper. Click any pixel on screen to set that color. Requires a Chromium-based browser — not available in Firefox or Safari.
See URL Parameters below.
Click any swatch in the history strip at the bottom of the picker to restore a previous color.
Click any swatch in the Harmony, Tonal, Mixer, or Preset Palettes panels to set that color as active.
| Parameter | Value | Effect |
|---|---|---|
?c= |
6-digit hex (no #) |
Sets the active color on load. Example: ?c=ff6b6b opens to coral red. Bookmarkable and shareable. |
The URL updates automatically as you change colors. Bookmarking the current page saves the current color. The Share button in the toolbar copies the full current URL to the clipboard.
All shortcuts fire only when a text input field does not have focus, so typing in format fields is never interrupted.
| Key | Action |
|---|---|
| Space | Shuffle to a random vibrant color |
| C | Copy the current hex value to clipboard |
| E | Open the screen EyeDropper (Chromium / Edge only) |
| ? | Open the help search palette (same as Ctrl+K) |
| Ctrl+K | Open the help search palette |
| Alt+← | Nudge hue −5° |
| Alt+→ | Nudge hue +5° |
| Alt+↑ | Nudge lightness +5% |
| Alt+↓ | Nudge lightness −5% |
| Escape | Close any open modal or overlay |
| Ctrl+V | Paste any recognized color format from clipboard |
Alchromatic works natively in all of the following formats. Conversions are exact for formats that share the same color space (sRGB); precision is limited by the sRGB gamut boundary for OKLCH colors that exceed it.
Six-digit lowercase hexadecimal. Alpha is not included. Example: #8c46dc. Three-character shorthand is accepted on input and expanded immediately.
Red, green, blue channels as integers 0–255. Alpha (A) is a decimal 0–1. Example: rgb(140, 70, 220), rgba(140, 70, 220, 0.5).
Hue (0–360°), saturation (0–100%), lightness (0–100%), optional alpha. The same HSL value can represent different visual colors depending on the display profile. Example: hsl(272, 67%, 57%).
Hue (0–360°), saturation (0–100%), value/brightness (0–100%). HSV is the internal model used by Adobe Photoshop and most color pickers. Example: hsv(272, 68%, 86%).
Hue, Whiteness, Blackness — a CSS Colors Level 4 format. hwb(H W% B%) where W and B sum to at most 100%. Achromatic colors are those where W + B ≥ 100. Example: hwb(272 14% 14%).
Lightness (0–1), Chroma (0–~0.4), Hue (0–360°). OKLCH is a perceptually uniform color space — equal numerical distances correspond to equal perceived differences. This makes it the best format for programmatic color generation. Example: oklch(0.52 0.21 294).
Colors with chroma values that exceed the sRGB gamut are clamped on output. Alchromatic does not currently show a gamut indicator on the OKLCH sliders, but values entered beyond the sRGB boundary are automatically mapped to the nearest in-gamut color.
The Spaces panel shows several additional formats for reference. These are computed from the active color and are read-only:
| Format | Description |
|---|---|
| XYZ (D65) | CIE XYZ using the D65 illuminant — the standard device-independent intermediate space |
| CIE-Lab | L*a*b* — perceptually uniform, device-independent. L=0 is black, L=100 is white |
| CIE-LCh | Cylindrical version of Lab: Lightness, Chroma, Hue. Easier to reason about than a/b axes |
| CMYK | Approximate device-profile CMYK. Listed with a caveat — real CMYK output requires a device ICC profile |
| YIQ | NTSC-era luma/chroma format. Primarily of use for computing perceived brightness (Y component) |
| Nearest CSS name | Closest named CSS color by Euclidean distance in Lab space |
| Nearest Tailwind | Closest Tailwind v3 color by the same method |
The saturation/lightness canvas is 300×300 pixels. Click to set, click-and-drag to scrub. The canvas repaints in real time as you drag the hue slider.
Each input field shows the active color in its format. Clicking the copy icon (⧉) next to a field copies that value to the clipboard and shows a toast. All fields accept typed input — press Enter or blur the field to apply.
The history strip shows the last 20 colors set during this browser session. It is stored in localStorage under the key alc_history and survives page reloads. The clear button on the right wipes the history. Hover any swatch for a tooltip showing its hex value.
Press Space to generate a random vibrant color. The generator picks a random hue with high saturation and moderate lightness so the result is always vivid rather than muddy or near-white.
| Mode | Algorithm |
|---|---|
| Complementary | Hue + 180° |
| Split-complementary | Hue ± 150° (two colors at 30° either side of the complement) |
| Analogous (3) | Hue −30°, source, Hue +30° |
| Analogous (5) | Hue −60°, −30°, source, +30°, +60° |
| Triadic | Hue, Hue +120°, Hue +240° |
| Tetradic | Hue, Hue +90°, Hue +180°, Hue +270° |
| Monochromatic | Source hue at five lightness/saturation variations |
| Shades & Tints | 9-step scale — source color plus four lighter tints and four darker shades |
All hue relationships are computed in HSL space. The source color's saturation and lightness are preserved in complementary, split-complementary, analogous, triadic, and tetradic results.
The wheel toggle (top right of the harmony panel) shows an interactive color wheel with the active harmony relationship overlaid. Dragging a node on the wheel adjusts the active color while maintaining the harmony relationship.
The wheel has a toggle between RGB (standard HSL) and RYB (traditional artist's color wheel). RYB mode uses cubic spline interpolation to remap the hue axis to the Itten color wheel where red, yellow, and blue are the primaries. Harmony relationships computed in RYB mode feel more natural to painters and illustrators.
Click Save palette to store the current harmony result. Saved palettes appear in the panel directly below and persist in localStorage. Each saved palette shows its name (editable inline), the list of swatches, and a delete button. Clicking any swatch in a saved palette sets it as the active color.
| Criterion | AA requires | AAA requires |
|---|---|---|
| Normal text (< 18pt / 14pt bold) | 4.5:1 | 7:1 |
| Large text (≥ 18pt or ≥ 14pt bold) | 3:1 | 4.5:1 |
| UI components & graphical objects | 3:1 | — |
Below the WCAG panel, Alchromatic also shows the APCA Lc (lightness contrast) value. APCA is the algorithm proposed for WCAG 3.0 — it is more accurate than WCAG 2.1's relative luminance ratio for real-world legibility. An Lc value of 60 or above is generally considered sufficient for body text; 45 for large or bold text. APCA values are directional — Lc is not the same for light-on-dark as dark-on-light at the same ratio.
The contrast panel shows the approximate percentage of users affected by each vision condition tested in the Vision Simulation panel. These figures are drawn from published epidemiological data. The intent is to ground accessibility decisions in real-world impact, not just pass/fail badges.
The URL does not currently encode the contrast pair. Copy the foreground and background hex values and use them in the ?c= parameter for the foreground when sharing.
The Named panel shows:
violet-600) and the exact hex.| Format | Output |
|---|---|
| CSS custom properties | --color-primary: #8c46dc; inside a :root {} block |
| SCSS variables | $color-primary: #8c46dc; for Sass/SCSS files |
| Tailwind config | A colors object suitable for pasting into tailwind.config.js |
The token output can be generated from the active single color or from the current harmony palette. Select the source via the tabs at the top of the Tokens panel.
Copy copies the generated code block to the clipboard. Download saves it as a plain text file with an appropriate extension (.css, .scss, or .js depending on the selected format).
The Vision panel renders the active color as seen by users with each of four color vision deficiencies. The simulation uses the Brettel 1997 matrices — the most widely-cited model for simulating dichromatic and anomalous trichromatic vision.
| Condition | What is affected | Approx. prevalence |
|---|---|---|
| Protanopia | Long-wavelength (red) cones absent or non-functional | ~1% of men, 0.01% of women |
| Deuteranopia | Medium-wavelength (green) cones absent or non-functional | ~1% of men, 0.01% of women |
| Tritanopia | Short-wavelength (blue) cones absent or non-functional | ~0.01% of all people |
| Achromatopsia | Total absence of color vision — only luminance perceived | ~0.003% of all people |
Each swatch shows the simulated color. The hex value shown is the actual simulated color — not the original. This is the key advantage over description-only tools: you see the real perceptual result.
The Mixer blends the active color (Color A) with a user-chosen second color (Color B) and shows the 25%, 50%, and 75% midpoints in two color spaces side by side.
| Mode | How it works | Visual result |
|---|---|---|
| sRGB | Linear interpolation of R, G, B channel values | Midpoints shift toward grey for saturated colors — same as CSS color-mix(in srgb) |
| OKLCH | Interpolation in OKLCH L, C, H (shortest-arc hue) | Midpoints remain vivid — perceived saturation is preserved |
Click any swatch in the mixer result to set that blend color as the active color. Click Color A at the top to reload Color A from the current picker.
The OKLCH blend uses shortest-arc hue interpolation: if the two hues are more than 180° apart, the blend travels through the shorter arc rather than spinning all the way around the wheel. Achromatic colors (C < 0.01) defer to the other endpoint's hue to avoid the blend spinning through a rainbow when one color is near-grey.
The Tonal module generates a perceptually even lightness scale in OKLCH, holding the source color's chroma and hue constant. The scale spans L=0.05 to L=0.95 with evenly distributed steps.
Use the slider (range 5–21, odd numbers only) to change the number of steps. The default is 11, matching Tailwind's 50–950 stop density. The step closest to the source color's original lightness is marked as the anchor swatch.
Click any step to set it as the active color. The hex value and OKLCH lightness value are displayed below each swatch. Export the whole scale as CSS custom properties using the Tokens panel in the same panel tab group.
linear-gradient(angle, stop1, stop2, ...). The angle input accepts 0–359°.radial-gradient(circle, stop1, stop2, ...). Radiates from the center.conic-gradient(from angle, stop1, stop2, ...). Sweeps around a center point.Click Add stop to append a new stop. Each stop row has a color swatch (click to pick), a position input (0–100%), and a remove button. Drag stops in the list to reorder them — the gradient output and preview update in real time.
Click any stop swatch to set that stop's color as the active picker color and open the picker for editing.
The output box shows the full CSS property declaration, ready to paste. Click Copy to copy it. The preview strip above the stop list shows the rendered gradient at full width.
The CSS Filter panel solves a specific problem: given a target color, generate the filter: CSS property that transforms a pure black element (#000000) into that color.
This is commonly used for recoloring SVG icons and image masks with CSS, without modifying the original asset. Apply the generated filter to any element that is solid black.
The generator uses a hill-climbing optimization algorithm that iterates over the five CSS filter functions (invert, sepia, saturate, hue-rotate, brightness, contrast) to find the combination that minimizes the perceptual distance to the target color. The result may not be exact — a small tolerance is acceptable for icon recoloring use cases.
The filter approach works best on solid black source elements. It will not reliably recolor elements that are partially transparent, multicolored, or near-grey. For those cases, use background-color, fill, or color directly if you control the SVG source.
The extraction uses the median-cut algorithm running in a Web Worker (off the main thread) to avoid freezing the UI. It divides the image's color space into 8 buckets by iteratively splitting on the most variable color axis, then returns the average color from each bucket. The result is up to 8 representative colors.
Each extracted color appears as a swatch. Click any swatch to set it as the active color. The swatches are sorted by dominance (largest region first).
Three curated palette libraries are available as navigable swatch grids:
| Library | Families | Shades per family |
|---|---|---|
| Tailwind v3 | 22 | 11 (50–950) |
| Open Color | 13 | 10 (0–9) |
| Material Design 2 | 18 | 10 (50–900) |
Click any swatch to set that color as active. Hover any swatch to see the family name, shade label, and hex in the tooltip.
The history strip automatically records every distinct color you set during a session. It holds up to 20 entries and persists in localStorage under the key alc_history.
color.onChange event — this includes picker interaction, format field edits, harmony swatch clicks, and URL parameter loads.localStorage.Small ? badges appear next to each module's heading. Clicking one opens the help modal for that module, showing an Apprentice (beginner-friendly) view by default. Switch to the Alchemist tab for advanced detail.
Press Ctrl+K (or ?) to open the search palette. Type any keyword to search across all feature descriptions and help topics simultaneously. Results show in real time. Click any result to open its full help entry. Press Escape to close.
Every help entry has two tiers of content in the help modal:
New to Alchromatic? Start with the New User Guide for a walkthrough of the core workflow.