Color Palette Generator

Start with one color, build a five-color palette and see it in a sample layout. Check text contrast, then copy codes or export a file for your project.

COLOR STUDIO

Build a palette from one color

Choose colors, explore combinations, check contrast and export a palette for your project.

Primary color#5B5CE2

Your palette

Click a swatch to edit it; double-click to copy its HEX code.

0 locked colors
EXPORT

Export your palette

Palette generation and export run in your browser.

Create and check a color palette

01

Start with a HEX color

Enter a HEX code or use the color picker. Click “Generate palette” to fill five swatches; lock any color you want to keep before randomizing.

Choose an export format

When you needChooseCheck the output
Color tokens for a web pageCSS or SCSSReview the five assigned color roles before pasting the variables.
Palette data for an app or themeJSON or TailwindCheck the generated keys and adapt the Tailwind snippet to your project setup.
A visual color sheetSVG or PNGOpen the downloaded image and check the swatches and HEX labels.

If the colors or export do not look right

The HEX value is rejected
Use a 3 or 6 digit HEX color, with or without #, then generate again.
A color changes when you randomize
Lock the swatch before clicking “Randomize”. The other unlocked colors can change.
Text is hard to read
Open Contrast, choose the actual text and background colors, and adjust them until the required text size reaches your target threshold.
The exported file does not fit your project
Choose the format in the export area and inspect the result. The PNG button downloads an image; Copy HEX copies the five codes.

Check colors in the final design

The contrast panel compares two selected colors with WCAG 2.1 text thresholds. A passing ratio does not certify the entire page: test real font sizes, states and backgrounds after applying the palette. The sample website is an illustration. If browser storage is available, the five swatches are kept here for later editing.

Comments & feedback

Rate this tool

Loading ratings…

Write a commentNo account needed
Up to 4,000 characters0 / 4.000

Do not share passwords, sensitive information or the contents of files you are processing.

Reviewed before posting. Email stays private.

Embed this tool on your websiteFree · Copy once, receive tool updates automatically

Paste the iframe into HTML, WordPress or any platform that supports embeds. The tool runs in the visitor’s browser; adjust its height and theme as needed.

View the embed guide and supported platforms →

<div style="max-width:900px">
  <iframe data-kitotool-embed src="https://kitotool.com/embed/en/color-palette/" title="Color Palette Generator — KitoTool" width="100%" height="1200" style="display:block;width:100%;border:1px solid #dbe3ee;border-radius:12px" loading="lazy" referrerpolicy="strict-origin-when-cross-origin"></iframe>
  <p style="margin:6px 2px 0;text-align:right;font:12px/1.5 system-ui,sans-serif;color:#64748b">Free tool by <a href="https://kitotool.com/en/color-palette/" target="_blank" rel="nofollow noopener noreferrer" style="color:#2359d4;text-decoration:underline">KitoTool</a></p>
</div>

The code includes a visible credit below the iframe; its link uses nofollow for a widely distributed widget.

Optional: automatically resize the iframe

Add this script once to the page containing the iframe.

<script>
(function(){var origin="https://kitotool.com";function frames(){return document.querySelectorAll("iframe[data-kitotool-embed]")}function measure(f){if(f.contentWindow&&new URL(f.src).origin===origin)f.contentWindow.postMessage({type:"kitotool:measure"},origin)}window.addEventListener("message",function(e){if(e.origin!==origin||!e.data||e.data.type!=="kitotool:resize"||!Number.isFinite(e.data.height))return;frames().forEach(function(f){if(f.contentWindow===e.source&&new URL(f.src).origin===origin)f.style.height=Math.max(320,Math.min(12000,Math.ceil(e.data.height)))+"px";});});function connect(){frames().forEach(function(f){f.addEventListener("load",function(){measure(f)});measure(f)})}if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",connect,{once:true});else connect()})();
</script>