Free Color Picker

Pick any colour and instantly get HEX, RGB, HSL and CMYK values, plus ready-made shades and tints. Runs entirely in your browser.

  • 100% free
  • No sign-up

Click the bar above to open the colour picker, or type a HEX code on the right.

Shades & tints

Planning a new website?

We design fast, mobile-first websites that look sharp on every screen and turn visitors into enquiries.

See our web design services →Book a strategy call
01Overview

What does the colour picker do?

A colour picker lets you choose a colour visually and get its exact code. Designers, developers and marketers need those codes to keep brand colours consistent across websites, social graphics, print and presentations.

This free colour picker converts any colour into HEX, RGB, HSL and CMYK instantly, with one-click copy for each. It also generates a row of shades and tints, so you have lighter and darker versions ready for hover states, backgrounds and borders.

Type a code into any field and the others update, which makes it a quick colour converter too.

Quick answer

Click the swatch or type any HEX, RGB or HSL value above to get the matching codes in every format, plus shades and tints. Use HEX or RGB for websites, HSL for adjusting colours in CSS, and CMYK as a starting point for print.

  • Free, no sign-up
  • HEX, RGB, HSL, CMYK
  • Shades and tints
  • One-click copy
02How to use

How to use the Color Picker

Start from a brand colour, a photo you like, or any code.

  1. Pick a colour

    Click the swatch to open the picker, or type a code into any field.

  2. Copy the format you need

    HEX for web, RGB for screens, HSL for CSS tweaks, CMYK for print.

  3. Use shades and tints

    Click any variation to copy it for hovers, backgrounds or borders.

  4. Save your palette

    Note the codes in your brand guidelines so everyone uses the same values.

03How it works

Colour formats explained

The same colour can be written several ways.

Brand blue #024C96, from lightest tint to darkest shade
#E6EDF4
#B3C9E0
#749DC5
#3570AB
#024C96
#023970
#01264B
Brand blue in every formatHEX #024C96 RGB rgb(2, 76, 150) HSL hsl(210, 97%, 30%) CMYK cmyk(99%, 49%, 0%, 41%)

CMYK values are a mathematical conversion. For accurate print colour, ask your printer for a proof or use a Pantone match.

Worked example

Building a button colour set from one brand colour.

Base
#024C96
Hover (darker shade)
#013A73
Background (light tint)
#EEF4FB
Border (mid tint)
#BFD6F0
One brand colour becomes a complete, consistent set for buttons, cards and highlights.
04Reference

Which colour format should you use?

Each format suits a different job.

FormatBest forExample
HEXWebsites, design tools, brand guides#FF5500
RGB / RGBAScreens, CSS with transparencyrgba(255, 85, 0, 0.5)
HSLAdjusting lightness or saturation in CSShsl(20, 100%, 50%)
CMYKPrint: flyers, packaging, business cardscmyk(0, 67, 100, 0)
05Tips

Tips for working with colour

Consistent colour is one of the cheapest ways to make a brand look professional.

Do this

  • Document exact codesWrite HEX, RGB and CMYK values in your brand guidelines.
  • Use HSL for variationsChange only the lightness value to create consistent shades of one colour.
  • Check contrastRun text and background colours through the contrast checker for accessibility.
  • Limit your paletteOne or two brand colours plus neutrals is easier to apply consistently.

Colour mistakes to avoid

  • Eyeballing brand coloursSlightly different blues across a site look careless. Use exact codes.
  • Using RGB for printScreens and printers handle colour differently. Convert to CMYK and request a proof.
  • Low-contrast textLight grey on white looks elegant and is hard to read.
  • Too many accent coloursSeveral bright colours compete for attention and dilute the call to action.
06FAQ

Frequently asked questions

How do I find the HEX code of a colour?

Pick the colour in the tool or type its RGB or HSL value, and the HEX code appears instantly.

What is the difference between HEX and RGB?

They describe the same colour. HEX writes the red, green and blue values in hexadecimal, while RGB writes them as numbers from 0 to 255.

When should I use CMYK?

For anything printed. CMYK describes cyan, magenta, yellow and black ink, while RGB and HEX describe light on screens.

What are shades and tints?

Shades are a colour mixed with black, making it darker. Tints are mixed with white, making it lighter.

Can I convert colour codes with this tool?

Yes. Type a value in any format and the others update automatically.

Is it free to use?

Yes, completely free with no sign-up, and it runs in your browser.

The Big Growth team

Want a website that looks this polished?

We design and build fast, accessible, conversion-focused websites on WordPress and custom stacks. Explore our web design services.

Talk to our design team Browse all free tools