Convert a whole list of CSS colors to one target notation in a single pass. Paste mixed hex, rgb(), hsl(), named colors or oklch() — up to 200 lines — choose the output format, and get a clean list with each original kept as a comment, ready to paste into a stylesheet.
Settings
Generated locally in your browser — your settings and results never leave this page.
One list in, one notation out
Stylesheets accumulate notational chaos — hex from one era, rgb() from another, hsl() from a redesign, a stray named color from a tutorial. This batch converter normalizes up to 200 colors per run into a single target notation, each line optionally keeping its original as a comment. It is a refactoring tool wearing a converter’s clothes.
Example run
Mixed input, oklch target, comments on:
input: #1e90ff, hsl(340 82% 52%), rebeccapurple
output: oklch(0.6559 0.1567 251.35) /* #1e90ff */
oklch(0.6244 0.216 5.42) /* hsl(340 82% 52%) */
oklch(0.4406 0.1594 303.37) /* rebeccapurple */Line order and count are preserved exactly — output drops into the same positions the input came from, which is what makes diff review painless.
Migration recipes
To oklch() for token modernization (keep comments; future edits happen on perceptual axes). To hex for maximum-compat deliverables like email CSS (drop comments). To hsl() when handing a file to designers who edit by hue. The fail-fast behavior — batch stops at the first unparseable line, quoting it — guarantees a typo cannot silently vanish mid-list.
Where its siblings pick up
Single colors with full detail and gamut counseling: the Complete Color Converter. Ordering the list before conversion: the Palette Sorter. Auditing what the converted palette can safely do: the Contrast Matrix. Batch conversion is usually the middle move of that longer game.
Batch conversion as a code-review tool
A less obvious use: normalizing colors before comparing them. Two branches that each touched the palette, a designer’s export in hsl() against a developer’s hex — convert both lists to one notation and identical colors become identical strings, which means ordinary text diffing suddenly works on color. Several teams run exactly this as a pre-merge step: normalize to lowercase hex, diff, and only genuine color changes survive review.
The 200-line ceiling is deliberate scope, not a technical limit: beyond that size you are not converting a palette, you are converting a codebase, and a build-time script (the same math is in this site’s open page source) belongs in the pipeline instead of a browser tab.
One habit worth forming: convert, then sort with the Palette Sorter, then read. A normalized, hue-ordered color list exposes duplicate-ish values and gaps in seconds — the review that unsorted, mixed-notation lists quietly prevent.
How to use the CSS Color Format Converter
- Paste your colors – one per line or comma separated, any mix of notations.
- Choose the target format for the whole batch.
- Toggle whether originals are kept as comments.
- Copy the converted list straight into your stylesheet.
Frequently asked questions
What can this batch converter parse?
Every CSS notation: hex (3/4/6/8 digit), rgb()/rgba() old and new syntax, hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(srgb …) and all 148 named colors – up to 200 per run, mixed freely in one paste.
What is the fastest way to modernize a stylesheet's colors to oklch()?
Grep out the color values, paste the lot here with target oklch, keep "original as comment" on, and paste back. Each line carries its old value in a comment, so review diffs stay readable.
Does converting between notations ever change the color?
Between sRGB notations (hex/rgb/hsl/hwb) never – same 24 bits, different spelling. Into lab()/oklch() the color is preserved exactly but gains future headroom; only out-of-sRGB inputs need mapping, which the related gamut tools handle.
How are invalid lines handled in a batch?
The batch stops at the first invalid color with a message quoting it – deliberate, so a typo cannot silently vanish from a 50-line conversion. Fix the line, rerun, done.
Can I convert named colors like rebeccapurple?
Yes – names resolve to their spec values first (#663399 for rebeccapurple) and then convert like any color. The reverse – finding a name for arbitrary values – is the Color Name Finder's job.
Why keep the original as a comment?
Reviewability and rollback: six months later, /* was #1e90ff */ answers "what did this used to be" without archaeology. Turn it off for production-minified output.
Are duplicate colors deduplicated?
No – line order and count are preserved one-to-one so the output drops into the same positions. Dedup first if you want it (sort | uniq does fine), or use the Palette Sorter to organize the set.
Get a brand colour into every format you need
One colour expressed as HEX, RGB, HSL, CMYK and modern CSS, ready for any brief.
- Online Color PickerPin down the exact colour.
- Complete Color ConverterConvert it across the common screen formats at once.
- HEX to CMYK ConverterGet a CMYK value for anything going to print.
- CSS Color Format Converter you are hereExpress it in modern CSS colour syntax.
