Color Palette Generator

Pick a way to start in the box above: Random, From one colour, From a photo or From HEX codes. The palette appears as tall colour stripes, each with its HEX code, its nearest colour name, a lock, arrows to move it and a small strip of tints and shades. Under the stripes you get every colour as HEX, RGB and HSL with its contrast against white and black text.

This color palette generator runs entirely in your browser. There is no account, no upload and no AI. Every palette is built with plain colour maths on your own device, and you can copy it as a HEX list, CSS variables, SCSS, Tailwind or JSON, save it as a PNG picture or share it as a link.

A colour palette is a small set of colours chosen to work together. A website, a logo, a slide deck, a wedding invitation and a room all look calmer and more planned when they use a few related colours again and again instead of many unrelated ones.

Choosing those colours by hand is slow. You need to know which hues sit well next to each other, how light or dark each one should be, and whether text will be readable on them. A palette generator does the first part for you. It suggests sets of colours that follow simple, well-known rules of colour harmony, and you keep, change or throw away what it shows.

This page gives you four ways to start, because people come with different needs. Some want a surprise and press Random again and again until something feels right. Some have one colour they must keep, such as a logo blue, and want colours that suit it. Some have a photo with a mood they love. And some already have a list of codes from a client or a style guide and just want to see them, name them and export them.

Whichever way you start, you end up in the same place: a row of colours you can lock, move, edit and test, with the codes ready to copy into your design program, your website or your document.

This color palette generator free of charge has no sign-up, no trial and no limit on how many palettes you make. Press Generate a hundred times, open as many photos as you like and copy every export without paying or creating an account.

The palette is built on your own device rather than on a paid server, so there is nothing to charge for and no queue to wait in. Nothing is added to what you copy or download: the CSS, SCSS, Tailwind and JSON text is plain code, and the PNG image shows only your colours, their HEX codes and their names.

Free does not mean cut down. Every mode, every harmony, the locks, the tints and shades, the contrast numbers, the website preview, the share link and all the export formats are open to everyone who opens the page.

A color palette generator online saves you from installing a design program just to find a few colours. Open this page on a computer, a tablet or a phone, choose a mode and the palette appears straight away. It works in all modern browsers, including Chrome, Edge, Firefox and Safari.

Many online colour tools send your photo or your choices to a server. This one does not. The page loads once, and from then on your own browser makes every palette, reads every photo and draws every preview. That keeps unreleased brand work and private photos private, and it is quick, because nothing has to travel over the internet while you work.

On a phone, the colour stripes stay side by side and get narrower as you add colours. Five or six colours are easy to read on a small screen; with nine or ten, turn the phone sideways or use the codes list below the stripes, which shows each colour on its own line.

Random is the quickest way to find ideas. Press Generate and you get a new palette of the size you set. On a computer you can also press the space bar, which is faster when you want to flick through many palettes in a row. The space bar works as long as you are not typing in a box.

The random palettes are not just any colours thrown together. Each time, the page picks a random hue, a random amount of saturation and a middle lightness, then one of five harmony types: analogous, split complementary, triadic, complementary or monochrome. It builds the colours from that and shuffles their order. That is why most random palettes look like they belong together, even though no two are the same.

Locks are what turn random results into a real palette. When you see a colour you like, press the lock icon above its HEX code. A locked colour keeps its place and its value when you press Generate again; only the unlocked colours change. Lock one good blue, keep pressing the space bar until the other colours suit it, lock those too, and you have a palette built step by step.

Press the lock again to unlock a colour. Locks also work in From one colour and From a photo, so you can keep a colour from a random palette and then switch to a harmony or a photo to fill the remaining places.

Use this color palette generator with one color when you already know the colour you must keep. That is common: a company has a logo colour, a team has a kit colour, a book has a cover colour, or you simply love one shade and want colours that go with it.

Switch to From one colour. A colour box and a HEX box appear. Click the colour box to choose a colour with your device's colour picker, or type a HEX code such as #2563EB in the box next to it. Both three-character and six-character codes work, with or without the #.

Then choose a harmony from the list: Analogous, Complementary, Split complementary, Triadic, Tetradic (square), Monochrome or Tints and shades. The palette is rebuilt the moment you change the base colour or the harmony, so you can click through the list and compare them in seconds.

The base colour is always the first colour, or the middle of the ladder for Tints and shades. The other colours keep its saturation and lightness unless the harmony asks for lighter or darker versions. If you need a lighter or darker partner for the base colour, the tints and shades strip under each stripe gives you seven steps to copy.

Colour harmony is a set of simple rules about which hues look good together. They all come from the colour wheel, where the hues run in a circle from red through yellow, green, blue and purple back to red. A colour's place on the wheel is its hue angle, from 0° to 360°, and each harmony picks colours at fixed angles from the base.

Analogous colours sit next to each other on the wheel, such as blue, blue-green and green. They feel calm and natural, because many scenes in nature use them, like a forest or the sea. With five colours the page uses hues from 40° below to 40° above the base; more colours spread further round the wheel.

Complementary colours sit opposite each other, such as blue and orange or red and green. They give the strongest contrast and make an accent stand out. Because two strong opposites can clash, the page adds a darker and a lighter version of each, a pale neutral and a deep neutral, so you have quieter colours for large areas.

Split complementary takes the base colour and, instead of its exact opposite, the two colours on either side of it. You still get contrast, but it is gentler and easier to balance. Triadic uses three colours evenly spaced round the wheel, such as red, yellow and blue. Tetradic, or square, uses four colours 90° apart and gives the most variety, which also means it needs the most care: let one colour lead and use the others in small amounts.

Monochrome keeps one hue and changes only its lightness and saturation, from very dark to very light. It is the safest choice for a clean, modern look. Tints and shades goes one step further and builds a ladder from the base: dark shades first, then the colour itself, then light tints. With five colours you see the darker half of the ladder; set Colours to 9 or 10 to see the whole scale.

No harmony is better than the others. They are starting points. Try each one with your base colour, keep the one that feels right for your project, and lock or edit colours from there.

Use this color palette generator from image files when a photo already has the mood you want: a beach at sunset, a forest path, a product shot or a painting. Switch to From a photo, press Select a photo and choose a picture. The main colours appear as the palette within a moment.

The photo stays in your browser. It is read by your own device, scaled down to 600 pixels on its longer side to keep things fast, and its pixels are grouped into colours. Nothing is sent to a server, and when you close the tab the photo is gone from the page.

The number of colours follows the Colours box. Change it from 5 to 8 and the page takes eight main colours from the same photo; change it back and you get five again. Press Other photo to pick a new picture; the palette is then rebuilt from the new photo.

The page can open any picture your browser can show, such as JPG, PNG, WebP and GIF. Fully or mostly see-through pixels are left out, so a logo on a transparent background gives the logo's colours rather than empty corners. If a file cannot be opened, a short message says so; an iPhone HEIC photo, for example, may need to be turned into a JPG first in some browsers.

The main colours of a photo are found with a method called median cut. The pixels are split again and again into groups of similar colours, each group is averaged, and groups that look the same to the eye are merged. The result is a set of colours that covers most of the picture.

Because they are averages, the main colours are often a little softer than the brightest spots you see. A tiny red flower in a green field may not appear at all with five colours, because it covers so little of the picture. Raise the count to 8 or 10 to bring out smaller accents, or crop the photo first so the part you care about fills more of the frame.

Photos with a clear mood give the best palettes: a few large areas of colour, even light and not too much clutter. Busy photos with many small objects tend to give muddy in-between colours. If the result feels flat, lock the colours you like and switch to Random or From one colour to fill the other places with cleaner colours.

If you need the exact colour of one spot, such as a logo or the paint on a wall, a palette from the whole photo is the wrong tool. Use the Color Picker from Image page instead: click the spot and you get its exact HEX code. Then type that code into From one colour here to build a palette around it.

Use the color palette generator from hex codes you already have when someone hands you a list, such as a brand guide, a theme file or a message from a client. Switch to From HEX codes, paste the codes into the box and press Use. The palette shows them in the order you pasted.

The box is forgiving. Codes can be separated by commas, spaces or new lines, and six-character codes work with or without the #. Three-character codes such as #F60 need the # in front so the page can tell them apart from other text. Anything that is not a code is ignored, so you can paste a line of CSS or a sentence and only the codes are kept.

Up to ten codes are used. In this mode the palette is exactly what you pasted, so the Colours box does not add or remove colours. Once the codes are in, everything else works as usual: you see the nearest names, the RGB and HSL values, the contrast numbers, the tints and shades and the website preview, and you can export the set in any format.

This mode is also the quickest way to check a palette someone else made. Paste it, look at the contrast numbers and the preview, edit any colour that does not work and send back the improved list with Copy HEX list or a share link.

A color palette generator with hex codes is what most people need, because HEX is the form used in CSS, HTML, design programs, slide software and brand guides. Each stripe shows its HEX code in large type; click it to copy that code, and the stripe says Copied for a moment.

Below the stripes is a list with one line per colour. Each line shows a small swatch, the HEX code, the RGB value and the HSL value, written the way CSS writes them, for example #264653 · rgb(38, 70, 83) · hsl(197, 37%, 24%). On the right are two numbers: the contrast with white text and the contrast with black text.

A HEX code is the red, green and blue values of a colour written in base 16. The first two characters are red, the next two green and the last two blue, from 00 (none) to FF (full). RGB writes the same three values as ordinary numbers from 0 to 255. HSL describes the colour as hue (its angle on the colour wheel), saturation (how strong it is) and lightness (how close it is to black or white).

HSL is the easiest to adjust by hand. Keep the hue and change the lightness and you get a lighter or darker version of the same colour; keep the lightness and change the hue and you get a different colour of similar weight. That is exactly how the harmonies on this page are built.

This color palette generator with names gives every colour a readable name under its HEX code, such as Teal, Sandy Brown, Charcoal or Burnt Sienna. A name makes a palette easier to talk about: you can tell a colleague to use the charcoal for text and the teal for buttons without reading out codes.

The names come from a list of the standard CSS colour names plus common design and paint names. Most colours in a palette are not exactly one of those named colours, so the page finds the closest one. It compares colours the way people see them, with a measure called ΔE 2000, rather than by raw RGB numbers.

Names are a description, not the exact colour. Two different colours in the same palette can share a nearest name, and a name can sound brighter or duller than the real colour. For the exact value, always use the HEX code.

The names are also used in the exports. In CSS variables, SCSS and Tailwind each colour is named after its nearest name and its position, such as --teal-2, and in the JSON export each entry has a name field. The PNG image prints the name under each HEX code, which helps when you share a palette with someone who does not work with codes.

Each colour stripe has its own small set of controls. At the top are a left arrow, a lock and a right arrow. The arrows move the colour one place to the left or right, so you can put the colours in the order you want, for example from light to dark or with the main colour first. The lock keeps the colour when you generate again.

Under the name is a small edit link. Press it to open your device's colour picker and change that colour by hand. The stripe, the name, the codes and the preview update as you drag. This is the way to nudge a colour that is almost right, such as making a green a little bluer or a beige a little warmer.

At the bottom of each stripe is a strip of seven small swatches: three tints that move towards white, the colour itself in the middle, and three shades that move towards black. They are mixed at 60%, 40% and 20% towards white and 20%, 40% and 60% towards black. Click any of them to copy its HEX code; on a computer, hover over one to see its code first.

The tints are handy for soft backgrounds, cards and table rows where the full colour would be too strong. The shades are handy for borders, hover states and text on a light tint of the same colour. Because they share the hue of the main colour, they never clash with it.

The Colours box at the top right sets how many colours the palette has, from 3 to 10. Type a number or use the small arrows. The palette changes straight away in Random, From one colour and From a photo; locked colours stay where they are.

Three to five colours is the usual size for a website, a logo or a slide deck. It is enough for a background, a text colour, a main colour and one or two accents, and few enough to use with care. Six to eight colours suit illustrations, charts and brands with more than one product line. Nine or ten are useful for colour scales, mood boards and data with many groups.

More colours is not always better. Every extra colour is another thing to keep consistent. If you are not sure, start with five, and add colours only when a design really needs a new role.

The Export card under the palette turns your colours into something you can use elsewhere. Copy HEX list, CSS, SCSS, Tailwind and JSON copy text to the clipboard; the button says Copied for a moment, and you paste the text wherever you need it. PNG image downloads a picture, and Share link copies a link.

In CSS, SCSS and Tailwind each colour gets a variable name made from its nearest colour name and its position, such as --teal-1 or $sandy-brown-4. That keeps the entries easy to tell apart. Once the code is in your project, rename them to their roles, such as --background, --text, --primary and --accent, so the code says what each colour is for.

The PNG image is 1200 × 630 pixels, a size that fits link previews and most social posts. Each colour is a tall band with its HEX code and name near the bottom, in black or white, whichever is easier to read on that colour. It is a tidy way to show a palette to a client or to drop it into a mood board or a presentation.

The JSON export lists each colour with its name, its HEX code and its RGB values as three numbers. It is easy to read from JavaScript, Python or any other language, and it is a good format for keeping palettes in a project folder.

Share link copies a link to this page with the colours written at the end, after a # sign, such as #264653-2A9D8F-E9C46A. When someone opens the link, the page loads those colours in From HEX codes mode, ready to look at, edit and export. The colours are part of the link itself, so nothing is stored on a server and the link keeps working.

Recent palettes keeps your last palettes in this browser. Each time the palette changes it is saved, and the earlier ones appear as small colour bars under the export buttons. Click one to bring it back. Up to twelve palettes are kept, and the eight before the current one are shown.

Recent palettes live only in this browser on this device. A private window, another browser or cleared site data starts empty. For a palette you want to keep, copy a share link or the JSON and save it somewhere safe.

A palette can look lovely as stripes and still fail on a real page. The Website preview shows your colours on a tiny mock page: a top bar with a brand name and menu, a headline, a line of body text, a primary button and an accent button.

The page gives each colour a role automatically. The lightest colour becomes the background, the darkest becomes the text, the most colourful of the rest becomes the primary colour for the top bar and the main button, and the next most colourful becomes the accent. With only three colours the primary and accent are the same. Text on the top bar and the buttons is black or white, whichever reads better.

Under the preview is a contrast check for the body text on the background, for example 9.85:1. If it is 4.5:1 or more, the line says it passes WCAG AA; if not, it says the text is below 4.5:1 for body text. That is a quick warning before you build a whole page on colours that are hard to read.

The roles follow the colours, so to change them, change the colours. If the background is not the colour you want, make the colour you want lighter than the others with its edit link, or replace the lightest colour. If the text is too pale, make the darkest colour darker or add a near-black colour to the palette.

A color palette generator for website work has to think about more than looks. A website needs a background that is calm for long reading, a text colour with strong contrast, a main colour for links and buttons, and an accent for the few things that must stand out, such as a sale badge or a sign-up button.

A simple way to get there: start with your main colour in From one colour, try Complementary or Split complementary, set Colours to 5, and check the website preview. If the lightest colour is not light enough for a background, add a near-white colour by editing one stripe. If the darkest is not dark enough for text, edit another to a deep shade, or copy one from the tints and shades strip.

Keep the background quiet. Most readable websites use a white, an off-white or a very light tint of the main colour for large areas, and save the strong colours for smaller parts. Dark mode works the same way in reverse: a very dark background, light text and the main colour a little lighter than usual so it still stands out.

When the palette works in the preview, press CSS or Tailwind, paste the code into your project and rename the variables to their roles. Test a real page with real text, because a short headline in a preview is easier to read than a long article.

The 60-30-10 rule is an old rule from interior design that works just as well on screens. Use your main or neutral colour for about 60% of the space, a second colour for about 30%, and a strong accent for about 10%. The large share keeps things calm, the middle share adds interest, and the small share draws the eye.

On a website, the 60% is usually the background and large panels, the 30% is the header, cards, sidebars or section backgrounds, and the 10% is buttons, links and highlights. On a slide deck, the 60% is the slide background, the 30% is headings and shapes, and the 10% is the one number or word you want people to remember.

The website preview on this page follows the same idea: the background fills most of the space, the primary colour fills the top bar and the main button, and the accent appears only once. If an accent looks too loud in the preview, that is usually a sign it is being used for more than 10%.

The numbers are a guide, not a law. A palette of five colours does not need five equal shares. Give one colour the lead, let the others support it, and keep the brightest colour for the few places where it matters.

Contrast is how different two colours are in lightness, written as a ratio from 1:1 (no difference) to 21:1 (black on white). The Web Content Accessibility Guidelines, or WCAG, use it to say whether text is readable. Good contrast helps everyone, and it is essential for people with low vision and for anyone reading a phone in bright sunlight.

The codes list shows two contrast numbers for each colour: one with white text and one with black text. If a colour has 4.5 or more with white, white body text is readable on it; if it has 4.5 or more with black, black text works. Many mid-tone colours, such as a bright orange or a light blue, pass with one and fail with the other, and some pass with neither for small text.

The website preview adds a third check: the darkest colour as text on the lightest colour as background, with a clear pass or fail against 4.5:1. For a page full of text, aim for that line to pass, and higher is better.

If a colour you love fails, you do not have to drop it. Use it for large shapes, borders and icons instead of small text, or copy a darker shade from its tints and shades strip for text and keep the original for decoration. These checks follow the WCAG contrast formula; they do not cover every part of accessibility, such as font size or colour blindness, so do not use colour alone to carry meaning.

A color palette generator for brand work helps you go from one logo colour to a full set you can use everywhere: on the website, in slides, on social posts, on packaging and on signs. A brand palette usually has one or two main colours, a few neutrals for backgrounds and text, and one accent.

Start with the colour that matters most. If you have a logo, take its exact HEX code with the colour picker, type it into From one colour and try the harmonies. Analogous and Monochrome give a calm, grown-up look; Complementary and Split complementary give energy and a clear accent; Triadic feels friendly and playful.

Think about what the colours say. Blues are often read as calm and trustworthy, greens as fresh or natural, reds and oranges as warm and energetic, purples as creative, and black and gold as premium. These meanings change between cultures and industries, so look at what others in your field use, and aim to be recognisable rather than identical.

Test the palette before you commit. Check the contrast numbers, look at the website preview, export the PNG image and look at it on a phone and a laptop. Then write down the HEX codes, their roles and where each one should be used, so everyone on the team uses the same colours. A share link is an easy way to keep the official palette in one place.

Finally, use the brand colours in the small things too. A site icon in the browser tab is often the first place people see them; the Favicon Generator makes one from your logo or a letter on your main colour.

This is a color palette generator no AI is involved in. Every palette comes from plain colour maths: hue angles on the colour wheel for the harmonies, fixed mixes towards white and black for tints and shades, a median cut for photos and a WCAG formula for contrast. You can predict what each mode will do, and the same base colour and harmony always give the same palette.

Random mode uses your browser's built-in random number source to pick the hue, the strength and the harmony type, then builds the palette with the same maths. There is no model, no prompt and no server. That also means nothing you do here is used to train anything.

Plain maths has another advantage: it is fast and it works offline once the page has loaded. There is no waiting for an answer and no limit on how many palettes you can try.

A few basic ideas make any palette easier to judge. The first is hue, the family of a colour: red, orange, yellow, green, blue or purple. The second is saturation, how strong or grey a colour is. The third is lightness, how close it is to white or black. HSL, shown in the codes list, gives you all three as numbers.

Warm colours, such as red, orange and yellow, seem to come towards you and feel active. Cool colours, such as blue, green and violet, seem to step back and feel calm. Many good palettes mix both: mostly cool colours with one warm accent, or the other way round.

Lightness matters more than people expect. A palette where every colour has the same lightness looks flat, even if the hues are very different, and it often fails contrast checks. A palette with a clear light colour, a clear dark colour and a few in between almost always works. A quick test is to squint at the stripes: if you cannot tell the colours apart, add a lighter or a darker one.

Strong, fully saturated colours are tiring in large areas. Use them in small amounts and give the big areas a softer, greyer or lighter version. The tints in each stripe's strip are made for this.

Each way of starting suits a different moment. Random is best when you have no fixed colours and want ideas fast; use the space bar and the locks. From one colour is best when one colour is fixed, such as a logo, and you want colours that follow a clear rule of harmony.

From a photo is best when you want a mood: the colours of a place, a season or a product shot. From HEX codes is best when the colours are already decided and you want to name, check, preview and export them.

You can move between them freely. Lock a colour from a photo, switch to Random to fill the rest, edit one stripe by hand and export the result. Locked colours stay put whichever mode fills the other places, except From HEX codes, which always shows exactly the list you paste.

For developers, the exports are ready to paste. CSS gives a :root block with one custom property per colour, which you can use as var(--teal-1) anywhere in your stylesheet. SCSS gives one $variable per line for Sass projects. Tailwind gives a colors object to paste into the theme section of your config, after which the colours work as class names.

The JSON export is a list of objects with name, hex and rgb, where rgb is an array of three numbers. It is a simple format for design token files, for theming a chart library or for keeping palettes under version control.

A good habit is to rename the exported variables to their jobs, not their colours. A variable called --primary still makes sense when the brand colour changes from teal to purple; a variable called --teal does not. Keep the generated names in a comment if you want to remember where each colour came from.

For dark mode, make a second palette with the same roles: a dark background, a light text colour and versions of the main and accent colours that are a little lighter. Paste the HEX codes into From HEX codes to check both palettes in the preview before you write the code.

Most programs accept a HEX code. In slide and document software, open the colour menu, choose more colours or custom colours, and paste the HEX code, or type the RGB numbers from the codes list. Save the colours as a theme if the program allows it, so every new slide uses them.

In design programs, add each HEX code as a colour style or swatch. The PNG image is a quick reference to keep beside your work, and the HEX list pasted into a note keeps every code in one place.

For print, a HEX code is a good starting point but not the final word. Screens give off light and paper reflects it, so printed colours often look a little darker or duller. Send your printer the HEX codes and ask for a proof before a large print run.

Palettes often lead to another job. To read the exact colour of one spot in a picture, such as a logo, use the Color Picker and paste the code here. To make a browser tab icon in your new colours, use the Favicon Generator.

Before taking colours from a photo, Crop Image lets you keep only the part with the colours you want, and Remove Background takes away a busy background around a product. To put text in your palette colours on a picture, use Add Text to Image, and to frame a picture in one of your colours, use Add Border.

To make your exported PNG image or a mood board smaller for sharing, use Compress Image or Resize Image. To combine several pictures into one board, try Photo Collage, and to make a QR code for a printed card, try the QR Code Generator.

Nothing is uploaded. Palettes are made in your browser, and a photo you choose is read on your own device and kept only in the page's memory. Nothing about your colours or your photos reaches our servers.

The only thing the page stores is your list of recent palettes, kept in your browser's local storage on this device. Clear it by clearing the site data in your browser. Share links carry the colours in the link itself, not in a database.

Because nothing leaves your device, you can safely work on unreleased brand colours, client projects and personal photos.

The harmonies work in HSL. The page reads the hue, saturation and lightness of the base colour, adds fixed angles to the hue for each harmony, keeps lightness between 4% and 96% so no colour turns pure black or white, and turns the results back into RGB and HEX.

For a photo, the browser decodes the file, the page draws it on a hidden canvas no larger than 600 pixels on its longer side, and up to about 60,000 of its pixels are read. A median cut splits them into groups, and groups that look alike, with a ΔE 2000 under 6, are merged. Mostly see-through pixels are skipped.

Names are found by comparing each colour with every name in the list using ΔE 2000 in the Lab colour space. Contrast uses the WCAG relative luminance formula. Tints and shades are simple mixes of the colour with white and with black. All of this happens in a moment, even on a phone.

Start with fewer colours than you think you need; five is plenty for most projects.

Include one very light and one very dark colour, so you always have a background and a text colour.

Lock the colours you like early, then let Random fill the rest.

Give one colour the lead and use the brightest one for small accents only.

Check the contrast numbers before you use any colour for text.

Save palettes you want to keep as a share link or JSON, because recent palettes live only in this browser.