Free tool

Color palette generator

Drop a photo. Get its main colours with HEX and RGB codes, a contrast check against white and black text, and a preview of a link in bio page in those colours.

Your photo

Number of colours
Order

Your palette

    Preview on a link in bio page

    Ana Ruiz

    Ceramics and pottery classes

    Shop new mugsBook a classLatest video

      What a color palette generator does

      A color palette generator finds the main colours in a picture and gives you their codes. This one reads your photo in your browser, groups similar pixels together and returns the 5, 6 or 8 colours that cover the most of the picture. Each colour comes with its HEX and RGB code and a contrast check for text.

      Creators use a palette from their own photos so that their profile, their posts and their link in bio page look like one set. The contrast check tells you which colours can carry text, and which ones work better as a background or an accent.

      Your photo never leaves your device. The tool draws it on a canvas in your browser, so there is no upload, no account and no limit.

      How to make a palette from a photo

      1. Drop a photo

        Use a photo you post often, such as your profile picture or a product shot. JPG, PNG and WebP files work.

      2. Pick how many colours

        Choose 5, 6 or 8 colours. Sort them by how much of the photo they cover, or from light to dark.

      3. Check the contrast

        Each colour shows its contrast with white and black text. Use the colours that pass for buttons with text.

      4. Copy the codes

        Copy one HEX code, the full list, or the palette as CSS variables for your website.

      Contrast rules for text on your colours

      The Web Content Accessibility Guidelines (WCAG 2.2) set the minimum contrast between text and its background. The badges in the tool use these numbers.

      What you checkMinimum ratioWCAG rule
      Normal text on a colour4.5:11.4.3 Contrast (Minimum), level AA
      Large text: 24px, or 18.5px bold3:11.4.3 Contrast (Minimum), level AA
      Normal text, stricter level7:11.4.6 Contrast (Enhanced), level AAA
      Large text, stricter level4.5:11.4.6 Contrast (Enhanced), level AAA
      A button or icon against the page3:11.4.11 Non-text Contrast, level AA

      Sources: W3C, Understanding 1.4.3 Contrast (Minimum), W3C, Understanding 1.4.6 Contrast (Enhanced), W3C, Understanding 1.4.11 Non-text Contrast. Checked 11 November 2026.

      On your More.You page

      Your colours on your link in bio page

      On a More.You page you set the background, the buttons, the fonts and the colours yourself. Every edit goes into a draft with undo, so your live page never shows a half-finished design.

      more.you/

      • Themes and colours on Free

        Pick a theme, then change the wallpaper, button style, fonts and colours. Shuffle the theme gallery when you want ideas.

        Themes and design

      • Start from a template

        Templates by occupation give you a finished first page. Apply one, then swap in the colours from your photo.

        Link in bio templates

      • Five header layouts

        Classic, hero, banner, cutout and shape headers put your photo where it works best with your palette.

      Color palette questions

      How does the color palette generator pick the colours?

      It shrinks your photo to a small copy, reads every pixel and sorts the pixels into groups of similar colours with a method called median cut. It averages each group, drops colours that look almost the same, and keeps the ones that cover the largest share of the photo.

      Is my photo uploaded anywhere?

      No. The tool opens your photo in your browser and reads it on a canvas element on your device. Nothing is sent to More.You or to any other server, and nothing is saved. Close the tab and the photo and the palette are gone.

      What do HEX and RGB codes mean?

      Both describe the same colour. RGB gives the amount of red, green and blue from 0 to 255, for example rgb(178, 246, 227). HEX writes the same three numbers in base 16 after a hash sign, for example #B2F6E3. Most design apps and website builders accept either one.

      What contrast does text need to be readable?

      WCAG 2.2, the web accessibility standard, asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text at level AA. Large text means 24px, or 18.5px in bold. The badges next to each colour show its ratio with white and with black text.

      How do I use the palette on my link in bio page?

      Use the lightest colour as the page background and a stronger colour for the buttons. Then check that the button text passes 4.5:1 on the button colour. The preview in the tool shows this setup and tells you which pairs pass.

      Which file types can I use?

      Any picture your browser can open, such as JPG, PNG, WebP and GIF. For a GIF the tool reads the first frame. If a file does not open, save it as a JPG or PNG on your phone or computer and try again.

      Can I copy the palette as CSS?

      Yes. Select Copy as CSS variables to get a :root block with one variable per colour, for example --color-1: #B2F6E3. Paste it at the top of your stylesheet and use var(--color-1) wherever you need the colour. The variables follow the order you picked, so --color-1 is the most used colour or the lightest one.

      More free tools

      Free, with no account. Nothing you type is stored on our servers.

      Font generator

      Turn your text into 24 styles, from bold and italic to script and bubbles. Copy and paste anywhere.

      Open tool →

      Bio generator

      Get 12 bio ideas for Instagram, TikTok, X or YouTube, with a live character count.

      Open tool →

      QR code generator

      Turn any link into a QR code. Pick colours, download PNG or SVG. It never expires.

      Open tool →

      See all free tools

      Guides: Bio Page Design Guide: Layouts, Themes, Buttons, Link in Bio Themes: How to Pick One That Converts.

      Related pages
      Sources
      1. W3C, Understanding SC 1.4.3 Contrast
      2. W3C, Understanding SC 1.4.6 Contrast
      3. W3C, Understanding SC 1.4.11 Non-text Contrast

      Sources checked on 11 November 2026.

      Your colours, on your own page

      Claim your free More.You page and set its background, buttons and fonts in the colours from your photo.

      more.you/

      Language