Home›Generators›Color Picker & Palettes

Color Picker

Pick any colour and see its equivalent values in HEX, RGB, HSL, HSB and CMYK formats simultaneously. Generate complementary, analogous, triadic and split-complementary colour palettes — and export codes for direct use in CSS or design tools.

Pick a Color

Slate Blue
#6366f1
Click to copy
rgb(99, 102, 241)
Click to copy
hsl(239, 84%, 67%)
Click to copy
cmyk(59%, 58%, 0%, 5%)
Click to copy

Color Palette

Color Harmonies

Extract Colors from Image

Upload an image to extract its dominant colors

Drop image here

JPG, PNG, WEBP supported

Gradient Generator

Click to copy CSS code

Features

  • HEX, RGB, HSL, CMYK values
  • Color harmony generator
  • Gradient CSS generator
  • Color palette browser
  • Save favorite colors
  • One-click copy

Related Tools

Password Generator QR Generator Compress Image

Free Online Color Picker Tool

The complete colour toolkit for designers and developers — pick any colour and instantly get HEX, RGB, HSL and CMYK values. Explore colour harmonies, generate CSS gradients, browse preset palettes and extract dominant colours from uploaded images, all in one place.

Features

All Colour Formats

Copy HEX, RGB, HSL, CMYK, CSS escape and more with a single click.

Multiple Inputs

Enter colour values in any format — HEX, RGB or HSL — and all others update automatically.

Colour Harmonies

Generate complementary, analogous, triadic, split and tetradic colour schemes.

Gradient Generator

Create linear and radial CSS gradients and copy the ready-to-use CSS code.

Extract from Image

Upload any image and automatically extract its dominant colour palette.

Save Colours

Save your favourite colours during a session for quick reference and comparison.

Who Uses This Tool?

UI/UX DesignersBuild consistent colour systems by exploring harmonies from a brand colour.
Front-End DevelopersCopy CSS-ready colour values directly into your stylesheets.
Graphic DesignersExtract brand colours from logos and photography to maintain consistency.
Brand ManagersVerify and document official brand colour codes in multiple formats.

Common Questions

What is the difference between HEX and RGB?
HEX is a 6-digit hexadecimal representation (#RRGGBB) used primarily in web design. RGB expresses the same colour as three decimal values (0–255) for Red, Green and Blue channels.
What is HSL and when should I use it?
HSL (Hue, Saturation, Lightness) is more intuitive than RGB for creating colour variations. To make a colour lighter or darker, simply adjust the L value.
What is CMYK used for?
CMYK (Cyan, Magenta, Yellow, Key/Black) is the colour model used in physical printing. Always convert to CMYK when sending files to a commercial printer.
How accurate is the colour extraction from images?
The extractor samples the image at reduced resolution and groups similar colours. It identifies the dominant colours well but is approximate — use it for inspiration rather than exact brand matching.

Pro Tip

When choosing colours for UI, check contrast ratios for accessibility. Text on a background should have a contrast ratio of at least 4.5:1 (WCAG AA) for normal text and 3:1 for large text. Use our colour values with an online contrast checker.

Did You Know?

10 million
Colours Human Eye Can See
The human eye can distinguish approximately 10 million different colours. Yet most displays can only show about 16.7 million (24-bit colour). Interestingly, women statistically perceive more colour variations than men due to an additional cone type in ~12% of women (tetrachromacy).
1861
First Colour Photograph
The first permanent colour photograph was taken by physicist James Clerk Maxwell in 1861 using three separate exposures through red, green and blue filters — exactly the RGB colour model used in every digital screen today.
#FF0000
Why Red is #FF0000
In hex colour codes, #RRGGBB represents Red, Green, Blue channels (each 0–255). FF in hex = 255 in decimal = maximum intensity. So pure red is maximum red (FF), zero green (00), zero blue (00) = #FF0000. Every web designer uses this system daily.

Colour Psychology Quick Reference

ColourEmotionIndustry UseNotable Brands
🔴 RedEnergy, urgency, passionFood, sales, warningsCoca-Cola, YouTube, Netflix
🟠 OrangeWarmth, creativity, funFood, tech, sportAmazon, Fanta, Harley-Davidson
🟡 YellowOptimism, warmth, cautionFood, retail, warningsMcDonald's, IKEA, Snapchat
🟢 GreenNature, health, growthFinance, health, ecoWhatsApp, Whole Foods, Spotify
🔵 BlueTrust, calm, professionalismFinance, tech, healthcareFacebook, PayPal, Samsung
🟣 PurpleLuxury, creativity, wisdomPremium goods, beautyCadbury, Hallmark, FedEx
⚫ BlackSophistication, powerLuxury, fashion, techApple, Chanel, Nike

You May Also Ask

What is the difference between RGB and CMYK colour spaces?
RGB (Red, Green, Blue) is an additive model used for screens — combining all colours creates white. CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive model used in printing — combining all colours creates black (or near-black). Always design in RGB for screens; convert to CMYK for print production. Colours look different between the two — some RGB colours cannot be reproduced in CMYK.
What is colour accessibility and WCAG?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for readable text. Normal text requires 4.5:1 contrast (AA standard) or 7:1 (AAA). Large text (18pt+) requires 3:1. Approximately 8% of men and 0.5% of women have colour vision deficiency — designing for accessibility benefits everyone. Test your colours with a WCAG contrast checker.
What are the 60-30-10 and complementary colour rules?
The 60-30-10 interior design rule works for UI: 60% dominant colour (backgrounds), 30% secondary colour (cards, sidebars), 10% accent colour (buttons, CTAs). Complementary colours (opposite on the colour wheel) create maximum contrast and visual tension. Analogous colours (adjacent) create harmony and calm. Our harmony tool shows these relationships automatically.

Common Mistakes

Using too many colours in a design
More than 3–4 colours creates visual chaos and dilutes brand identity. Most successful brands use 1 primary, 1 secondary and 1 accent colour.
Stick to the 60-30-10 rule and a maximum of 3 brand colours.
Designing only for sighted users
8% of men have red-green colour blindness — they cannot distinguish traffic-light colours. Using colour alone to convey meaning (e.g., red = error) excludes these users.
Always pair colour with an icon, label or pattern as a secondary indicator.
Not checking contrast for accessibility
Light grey text on white background looks elegant but is unreadable for many users, especially in bright light or on older screens.
Check every text/background combination with WCAG contrast ratio — minimum 4.5:1.