CSS & SCSS Colour Variables Generator
Turn a list of hex colours into ready-to-use CSS custom properties or SCSS variables, perfect for setting up a design system or website colour palette quickly.
Enter Your Colours
Generated Code
How to Use This Tool
List your colours one per line, either as just a hex code or as a name and hex code separated by a comma (for example primary, #2547A0). Choose your output format, click Generate Code, and copy the result straight into your stylesheet or configuration file.
Example
Entering primary, #2547A0 and secondary, #F6C445 with the CSS format selected produces a :root block with --primary: #2547A0; and --secondary: #F6C445; ready to paste into your stylesheet.
Supported Formats
This tool supports CSS custom properties (CSS variables), SCSS variables, LESS variables, and a Tailwind CSS colours configuration object, covering most common front-end workflows.
Why Use Named Colour Variables
Defining your palette as variables in one place makes it easy to keep colours consistent across a website or app, and means you only need to update a colour in a single spot if your palette changes later.
Frequently Asked Questions
What does this tool do?
It converts a list of hex colours into ready-to-use CSS, SCSS, LESS or Tailwind colour code.
Do I need to name my colours?
No, naming is optional. If you only enter a hex code, the tool will automatically assign a generic name like colour-1.
What formats does this tool support?
CSS custom properties, SCSS variables, LESS variables, and a Tailwind CSS colours configuration object.
How many colours can I enter?
There is no strict limit; you can list as many colours as your project needs, one per line.
What happens if I enter an invalid hex code?
Lines that do not contain a valid three or six digit hex code are skipped when generating the code.
Can I copy the generated code?
Yes, use the Copy Code button below the output to copy the full generated snippet to your clipboard.
Does this work with colour names that have spaces?
Yes, spaces and unsupported characters in a name are automatically converted to hyphens to make a valid variable name.
Is this tool free to use?
Yes, this tool is completely free to use with no sign-up required.
Related Colour Tools
Ready to Create with Colour?
Explore beginner-friendly Creative Flair by Sana painting kits with carefully selected colours and approachable step-by-step guidance.
Explore Painting KitsGenerated code follows standard CSS, SCSS, LESS and Tailwind CSS syntax conventions. Always review generated code before using it in a production project.