Color Picker & Palette.
Pick any colour to get HEX, RGB, HSL, and CMYK instantly — plus palettes, harmonies, and image extraction.
Color Analysis
Brightness
vs White
3.68:1
vs Black
5.71:1
Nearest Name
Royal Blue
Palette Generator
Shades (darker)
Tints (lighter)
Complementary
Analogous (±30°)
Triadic (±120°)
Image Color Extractor
Upload an image to extract its dominant colors.
🖼️
Drop an image here
or click to browse — PNG, JPG, WebP
Every colour format, plus palettes from your own images.
Pick a colour and read it back in HEX, RGB, HSL, and CMYK at the same time, each with its own copy button, so you can move between CSS, design tools, and print specs without converting by hand. The harmony options generate complementary, analogous, and triadic companions for the colour you chose, which is a quick way to build a palette that holds together.
Upload a photo or a screenshot and the tool extracts its five dominant colours as a palette. That is the fastest route from a brand photo or a mood board to a set of values you can drop into a theme file, and because the image is processed in the browser it never leaves your machine.
Understanding colour formats.
Each format is designed for a different purpose — screen rendering, design systems, or professional printing.
| Format | Example | Where it is used |
|---|---|---|
| HEX | #3B82F6 | Hexadecimal is the most common color format on the web. It encodes red, green, and blue channels as pairs of hex digits (00–FF), giving 16,777,216 possible colors. Used directly in CSS, SVG, and design tools like Figma. |
| RGB | rgb(59, 130, 246) | RGB (Red, Green, Blue) expresses color as three integer values from 0 to 255. It maps directly to how screens emit light. CSS supports both rgb() and rgba() with an optional alpha channel for transparency. |
| HSL | hsl(217, 91%, 60%) | HSL (Hue, Saturation, Lightness) is the most human-friendly format. Hue is a degree on the color wheel (0–360°), saturation controls intensity (0–100%), and lightness controls brightness (0% is black, 100% is white). Ideal for programmatic palette generation. |
| CMYK | cmyk(76%, 47%, 0%, 4%) | CMYK (Cyan, Magenta, Yellow, Key/Black) is the standard for print. Unlike additive RGB, CMYK is subtractive — mixing inks absorbs light. Professional print workflows use CMYK values to match physical ink output on paper. |
What You Get
Every representation of one colour at once, plus the harmonies and extraction steps that usually need a design tool.
Four Formats
HEX, RGB, HSL, and CMYK for the same colour, side by side.
Colour Harmonies
Complementary, analogous, and triadic schemes generated for you.
Palette Building
Assemble and compare a set of colours before committing.
Extract From Image
Pull dominant colours out of an uploaded image.
One-Click Copy
Copy any format straight into CSS, a design tool, or a token file.
Local Processing
Images are read in the browser and never uploaded.
Related tools.
More free browser-based utilities, connected by category and use case.
Image Resizer
Upload an image, set a target width and/or height, maintain aspect ratio optionally, and download the resized version. Supports JPG, PNG, and WebP output.
Image Compressor
Drag and drop JPG, PNG, or WebP images and compress them entirely in-browser using the Canvas API. Shows original vs compressed size and savings percentage. Nothing uploaded anywhere.
Meme Generator
Choose from popular meme templates or upload your own image. Add top and bottom text with font size and color controls. Download as PNG. Simple and fast.
FAQ
Color Picker & Palette FAQ.
What is a HEX color code and how do I read it?
A HEX color code is a 6-digit hexadecimal string prefixed with #. The first two digits represent red intensity (00–FF), the middle two represent green, and the last two represent blue. For example, #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue. Short-hand 3-digit codes like #F00 expand to #FF0000.
What is the difference between RGB and CMYK?
RGB is an additive color model used by screens: mixing all channels at full intensity produces white. CMYK is a subtractive model used in print: mixing all inks at full intensity produces near-black. RGB values cannot always be reproduced exactly in CMYK print because the color gamut of print is smaller than that of a display.
Why is HSL better for generating color palettes?
HSL lets you manipulate color properties independently. To create a lighter tint, increase the lightness value. To create a shade, decrease it. To find a complementary color, add 180° to the hue. To find analogous colors, add or subtract 30°. This predictable math makes HSL ideal for programmatic palette generation, which is exactly how this tool works.
What does the contrast ratio mean for accessibility?
The contrast ratio measures how distinguishable two colors are from each other. WCAG 2.1 requires a minimum 4.5:1 ratio for normal text and 3:1 for large text to meet AA compliance. A ratio of 1:1 means identical colors (no contrast), while 21:1 is the maximum (black on white). This tool shows the contrast of your selected color against both pure white and pure black.
How does the image color extractor work?
When you upload an image, the tool draws it to a hidden HTML5 canvas element, samples pixels across a grid, and then runs a simplified k-means clustering algorithm over the sampled pixels. The algorithm groups similar colors together and computes the centroid (average color) of each cluster, producing 5 representative dominant colors from your image.
What are complementary, analogous, and triadic colors?
These are classic color harmony schemes from color theory. Complementary colors sit opposite each other on the color wheel (180° apart) and create high-contrast, vivid combinations. Analogous colors are neighbors on the wheel (±30°) and create harmonious, low-contrast schemes. Triadic colors form an equilateral triangle on the wheel (±120°) and balance contrast with variety — popular in logo and brand design.