OneTaskBy Tim King · Updated
Colour Picker
Pick a Colour and Get Hex, RGB, HSL, HWB, OKLCH and CMYK
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Colour Picker works
This colour picker shows any colour in every common format at once. Pick a colour with the native picker or type one in — a hex code, rgb(), hsl() or a CSS
name like rebeccapurple — and every format you might need appears at once: hex, RGB, HSL,
HWB, OKLCH, Oklab and CMYK, with the nearest named colour, relative luminance and the contrast
ratio against white and black. Drag the opacity slider to get the alpha forms.
Colour picker: the formats side by side
A colour picker is the tool a designer or developer opens more often than any other, usually to answer one small question: what is this colour in the format I need right now? The native browser picker gives you hex and nothing else, so this page wraps it in a full set of conversions and a few numbers that matter when the colour is going into a real interface.
Formats. The hex code is what most tools exchange. rgb() and hsl() are shown in the
modern space-separated syntax that every current browser accepts, with the legacy
comma-separated rgba() form alongside for older code. hwb() describes a colour as a hue
plus how much white and black is mixed in, which is how many people think about tints and
shades. oklch() and oklab() are the perceptually uniform spaces from CSS Color 4: change
the lightness number and the colour looks exactly that much lighter, which is not true of
HSL. CMYK is an approximation for print — a real conversion depends on the paper and press
profile — but it is close enough to brief a printer.
Nearest named colour. CSS has 148 named colours. If your pick is one of them the name is shown exactly; otherwise the nearest one by RGB distance is shown with an approximately sign, which is useful for describing a colour in a message or a commit without pasting a code.
Luminance and contrast. Relative luminance is the WCAG measure of how bright a colour is to the eye, from 0 for black to 1 for white. The two contrast ratios tell you whether black or white text should go on top of this colour and whether either reaches the 4.5:1 that body text needs. The swatch itself switches its label between black and white using the same number.
Opacity. With the slider below 100 the hex gains a fourth pair (#2f7dd180) and the
functional forms gain a / 50% alpha. The swatch shows the colour at that opacity over the
page background, which is the honest way to preview transparency.
The code box. The generated CSS declares the colour as a custom property with every other format in comments, so you can paste it into a stylesheet and swap the value to whichever format your project uses.
FAQ
Why does HSL lightness not match OKLCH lightness?
HSL lightness is a simple average of the highest and lowest RGB channel and ignores how the eye sees colour, so a saturated yellow and a saturated blue both report 50% while one is obviously much brighter. OKLCH lightness is perceptual: equal numbers look equally light. Use OKLCH when you are building scales or comparing colours.
Can I type a colour with alpha?
Type an eight-digit hex, rgba() or hsla(); the colour part is read and the opacity slider
controls the alpha in the output, so set the slider to match. Named colours and short hex codes
are accepted too, and grey spellings are treated the same as gray.
How accurate is the CMYK value?
It is the standard naive conversion: subtract the RGB channels from white and pull out the common black component. Print colour depends on the ink, paper and colour profile, so treat the numbers as a starting point for the printer rather than a specification.
What does the nearest name help with?
Describing a colour in words. "About steelblue" communicates more in a chat message than
#4a7fb5, and it is a quick way to sanity-check that a colour is the family you expect. When
the match is exact you can also use the name directly in CSS.
See also: all Colour tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, UI Components, Forms & Inputs.
Related tools
CSS Colour Converter
Convert CSS colours between hex, rgb, hsl, hwb, lab, lch and oklch.
Contrast Checker
Check colour contrast against WCAG and APCA.
Colour Palette Generator
Generate a full UI palette with light and dark modes from one colour.
Analogous Colour Generator
Generate neighbouring hues from one colour with tints and CSS.
Complementary Colour Generator
Find a colour's complement with tints, shades and copyable CSS.