ToolXkit Icon

Colour Picker

Pick a colour and read it as HEX, RGB, HSL, HSB and CMYK at once.

  • Free
  • No signup
  • Nothing uploaded
  • No watermark
#2563EB
  • HEX#2563EB
  • RGBrgb(37, 99, 235)
  • HSLhsl(221.2, 83.2%, 53.3%)
  • HSB / HSVhsv(221.2, 84.3%, 92.2%)
  • CMYKcmyk(84%, 58%, 0%, 8%)
  • Nearest nameroyalblue (closest)

Worked out in your browser. Nothing you enter or open is uploaded.

How to Pick a Colour and Get Its Codes

Colour Picker: before and after TEXT A YOUR INPUT COLOUR PICKER DONE A RESULT

Choosing a colour for a poster, a slide or a website usually ends with someone asking for the exact code. This picker lets you find the shade by eye with sliders, then shows it in every common format at once so you can copy whichever one your software wants.

Click the swatch to open your system’s colour chooser, type a code you already have, or drag the Hue, Saturation, Lightness, Red, Green and Blue sliders. The large preview updates as you move, and six lighter and darker versions appear underneath for quick variations.

No software to install Free Works on any device

Steps to Choose a Colour

  1. 1. Start from the swatch or a code

    Click the small colour square to use your device’s picker, or type into the box beside it. It accepts hex like #2563EB, rgb(), hsl() and names such as tomato or teal.

  2. 2. Fine-tune with sliders

    Hue moves around the colour wheel, Saturation controls how vivid it is and Lightness how pale or deep. The Red, Green and Blue sliders adjust each channel directly.

  3. 3. Read every format

    The list shows HEX, RGB, HSL, HSB/HSV, CMYK and the nearest colour name. Press Copy on any row to put that value on your clipboard.

  4. 4. Grab a tint or shade

    Six swatches below show the colour 12, 25 and 40 percent lighter and darker. Click one to copy its hex code for hover states or backgrounds.

Try it now

What Is a Colour Picker?

A colour picker turns a colour you can see into numbers a computer understands. Screens mix red, green and blue light, which is what HEX and RGB describe. HSL and HSB describe the same colour in a way that feels more natural to people: which hue, how strong, how light. CMYK is the ink mix that printers use, though exact print matching needs a proper colour profile.

Why Use Colour and CSS Tools?

Choosing colours that work together and writing CSS for shadows, gradients or grids takes a lot of trial and error. These tools show a live preview as you adjust, then hand you the colour codes or CSS to copy.

“See it first, then copy the code.”
  • Live previews while you adjust
  • Codes in HEX, RGB and HSL
  • CSS ready to paste
  • Designs checked for colour blindness
  • Palettes that work together
  • Readable text checked for contrast
  • Print colours in CMYK
  • Colours taken from photos

Popular Uses for Colour Pickers and CSS Generators

Designers and site owners use these for the same handful of jobs.

  • Brand colours Build a palette around a logo colour with matching tints, shades and accents.
  • Readable buttons Check that text on a coloured button passes the WCAG contrast ratio.
  • Card shadows Adjust a box shadow until a card looks right, then copy the CSS.
  • Page layouts Set up a CSS grid or flexbox layout visually instead of guessing values.
  • Print artwork Convert screen colours to CMYK and check bleed before sending a flyer to print.
  • Colours from a photo Pull the main colours out of a product photo to match a web page.
  • Colour blind checks See how a chart or poster looks to people with different kinds of colour blindness.
  • Button styles Design a gradient, glass or soft 3D style button and take the code.

What the Colour Picker Includes

Six formats at once

HEX, RGB, HSL, HSB/HSV, CMYK and the closest named colour, each with its own Copy button.

Six sliders

Adjust hue, saturation and lightness, or red, green and blue, and watch the preview change as you drag.

Flexible typing

Paste a code in almost any common form, with or without the hash sign, and it is read straight away.

Tints and shades

Three lighter and three darker versions of your colour, ready to copy with one click.

Helpful error note

If the text cannot be read as a colour, a short message shows examples of formats that do work.

Why Use ToolXkit for Colour Picker?

Your files stay with you

Everything runs inside your browser. Nothing you open or type is uploaded to a server.

Design Tools for Different Users

Designers

Build palettes, test contrast and convert colours between HEX, RGB, HSL and CMYK.

Front-end developers

Generate CSS for gradients, shadows, animations and layouts and check it in a preview.

Design students

Learn how colour harmony and CSS properties work by changing them live.

Small business owners

Pick consistent brand colours for a shop sign, website and social posts.

Print designers

Convert colours for print and work out bleed, trim and pixel sizes.

Accessibility testers

Check contrast ratios and preview designs through different types of colour blindness.

Best Times to Pick Colours and Write CSS

These tools help when you are:

  • Starting a new brand or logo
  • Fixing text that is hard to read
  • Styling a button or card
  • Preparing a flyer for print
  • Matching a colour from a photo
  • Laying out a page with grid
  • Checking a chart for colour blindness
  • Converting a HEX code to RGB

Tips for Choosing Colours

  1. Change Lightness rather than Red, Green and Blue when you want a paler or deeper version of the same colour. The hue stays put.

  2. Treat the CMYK numbers as a starting point. Printed colour depends on paper and ink, so request a printed test sheet before a big run.

  3. Keep a brand colour’s hex code in one place, such as a note or style guide, so every document uses exactly the same shade.

  4. Pair the result with the contrast checker before using a colour for text, so it stays readable for everyone.

Frequently Asked Questions

Answers to common questions about this tool.

Can I pick a colour from my screen or an image?

Not on this page. The swatch opens your system colour chooser, and on some computers that chooser has its own eyedropper. To pull colours out of a photo, use the image colour extractor tool instead.

What is the difference between HSL and HSB?

Both use hue and saturation. HSL’s third value is lightness, where 50 percent is the pure colour and 100 percent is white. HSB’s third value is brightness, where 100 percent is the pure colour. Design apps such as Photoshop and Figma often show HSB.

Are the CMYK values accurate for printing?

They are a simple mathematical conversion from RGB, useful for a rough match. Real print colour depends on the press, paper and colour profile, so use your printer’s swatch book when an exact result matters.

What does nearest name mean?

It is the closest of the standard CSS colour names, such as royalblue or coral. If your colour matches one exactly, the name is shown on its own; otherwise it is marked as the closest.

Can I use the colour picker on my mobile?

Yes. The sliders work with touch, and tapping the swatch opens your phone’s own colour chooser. Copy buttons place values on your clipboard for use in other apps.

Can I copy the CSS straight into my project?

Yes. The generators give plain CSS that works in current browsers. Copy it into your stylesheet, then adjust class names or values to fit the rest of your design.

Is Colour Picker free for commercial work?

Yes. The colours, palettes and CSS you make are yours to use in client projects, products or anything else, with no credit required and no fee.

Why do my screen colours look different when printed?

Screens mix light in RGB, while printers mix ink in CMYK, and some bright screen colours cannot be printed. Convert to CMYK and ask your printer for a proof before a large print run.

What contrast ratio should my text have?

WCAG asks for at least 4.5 to 1 for normal text and 3 to 1 for large text. The Colour Contrast Checker shows whether your pair passes, so you can adjust before publishing.

Do I need to sign in to use Colour Picker?

No. There is no account to create. Open the page, adjust the settings and copy the result. Your choices are worked out on your own device and never leave it.

Further reading

More Colour & CSS Tools

Other free tools for the same kind of job.

Browse all tools