A color tool for designers, developers and marketers
Whether you are building a website, designing a social media post or matching your brand colors, you need exact color codes. This color picker gives you every common format in one place and keeps them in sync: change one and all the others update.
Features:
- Visual picker plus editable HEX, RGB and HSL fields
- CMYK values for print
- WCAG contrast check against white and black text
- Shades and tints: nine lighter and darker versions of your color
- Color harmonies: complementary, analogous and triadic colors
- Pick from an image: upload a photo or logo and click any pixel to read its color
- Copy any code with one click
How to use the color picker
- Click the big color bar to open your system picker, or type a code into the HEX, RGB or HSL field.
- Copy the format you need.
- Check the contrast scores before using the color for text.
- Click any shade or harmony swatch to make it the new main color.
- To match a brand color, upload the logo and click on it.
Color formats explained
| Format | Example | Used in |
|---|---|---|
| HEX | #1E6FF0 | Websites, CSS, design tools |
| RGB | rgb(30, 111, 240) | Screens, CSS, image editors |
| HSL | hsl(217, 87%, 53%) | CSS, easy to adjust lightness |
| CMYK | cmyk(88%, 54%, 0%, 6%) | Printing |
The CMYK values here are a simple mathematical conversion. Real printing uses color profiles, so ask your printer for exact values for important brand work.
Why color contrast matters
Text needs enough contrast against its background so everyone can read it, including people with low vision and anyone using a phone in sunlight. The Web Content Accessibility Guidelines (WCAG) set minimum ratios:
- 4.5:1 for normal text (level AA)
- 3:1 for large text, 24px or 18.5px bold (level AA)
- 7:1 for the highest level, AAA
The tool calculates the exact ratio using the official formula from WCAG 2.1. Good contrast is also good for business, because readable pages keep visitors longer.
Build a simple brand palette
Pick one main brand color, add one complementary color for buttons and highlights, and use shades of your main color for backgrounds and borders. Keep text dark gray or near black for readability.
Use your colors in a QR code with the QR Code Generator or create a matching site icon with the Favicon Generator. See all text and developer tools.
Color formats side by side
| Format | Example (Soft Tech Mark blue) | Where it is used |
|---|---|---|
| HEX | #1E6FF0 | CSS, website builders, design tools |
| RGB | rgb(30, 111, 240) | CSS, screens, image editors |
| HSL | hsl(217, 88%, 53%) | CSS; easy to make lighter or darker shades |
| CMYK | 88, 54, 0, 6 | Print design (approximate conversion) |
HSL is the most intuitive for designers: hue is the colour on the wheel (0-360), saturation is how vivid it is, and lightness is how light or dark it is. To make a lighter tint, raise the lightness; to make a darker shade, lower it.
Contrast and accessibility
Text must stand out from its background so everyone can read it, including people with low vision and anyone reading a phone in sunlight. The WCAG 2.2 guidelines set minimum contrast ratios:
- 4.5:1 for normal body text (level AA).
- 3:1 for large text (about 24 px regular or 19 px bold) and for icons and interface parts.
- 7:1 for the stricter AAA level.
The color picker shows the contrast of your colour against white and black text, so you can see at once which works better. Light grey text on a white background is one of the most common accessibility mistakes on websites.
Building a brand palette
A simple, effective palette usually has:
- One primary colour for your logo, buttons and links.
- One accent colour for highlights and calls to action.
- A dark neutral for text (very dark grey or navy reads softer than pure black).
- A light neutral for backgrounds.
- Tints and shades of the primary for hover states, borders and backgrounds.
Use the generated shades and tints to keep everything in the same family. Write down the HEX codes and use them everywhere: website, social posts, documents and print.
Colour for print
Screens use RGB light, while printers use CMYK ink. Bright screen colours, especially vivid blues and greens, can look duller in print. The CMYK values shown here are a mathematical approximation; for exact print results, ask your printer for a proof or use a Pantone guide.
Picking colours from images
Upload a photo, logo or screenshot and click any pixel to get its exact colour. This is handy for matching a client's existing branding when you only have their logo. The image is processed in your browser and never uploaded. Use your new colours in a Favicon Generator icon or a QR Code Generator code, keeping the QR code dark enough to scan.
Colour meaning in marketing
Colours carry associations, although they differ between cultures. Blue is widely linked with trust and technology, which is why many banks and software companies use it. Green often suggests nature, health or money. Red creates urgency and is common in sales banners. In South Asia, red is also associated with weddings and celebration. Choose colours that fit your brand and audience, then test them; a clear, high-contrast button usually matters more than the exact colour.
Frequently Asked Questions
How do I find the HEX code of a color in an image?
Upload the image in the "Pick a color from an image" section and click on the color.
What is the difference between HEX and RGB?
They describe the same color. HEX writes the red, green and blue values in base 16, while RGB uses numbers from 0 to 255.
Is my image uploaded?
No. The image is read in your browser only.
What contrast ratio do I need?
At least 4.5:1 for normal text to meet WCAG AA.
What is the difference between a tint and a shade?
A tint is a colour mixed with white (lighter). A shade is a colour mixed with black (darker).
Can HEX codes have 3 digits?
Yes. #FFF is short for #FFFFFF. Each digit is doubled.
Why does my colour look different on another screen?
Screens differ in brightness, calibration and colour range, so the same HEX code can look slightly different on different devices.
Last updated: October 25, 2026