New User Guide

What is Alchromatic?

Alchromatic is a free, browser-based color studio for developers and designers. It covers the full workflow in one place: picking colors, converting between formats, checking accessibility, generating palettes, exporting design tokens, and more.

Most color tools are either paywalled, locked to one design ecosystem, or limited to a single task. Alchromatic brings everything together — no signup, no install, works in any modern browser.

Entering your first color

There are several ways to set the active color:

• Type a hex value into the HEX input at the top of the Color Picker panel (#ff6b6b or ff6b6b — the # is optional).
• Click on the color canvas to pick a hue/saturation visually.
• Drag the hue slider to rotate the hue wheel.
• Type any CSS color name — tomato, rebeccapurple, deepskyblue — and Alchromatic resolves it automatically.
• Paste a hex from anywhere using Ctrl+V while the page has focus — Alchromatic detects hex strings in your clipboard and sets them immediately.
• Open a URL with ?c= followed by a hex — for example alchromatic.io/?c=8c46dc — to jump straight to that color.

Once a color is set, every module on the page updates instantly.

Color Picker

The Color Picker is the main workspace. It lives at the top of the page and stays visible at all times. Every other module reads from it.

Visual canvas and sliders

The large square canvas shows hue/saturation. Click anywhere on it to set the color. The vertical slider on the right adjusts lightness. Below that is the alpha (opacity) slider — relevant when working with RGBA or HSLA formats.

Format inputs

Eight format inputs sit to the right of the canvas:

Click the copy icon next to any format to copy it to your clipboard. You can also type directly into any input to set the color in that format — all other inputs update in real time.

Color history

Every color you set is automatically saved to the history strip at the bottom of the picker. Click any history swatch to restore that color. The history is stored in your browser's localStorage and persists across page reloads.

Sharing and bookmarking

Every color has its own URL. The address bar updates automatically as you work — for example:

https://alchromatic.io/?c=8c46dc

To share a color, click the Share button in the top-right corner. The current URL (including the active color) is copied to your clipboard. Send it to anyone — they open the link and see the exact same color in the studio.

To bookmark a color for yourself, just bookmark the page normally while on that color.

Harmony Palette

The Harmony module generates related color palettes from the active color automatically. Scroll down to the Harmony tab to use it.

Palette modes

Using harmony swatches

Click any swatch in the harmony panel to set it as the active color — the picker and all other modules update immediately. This is the fastest way to explore a color family.

Click Save palette to store the current harmony result in your browser. Saved palettes appear in the panel below and persist across sessions.

Contrast Checker

The Contrast module checks whether a foreground/background color pair meets WCAG accessibility requirements. Open the Contrast tab to use it.

How to use it

1. The foreground color starts from the active picker color. Click the foreground swatch to change it, or type a hex directly into the input next to it.
2. Set the background color the same way using the background swatch/input.
3. Alchromatic calculates the contrast ratio instantly and shows WCAG grades for Normal Text, Large Text, and UI Components.
4. Click Swap to reverse foreground and background.

Reading the results

Each WCAG level shows a pass or fail badge:

• AA — the minimum requirement for most published content (4.5:1 for normal text, 3:1 for large text and UI)
• AAA — the enhanced standard (7:1 for normal text, 4.5:1 for large text)

The preview area shows your actual text on your actual background so you can judge legibility visually, not just numerically.

Named Color Lookup

The Named tab shows the nearest CSS named color and the nearest Tailwind v3 color to whatever is currently in the picker. It also shows the exact color difference (delta-E) so you can judge how close the match is.

Use cases:

• You have a hex from a design file and want to know if there is a named CSS color close enough to use instead.
• You are implementing a design and want the equivalent Tailwind utility class.
• You are communicating a color to someone and want a memorable name to refer to it by.

Design Token Export

The Tokens tab lets you export the active color (or the current harmony palette) as ready-to-paste design tokens in three formats:

• CSS custom properties — paste into your :root {} block
• SCSS variables — paste into a Sass file
• Tailwind config — paste into your tailwind.config.js colors section

Click Copy to copy the generated code, or Download to save it as a file. Switch between formats using the tabs at the top of the panel.

Other tools at a glance

Alchromatic has several more modules accessible via the tabs in the lower panel. Here is a brief overview of each:

Vision Simulation

Shows the active color as it appears under four types of color vision deficiency: protanopia, deuteranopia, tritanopia, and achromatopsia. Each condition is shown as a colored swatch, not just a description — you see what someone with that condition actually sees.

Color Mixer

Blends the active color with a second color you choose, showing 25/50/75% midpoints in both sRGB and OKLCH space. OKLCH midpoints stay vivid (perceptually uniform); sRGB midpoints tend toward grey. Useful for generating gradients or transition colors.

Tonal Scale

Generates a perceptually even lightness scale from the active color in OKLCH space. The default is 11 steps (matching Tailwind's 50–950 stop count). Use the slider to choose between 5 and 21 steps. Click any step to set it as the active color.

Gradient Builder

Build multi-stop CSS gradients visually. Supports linear, radial, and conic gradient types. Each stop uses the Alchromatic color picker. The output is ready-to-paste CSS.

CSS Filter Generator

Takes a target hex and calculates the CSS filter: string that transforms pure black (#000000) into that color. Useful for recoloring icons and SVGs via CSS without modifying the source file.

Image Color Extraction

Drop an image onto the extraction zone (or paste an image URL) to extract the dominant color palette from the image. Uses the median-cut algorithm to find up to 8 representative colors. Click any extracted color to set it as the active color.

Preset Palette Libraries

Browse Tailwind v3, Open Color, and Material Design 2 as full navigable swatch grids. Every swatch is clickable. Switch between libraries using the tabs at the top of the palette panel.