On this page
1. Create your color palette in Coolors #
In Coolors, open the palette generator. It displays five colored columns. The site tells you the fastest control directly: press the spacebar to generate color palettes. Tap space a few times until two or three colors already feel close to the direction you want, then stop.
What you should see: the five colored columns change with each press. Do not try to land the exact palette here; the next two steps shape it.
2. Lock the colors you want to keep #
Once a color is right, click the lock icon on that column to lock the color in place. Coolors keeps a locked color fixed. Press the spacebar again and the generator rebuilds around it instead of replacing it. Lock two colors and you narrow the search to the remaining three.
What you should see: the locked swatches keep their values while the ones you left open change. This is the part of Coolors that saves the most time, because you are steering the generator instead of restarting it.
3. Adjust a color to an exact value #
Click a swatch's HEX value to open the Color Inspector, as described in the official help. Enter the exact hex value you need. For the website example, set the light background to #F3EFE7 and the accent to #0F5C57.
What you should see: the swatch updates as you change the value, and the hex string beside it matches what you typed. If you are matching an existing brand color, paste its hex value here rather than eyeballing the wheel.
4. Keep the palette to five colors on the free plan #
The free version of Coolors generates a five-color palette. Generating palettes with more than five colors is one of the Pro benefits listed on the site, alongside removal of the account limits. If you need six or more colors in one saved palette, either upgrade or hold the extra shades in a second palette.
What you should see: a five-column palette you can lock, adjust and export at no cost. Check which basic export options your free account offers; advanced controls belong to Pro.
5. Name and save the palette #
Sign in to a free account, then click Save in the generator. Give the palette a name such as Website warm paper in the window that opens. Saved palettes appear in your account, and you can reopen, edit or share each one later. A free account can save up to 10 palettes, one project and one collection, and five favorite colors.
What you should see: the named palette appears in your account's library. If the save does not stick, check that you are signed in; copy the palette URL if you also want a link you can keep with your project.
6. Export the palette in the format you need #
Open the Export menu next to the palette. The Export a palette help article lists URL, Image, PDF, SCSS and ASE, and the current menu also offers CSS, SVG and Code. Choose the target that matches your destination:
- CSS or SCSS for a website or web app.
- SVG or Image for a moodboard or presentation.
- PDF for a client handout.
- ASE for an Adobe swatch file.
- Code for the values as code you can paste into a stylesheet.
The PDF and Image options open a small dialog where you set a Title, a Description, and the Color Spaces to include before you click Export. Leave only the spaces you actually need, such as sRGB, to keep the file clean.
7. Check the exported file before you use it #
Open whatever you exported and confirm the values. Paste the CSS into a scratch file and check that the hex codes match the palette; open the PNG, PDF or SVG and confirm the swatches and the title are correct. If you exported to ASE, open the swatch file in your design app and check the color count.
What you should see: five colors, in the order you built them, with the values you set. This catches an export that still carries a color you meant to replace.
Known problems and fixes #
Account saving needs a signed-in session. The Save a palette documentation describes saving into your account. Sign in before building an account library. For a separate project record, copy the URL from Export and keep the hex values in the design file.
The free library runs out of room. A September 2025 App Store review praises the app but objects to needing a subscription for more saved palettes. For browser work, check your current account allowance before building a large library. Export finished palettes into the project, delete account copies you no longer need or choose a paid plan.
Bright screen colors may not survive print. A designer in r/graphic_design points out that saturated pinks, purples and greens from a web palette often will not translate to CMYK. Fix: if the palette is going to a printer, check the CMYK values in a print-aware app first, and keep the sRGB export for screen work.
Troubleshooting #
| Problem | Likely cause | Fix |
|---|---|---|
| Spacebar does nothing | Focus is inside a text field | Click on the palette area, then press space |
| A color keeps changing | It is not locked | Click the lock icon on that swatch |
| Hex value will not apply | A stray character in the field | Clear the field and paste the value again |
| Export option is missing | You are looking at a single color | Open the Export menu on the full palette |
| Saved palette is gone | You were signed out | Sign in and save again, or reopen the palette URL |
Variations for a different goal #
Export just the code. Use Code or CSS instead of a PDF or image when the palette is going straight into a stylesheet. You get pasteable values rather than a picture of five swatches.
Build a client handout. Use PDF, set a clear Title and a one-line Description, and limit the Color Spaces so the page stays readable. Add your own logo only if the project calls for it.
Match an existing brand color. Paste the brand hex into the picker, lock that swatch first, then generate around it. That keeps the fixed value in place while the rest of the palette moves, which is the opposite of starting from a random set.
Completion checklist #
- The palette has exactly the number of colors your plan allows.
- Every fixed color is locked and shows the value you set.
- The palette is saved under a name you will recognize later.
- The export format matches where the colors are going.
- You opened the exported file and confirmed the values and the count.
Next steps #
For more palette tools, read the best free color palette generators, then compare Coolors and Adobe Color if you also need a contrast check. If a client already gave you a brand color and you need it verified for accessibility, Adobe Color is the next stop. For a curated starting point when you have no direction yet, browse Color Hunt.
Featured illustration: Webindexly.
