Colour Picker

Finding the exact colour code for a design, matching a brand colour from an image, or converting between colour formats are everyday tasks in web development and design. This free colour picker tool lets you select any colour visually, extract colours from images, and instantly get the hex, RGB, HSL, and CMYK values.

How to Use the Colour Picker

1. Use the colour wheel and brightness slider to select a colour visually.
2. Or upload an image and click anywhere on it to sample a colour from that image.
3. Enter a hex code, RGB value, or HSL value directly to jump to a specific colour.
4. Copy the colour value in your preferred format (hex, RGB, HSL, CMYK, or HSB).
5. Use the palette section to save colours and build a palette for your project.

The Formula

Colour on screens is defined by three models, each suited to different contexts.

RGB (Red, Green, Blue) is the native model for screens. Each channel ranges from 0 to 255. Hex colour codes are the same values expressed in base-16: #RRGGBB, where RR, GG, and BB are two-digit hexadecimal numbers. For example, pure red is RGB(255, 0, 0) = #FF0000. Hex to decimal: F=15, so FF = 15x16 + 15 = 255.

HSL (Hue, Saturation, Lightness) is more intuitive for designers. Hue is the colour angle on a 0-360 degree wheel. Saturation (0-100%) indicates colour intensity. Lightness (0-100%) indicates brightness, where 0% is black and 100% is white. Converting RGB to HSL: Hue = arctangent of colour channel differences; Saturation = range/max of channels adjusted for lightness; Lightness = (max + min of channels) / 2 x 255, expressed as a percentage.

CMYK (Cyan, Magenta, Yellow, Key/Black) is the model used in printing. It is approximately the inverse of RGB; colours are produced by subtracting light, not adding it.

Real-World Example

You want to use the exact blue from the Solved Tools logo in a design. Using the image colour picker, you click on the blue in the logo image. The tool returns: Hex = #1A73E8, RGB = rgb(26, 115, 232), HSL = hsl(217, 82%, 51%), CMYK = C=89%, M=50%, Y=0%, K=9%.

You can now use #1A73E8 in your CSS, rgb(26, 115, 232) in a design tool, or provide the CMYK values to a printer for a business card run that matches the digital colour as closely as possible.

Colour Theory for Designers

Understanding colour relationships helps you build harmonious palettes. Complementary colours sit opposite each other on the colour wheel (e.g., blue and orange, 180 degrees apart); they create high contrast and vibrant combinations. Analogous colours sit adjacent on the wheel (e.g., blue, blue-green, and green); they create calm, harmonious combinations. Triadic colours are evenly spaced at 120 degrees; they create vibrant, balanced palettes. Split-complementary colours use a base colour and the two colours adjacent to its complement, which is slightly less jarring than direct complementary. Using HSL values makes it easy to find harmonious colours by simply adjusting the hue while keeping saturation and lightness consistent.

Frequently Asked Questions

What is the difference between hex and RGB colour codes? They are the same values in different notations. Hex uses base-16 numbers in the format #RRGGBB. RGB uses decimal numbers in the format rgb(R, G, B). #FF0000 and rgb(255, 0, 0) both mean pure red. CSS accepts both; hex is more compact to write, while RGB is more human-readable when you know what the channel values mean.

Why do my screen colours look different when printed? Screens use RGB (additive colour, mixing light), while printers use CMYK (subtractive colour, mixing inks). The gamut (range of colours) of CMYK printing is smaller than the RGB gamut, meaning some vivid screen colours cannot be accurately reproduced in print. Vibrant blues and cyans are particularly affected. For print work, always design in CMYK or use a colour profile such as sRGB with print-appropriate constraints.

What is colour contrast and why does it matter? Colour contrast is the difference in luminance or colour between foreground and background. The Web Content Accessibility Guidelines (WCAG) require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text against its background, to ensure readability for people with low vision. The contrast ratio calculator on solved.tools checks whether your colour combinations meet accessibility standards.

What does the alpha channel do in RGBA colours? RGBA adds a fourth channel (A for alpha) that controls opacity, from 0.0 (fully transparent) to 1.0 (fully opaque). For example, rgba(26, 115, 232, 0.5) is the same blue as #1A73E8 but at 50% transparency. Alpha channels allow layering of semi-transparent elements in CSS and graphics, and are supported by PNG and WebP image formats but not by JPEG.

Also try these free tools:

• Colour Converter
• Colour Palette Generator
• Contrast Ratio Checker

Converting one colour by hand

A hex code is not a colour space of its own; it is the same three channel values written in base 16. Reading one without a converter takes two multiplications per channel.

Take #1A73E8, the blue from the worked example above. Split it into pairs and evaluate each pair as base-16 digits, where A is 10 and F is 15:

• 1A is 1 times 16 plus 10, which is 26
• 73 is 7 times 16 plus 3, which is 115
• E8 is 14 times 16 plus 8, which is 232

That gives rgb(26, 115, 232), and the conversion is exact in both directions. Nothing is rounded on this step, and a hex code always reproduces the same three integers.

Carrying those three numbers into HSL takes a little more work. The maximum channel is 232 and the minimum is 26, so the lightness is their average divided by 255, which is 129 divided by 255, or 0.5059 and therefore 51 percent. The saturation follows from the range between them, 206 divided by 255, or 0.8078, adjusted for a lightness above one half and coming out at 0.8175, or 82 percent. The hue depends on which channel is highest, and here that is blue, so the formula runs from the blue end of the wheel and returns 214.08 degrees. Rounded for display, the same colour is hsl(214, 82%, 51%).

That hue figure is worth a second look, because it moves depending on where it is read. The channel values are exact; the hue is a re-expression of them, and any hue shown alongside a hex code is a rounded version of a number that the format cannot hold exactly. A difference of a few degrees at that scale is invisible on a screen, and it becomes visible only when a colour is specified by number in a brand document, where two tools that disagree by three degrees will both insist they are right.

The four models side by side

The models a picker reports are four views of the same colour, and each one is good for a different job.

RGB gives 256 values per channel and therefore 16,777,216 combinations. Hex expresses those same combinations in two digits per channel, which is why the two always agree. HSL is the odd one out in the table, because it is not a different set of colours at all: it is a different arrangement of the same ones, chosen because hue is easier to reason about than the ratio between three channels. CMYK is the only model here that describes a different medium, and it is the only one whose numbers depend on something outside the file.

Reading a hex code without a converter

A handful of patterns make most hex codes readable at sight.

Three-digit shorthand doubles each digit. The code #F0A expands to #FF00AA, because the F becomes FF, the 0 becomes 00 and the A becomes AA, giving red at 255, green at 0 and blue at 170.

Eight-digit codes add an alpha pair at the end, and the pair works on the same scale: 00 is fully transparent and FF is fully opaque. So #1A73E880 is the blue from the example at half transparency, because 0x80 is 128 and 128 divided by 255 is 0.502. That is the same colour as rgba(26, 115, 232, 0.5), written in the other form CSS accepts.

Channel values are whole numbers, so there are only 256 steps between no red and full red. Two adjacent blues differ by one channel step, which is 1 divided by 255 of the range and the smallest change the format can express. That ceiling is worth remembering when a brand colour is chosen from a screen and then converted: something as precise as a hue is being stored on a grid of 256, and any specification finer than one step cannot survive the trip.

Where the conversions lose precision

• Hex and RGB are the same numbers in two bases, so that conversion is exact and reversible. Nothing in the first section of this page depends on a convention or a profile.
• HSL is a re-expression of the same RGB values, not a different colour space, so it loses nothing that was in the original. What it does lose is precision at the edges: a hue of 214.08 cannot be written as 214.08 degrees in a usable form, so the value stored in a design file is rounded and the colour that comes back out may differ by one step in one channel.
• Rounding decisions matter at the boundary. A lightness that puts a channel on a half step, as a lightness of exactly 25 percent does on two channels at once, has to resolve to one side or the other. The teal in the example is stored with 128 on both channels; the same colour written with 127 is one step darker and indistinguishable by eye on a screen.
• CMYK is not a single conversion. There is no formula from RGB to CMYK that matches every printer, because the printed result depends on the inks, the paper and the profile used at the press. The straightforward formula that online converters use is the one that produced the values in the example above, and it is a reasonable starting point for a proof rather than a substitute for one.
• The same three numbers can describe different colours in different spaces. A hex code in CSS is an sRGB value, so those are the three channel values the picker is reporting.

A note on the spaces and the standards

Two published documents underpin the numbers on this page. sRGB, the standard screen colour space, is defined in IEC 61966-2-1, and it is the space in which the channel values and hex codes on this page are expressed; the CSS colour notation that permits eight-digit hex values is specified in the CSS Color Module. The contrast figures come from the Web Content Accessibility Guidelines, which give the relative luminance formula and the thresholds: 4.5 to 1 for normal text and 3 to 1 for large text and interface components. Run on the blue from the example, that formula gives 4.505 to 1 against white, which clears the first threshold by five thousandths and would fail it if either colour moved by a single channel step. A brand colour sitting that close to a limit is worth recording with its ratio, because the next revision of the palette may not have the margin to spend.