Batch Color Converter

Paste a list of color codes or CSS text and convert just the colors in one go

The batch color converter finds the colors in the text you paste and converts them all at once to the format you pick: HEX, RGB, HSL or OKLCH. A list with one color per line works, and so does a CSS or SCSS file or a design token JSON where names and symbols sit between the colors. Convert the example above to RGB and the value of the variable --brand, #3498DB, becomes rgb(52, 152, 219), while the semi-transparent #00000080 becomes rgba(0, 0, 0, 0.5). With the result set to "Original text", variable names, comments and indentation stay and only the color values change. With "Values only", the colors found are written as a plain list.

In the input box, each line gets a swatch of the color found on its left, and lines that could not be read get an exclamation mark. The palette strip at the top shows every color found at a glance, and the color cards below show one color in HEX, RGB, HSL and OKLCH together, each value copyable with a click. Switch the sort to hue or lightness, or turn on Merge duplicates, and the palette swatches slide to their new places so duplicates and near-duplicates stand out. The text and files you enter are never sent to a server; everything is processed in this browser.

When you need to convert many color codes at once

• Moving Tailwind CSS v4 colors to HEX: Tailwind CSS v4 defines its default palette as oklch() values. If you need the same colors in an email template, a document or an older design tool that only accepts HEX or RGB, paste the theme variable lines as they are and convert them to HEX.
• Handing a design color list to code: A designer may send brand colors as a HEX list that developers want as rgb() or hsl(), or the reverse: rgb() values from code that must go into a design tool as HEX. Named lines keep their names, so you never lose track of which variable a color belongs to.
• Converting old CSS to OKLCH: OKLCH describes a color by lightness, chroma and hue, which makes it easier to match colors of equal lightness or build color scales. Paste a CSS file and convert to OKLCH: selectors and properties stay as they are and only the values get the new notation.
• Cleaning up scattered colors: A stylesheet edited by several people often mixes the same color in different notations, such as #3498db, #3498DB and rgb(52, 152, 219). Turn on Merge duplicates to see how many times each appeared and on which lines, and sort by hue so nearly identical colors sit side by side as candidates to consolidate.
• Converting three R, G, B spreadsheet columns: Copy the R, G and B cells from a table and paste them, and each row arrives as three numbers separated by tabs. These lines are read as colors too, so you can turn them straight into a HEX list.

How colors are found

1. When the whole line is one value: The tool reads HEX with a # (3, 4, 6 or 8 digits), rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), oklab(), oklch(), color(), and CSS named colors (148, such as tomato and rebeccapurple). HEX without the # and R, G, B triples are read only when the whole input is a one-per-line list, meaning the text contains no braces, brackets, colons, equals signs or semicolons. In that case it accepts 3 and 6 digits, and 8 digits only when at least one letter from a to f is present. An all-digit 8-digit value such as 20241020 could be a date, so it is not treated as a color. Three integers such as 12, 34, 56, or separated by tabs, are read as R, G, B.
2. When colors are mixed into text: Within a line, every HEX starting with # and every color function is found. Even next to other values, as in border: 1px solid #ddd;, only the color part is converted, and if a line has more than one color, each is converted. Named colors are converted when a quoted string contains only the name, as in "danger": "crimson", or when the name is a word inside a value, as in border: 1px solid red !important;. Words in comments, JSON keys and parts of other words (.red-button) are not converted.
3. Only value positions are changed: ID selectors made only of HEX letters, such as #add, #bad and #face, look exactly like colors. In text with braces (CSS, SCSS, JSON, config files), only #values in a value position change: there must be a colon (:) or an equals sign (=) after the nearest preceding {, } or ;. Selectors and @media preludes that run into { without a colon, and values inside url(#…), stay unchanged. For example, in a:hover #add { color: #fff; } only #fff changes.
4. Naming colors: If a line starts with a name, as in --brand: …, $brand: …, "brand": … or brand = …, that name is shown on the color card and in the table. CSS property names such as color, background and border are not color names, so they are not used.
5. Lines that cannot be read: A HEX with the wrong number of digits (#12345), R, G, B numbers over the range (256, 0, 0) and functions with the wrong number of values or units are marked as errors, and the result keeps the original text. When the whole input is a list, short lines of one or two words with no code symbols are flagged as mistyped values. In text mixed with code (CSS, JSON), @import lines, comments and colorless lines such as margin: 0; are not errors; they are simply skipped.

How each format is written

RGB and HSL are written in the older comma-separated notation. Modern CSS also reads the space-separated form such as rgb(52 152 219), but the comma form is understood by older browsers and most design tools. Trailing zeros are dropped, as in hsl(32, 100%, 50%).

HSL and OKLCH are not rounded to integers, because an integer value often reads back as a different color. For example, if you write #3498DB as hsl(204, 70%, 53%) and read it back, you get #3398DB. With the number of decimals in the table above, all 16,777,216 8-bit sRGB colors read back as the same HEX they started from. Writing the OKLCH chroma (C) to only four decimals put 94 of 140,608 sample colors off by one step, so it is written to five.

Example: the ten starter lines converted to RGB

This example contains 9 colors; lines 2 and 9 are the same color, so there are 8 different colors. With Merge duplicates on, #3498DB appears only once in the palette and the color cards, with ×2 and line numbers 2 and 9. If you switch the result to "Values only", only the 9 rgb() values (8 after merging) remain, without the comment line and variable names.

Colors outside sRGB are fitted to the closest color

HEX and RGB can only express values in the sRGB color space. Colors written in OKLCH, lab() or color(display-p3 …) can cover a wider range than sRGB, so a very vivid color cannot be carried over to HEX unchanged. For HEX, RGB and HSL output, this tool follows the gamut mapping method of W3C CSS Color 4. It keeps the lightness and hue in OKLCH and reduces only the chroma by bisection, stopping when the difference (deltaEOK) from the color clipped to the sRGB limits falls below 0.02, which is barely distinguishable by eye. The hue drifts less than with the simple method of clipping each channel to 0 to 255.

A color outside sRGB gets an "Out of sRGB" mark on its card, and its swatch shows the original color on top and the fitted color below. On a screen that supports a wide color gamut, the top half looks more vivid. Converting to OKLCH does not fit anything and writes the original value, so to keep a wide-gamut color intact, use the OKLCH result and keep HEX as a fallback for sRGB screens.

Alpha is carried over as 8-digit HEX and rgba()

The last two digits of an 8-digit HEX, and the last digit of a 4-digit HEX, are the alpha (opacity) value. 00 is fully transparent and FF is opaque. This tool snaps the alpha value to 0 to 255 steps, then picks the number to write in rgba(), hsla() or oklch() as CSS Color 4 specifies. If there is an integer from 0 to 100 that gives that step when multiplied by 2.55 and rounded, it writes that number divided by 100; otherwise it writes up to three decimal places. That is why 80 (step 128) is written as 0.5 and not 0.50196….

Common mistakes

• Padding a 3-digit HEX with zeros in front: #f80 is not #000F80; each digit is written twice, giving #FF8800. A 4-digit #f808 expands the same way to #FF880088.
• Shortening HSL to integers: As shown above, hsl(204, 70%, 53%) is #3398DB, not #3498DB. If you copy integer HSL values from another tool, the HEX can be off by a step or two.
• An rgb() value over the range: CSS does not treat rgb(300, 0, 0) as invalid; it clips to 255 and draws rgb(255, 0, 0). This tool converts it the same way and marks the card "Clamped". Three comma-separated numbers (256, 0, 0) are not CSS syntax, so they are not clipped and are treated as an error.
• Numbers without a '#': A 4-digit or 8-digit value of digits only, such as 2024, is not read as a color. To use a 4-digit HEX, add the #, as in #2024. Because HEX without a # is read only in lists, numbers such as 640 inside JSON text are not turned into colors.
• Named colors inside words: The red and blue in .red-button or /* blue */ are not converted. Named colors change only when they are the whole line or a word in a value position.
• Pasting the result without the error lines: A "Values only" result leaves out the lines that could not be read, so the row count no longer matches the original table. If rows must line up, fix those lines first using the line numbers in the status bar, or use "Original text".

Limits and cautions

• Up to 100,000 characters and 1,000 colors are converted at a time. Please split larger files. Opening a file reads only UTF-8 text files.
• var(--brand) and color-mix() depend on other values, so they are left unchanged. Colors written directly inside color-mix(), such as #fff, are converted one by one; relative colors like rgb(from …) and color functions containing var() or calc() are marked as unreadable values. Keywords such as currentColor and inherit also stay unchanged.
• color() reads only the srgb, srgb-linear, display-p3 and xyz (xyz-d65, xyz-d50) color spaces. a98-rgb, prophoto-rgb and rec2020 are flagged as errors.
• HEX, RGB and HSL values are colors rounded to 8-bit (0 to 255) sRGB. The same HEX can look different depending on your screen's color settings and brightness.
• A HEX fitted from a color outside sRGB is calculated with the CSS Color 4 method. It may differ by a step or two from how a browser draws that color on a wide-gamut screen, or from how another tool clips it.
• Print CMYK and ICC profiles are not covered. For colors to be printed, use the RGB to CMYK converter, and to look at a single color in detail, use the HEX to RGB converter.
• HEX results are always uppercase. In the Excel file, the swatch cells are filled without alpha, and the alpha is written in the notes column. CSV puts an apostrophe (') before cells that start with =, +, - or @ so they are not run as formulas, so a name like --brand is written as '--brand. Use the Excel file to keep names exactly.

The table values in this article were calculated with this tool on 2026-10-20. The conversion formulas and gamut mapping follow the W3C CSS Color 4 Candidate Recommendation Draft (9 October 2026 version) and do not change from year to year. The Tailwind color values were checked in the Tailwind CSS documentation on the same day, so they may differ if Tailwind changes its palette.

Sources

• 01W3C: CSS Color Module Level 4§5.1 out-of-range rgb() values are clamped, §5.2 HEX with 3, 4, 6 and 8 digits, §6.1 148 named colors, §9.4 oklch() percentage reference, §14.2.2 gamut mapping (JND 0.02), §16.1.1 alpha serialization
• 02MDN: <hex-color>The four notations #RGB, #RGBA, #RRGGBB and #RRGGBBAA; a single digit is repeated twice
• 03MDN: oklch()How to write lightness, chroma, hue and alpha; relative color syntax
• 04Tailwind CSS: Tailwind CSS v4.0The new P3 color palette for wide-gamut screens
• 05Tailwind CSS: ColorsDefault colors defined as oklch() theme variables, such as red-500 oklch(63.7% 0.237 25.331)
• 06Björn Ottosson: A perceptual color space for image processingThe design goals of the Oklab color space and its conversion formulas

Frequently asked questions

Related tools