Color · Tools
Color picker.
Pick a color visually and read it back as HEX, RGB, HSL, and CMYK. See complementary colors and remember recent picks.
Inputs
Color readout
Complementary
Recent colors
How the color picker works
A screen colour is stored as three numbers, one each for red, green and blue, from 0 to 255. A HEX code is those three numbers written in base 16 and joined: #A81327 is red A8, green 13 and blue 27 in hexadecimal. This page keeps one colour and shows it four ways at once, HEX, RGB, HSL and CMYK, so you can paste whichever format the tool you are working in asks for. The picker swatch opens your browser's own colour dialog, the HEX field accepts a typed value, and every change updates all four readouts, the complementary swatches and the recent-colours row.
Worked example: #A81327 in every format
The starting colour is a deep red. Here is each conversion by hand, using the same formulas the page uses.
- HEX to RGB. Split into pairs and read each as base 16: A8 = 10 × 16 + 8 = 168, 13 = 1 × 16 + 3 = 19, 27 = 2 × 16 + 7 = 39. So rgb(168, 19, 39).
- RGB to HSL. Divide by 255: 0.6588, 0.0745, 0.1529. The largest is 0.6588 and the smallest 0.0745, so lightness is their average, 0.3667, shown as 37%. The difference is 0.5843. Saturation is 0.5843 ÷ (0.6588 + 0.0745) = 0.797, shown as 80%. Red is the largest channel, so hue is 60° × ((0.0745 − 0.1529) ÷ 0.5843 + 6) = 351.9°, shown as 352. So hsl(352, 80%, 37%).
- RGB to CMYK. Black (K) is 1 − 0.6588 = 0.341, or 34%. Cyan is (1 − 0.6588 − 0.341) ÷ (1 − 0.341) = 0%. Magenta is (1 − 0.0745 − 0.341) ÷ 0.6588 = 0.887, or 89%. Yellow is (1 − 0.1529 − 0.341) ÷ 0.6588 = 0.768, or 77%. So cmyk(0%, 89%, 77%, 34%).
- Complementary. Add 180° to the hue (352 + 180 = 532, minus 360 = 172) and keep saturation and lightness: hsl(172, 80%, 37%) is #13AA96, a teal. The two split-complementary swatches use 150° and 210° offsets, giving hues 142° (#13AA4A, a green) and 202° (#1372AA, a blue).
One thing the example shows: the percentages are rounded to whole numbers. Turn hsl(352, 80%, 37%) back into HEX and you get #AA1327, not #A81327. For exact work keep the HEX or RGB value as the source and treat HSL as a way of reasoning about the colour.
Reading HSL
HSL is a different notation for the same colours, built for people rather than for displays. Hue is a position on the colour wheel in degrees: 0 is red, 120 is green, 240 is blue. Saturation is how far the colour is from grey, from 0% (grey) to 100% (fully vivid). Lightness runs from 0% (black) through 50% (the purest version of the hue) to 100% (white). That makes HSL convenient for building variations: keep the hue and saturation, and change only lightness to get a darker or lighter shade. #336699 is hsl(210, 50%, 40%); raising lightness to 60% gives a lighter blue of the same family without shifting its hue.
Two checks are useful. Any grey has 0% saturation, for example #808080 is hsl(0, 0%, 50%), and the hue number is meaningless there. Pure white and pure black are 100% and 0% lightness whatever hue and saturation are set to.
Notes on each format
- HEX. The field takes six digits, with or without the leading #, in any case. CSS also allows three-digit shorthand (#RGB doubles each digit, so #369 is #336699) and eight-digit codes with an alpha pair at the end (#RRGGBBAA). This page works in six-digit opaque colours, so expand a three-digit code yourself, and read transparency off a separate alpha value.
- RGB. Each channel is 0 to 255. The values are in the sRGB colour space, which is what browsers assume by default.
- CMYK. The percentages come from the simple mathematical conversion from RGB. That is a reasonable starting point, but a print shop converts with an ICC colour profile for its press and paper, and vivid screen colours often print duller. Use these numbers for orientation, not as a press-ready specification.
- Complementary. The opposite hue, plus the two colours 30° either side of it. They are a starting point for a palette and not a rule of good design.
Common mistakes
- Pasting a CMYK result into a website. Browsers read HEX, RGB and HSL, so use those for CSS.
- Judging a colour on one screen. Displays differ in brightness and calibration, so the same HEX can look slightly different on two devices.
- Reading the hue number when saturation is 0%. A grey has no meaningful hue.
- Expecting the recent-colours row to persist. It lives in the page only, and a reload clears it.
Who this is for
Designers and developers who need to check a value in four notations quickly, students learning how HEX, RGB and HSL relate, and anyone matching a brand colour. It does not sample colours from an image or your screen, produce colour names, check accessibility contrast (use the contrast checker for that) or build full palettes (use the palette generator). For single conversions there are also dedicated pages for HEX to RGB, HEX to HSL, HEX to CMYK and RGB to HEX.
Sources
- W3C, CSS Color Module Level 4: hexadecimal notation with 3, 4, 6 or 8 digits, and the HSL-to-RGB algorithm (retrieved 2026-10).
- MDN Web Docs, <hex-color> and hsl() (retrieved 2026-10).
- MDN Web Docs, <input type="color">, the control behind the swatch (retrieved 2026-10).
- Wikipedia, HSL and HSV, for the definitions of hue, saturation and lightness, and CMYK color model for the relationship between screen and print colour (retrieved 2026-10).
Color picker FAQ
How do I convert a HEX code to RGB?
Split the six digits into three pairs and convert each pair from base 16 to a number from 0 to 255. For #A81327 that gives A8 = 168, 13 = 19 and 27 = 39, so rgb(168, 19, 39). Type or pick the colour above and the RGB line shows it directly.
What is the difference between HEX, RGB and HSL?
They describe the same colours in different ways. HEX and RGB both give the amounts of red, green and blue, HEX in base 16 and RGB in decimal. HSL describes a colour by hue angle, saturation and lightness, which is easier to reason about when you want a darker or paler version of the same colour.
How do I find the HEX code of a colour I want?
Click the swatch to open your browser's colour dialog and choose the colour, or type a value you already have. This page cannot sample a colour from an image or another window, although some browsers include an eyedropper in their picker, so availability depends on the browser. The HEX code appears in the readout as soon as you choose.
Does this accept three-digit HEX codes or codes with transparency?
The HEX field works with six-digit codes, with or without the leading #. A three-digit code such as #369 is shorthand for #336699, so expand it by doubling each digit before typing it in. Eight-digit codes carry an alpha pair for transparency, and this page works only with opaque colours.
Why do the HSL percentages not round-trip exactly?
The readout rounds hue to a whole degree and saturation and lightness to whole percents. Converting hsl(352, 80%, 37%) back gives #AA1327 rather than the original #A81327. The differences are small, but if you need an exact value, keep the HEX or RGB code as the master copy.
Will the CMYK values match what a printer produces?
Not exactly. The CMYK line is a direct mathematical conversion from RGB. A real press converts through a colour profile for its inks and paper, and bright, saturated screen colours often print duller than they look on screen. Ask your printer for their profile or proof before committing to a brand colour.
What are the complementary and split-complementary swatches?
The complementary colour sits 180° opposite on the hue wheel, with the same saturation and lightness. The split-complementary pair sits 150° and 210° from the original, which is 30° either side of the complement. For #A81327 those swatches are #13AA96, #13AA4A and #1372AA. They are starting points for a palette, not guarantees that the colours will look good together.
Is the colour I pick sent anywhere?
The conversions are calculated by code running in your browser, and the recent-colours list exists only in the open page. Nothing you pick is stored or submitted by the tool, and reloading the page clears the list.