Palette to code

Paste your colors, one per line, name them if you like, and get them as CSS custom properties, SCSS variables, a Tailwind color config, a JavaScript object or JSON, ready to paste into your project.

  • Free
  • No sign-up
  • Runs in your browser
palette-to-css

Fill in the values above to see the result.

100% private — the calculation is done in your browser and nothing is sent to any server.

How it works

Paste your colors

One per line, plain or as "name: color".

Choose the format

CSS, SCSS, Tailwind, JavaScript or JSON.

Copy the code

Paste it directly into your project.

From a color list to working code

A palette that lives only as swatches in a design file has to be retyped into code sooner or later, and that is where typos creep in: a missing character in a hex code is invisible until something renders the wrong shade. This tool turns a plain list of colors into the exact syntax your project uses, so the values only have to be right once.

Naming your colors

Write just a color on a line, such as #0f9e8e, and it gets an automatic name based on the closest standard color, like teal-1. Write name: color, such as primary: #0f9e8e, and your own name is used and cleaned up into a safe identifier. Mixing both in the same list is fine.

The formats

  • CSS variables: a :root block with custom properties, usable everywhere in modern CSS.
  • SCSS variables: plain Sass variables for projects still using SCSS.
  • Tailwind config: a colors object formatted for the theme section of a Tailwind configuration file.
  • JavaScript object: variables you can import directly into a script or a design token file.
  • JSON: a plain name-to-value map, useful for design tools, APIs or any system that reads JSON.

Any CSS color works

Enter hex, rgb(), hsl() or a CSS color name; each is normalized to a hex code, including an alpha channel if the color has transparency. Lines that are not a valid color are simply skipped, so a stray header or comment in your list will not break the result.

Limits

This only formats colors; it does not generate a full design system with spacing, typography or shades of each color. For a scale of tints and shades from one color, see the color shades generator. Everything is processed in your browser.

Frequently asked questions

How do I turn a list of colors into CSS variables?
Paste your colors, one per line, choose CSS variables as the format, and copy the generated :root block.
Can I name my own colors?
Yes. Write name: color on each line, such as primary: #0f9e8e, and that name is used in the output.
What happens if I don't name a color?
It gets an automatic name based on the nearest standard color name, such as teal-1.
Does it support Tailwind?
Yes. Choose Tailwind config to get a colors object formatted for a Tailwind configuration file.
Can I paste RGB or color names instead of hex?
Yes. Any format your browser recognizes as a color works, and it is normalized to hex in the output.
Is my palette uploaded?
No. It is formatted in your browser.

Related tools

More utilities that also run without leaving your browser.

Text readability previewPreview text over two colors at several sizes and see what passes WCAG contrast. Accessible color adjusterAdjust a color to pass WCAG contrast against a background, keeping its hue. Brand color extractorGet the dominant colors of a logo or photo as ready-to-use hex codes. Color contrast checkerCheck text and background colors against WCAG, and get a fix that passes. Color picker from an imageClick any point of a photo to get its exact hex, RGB and HSL color. Color blindness simulatorSee how an image looks to someone with color blindness, side by side.