Color Picker and Converter
Choose a color visually or enter its hexadecimal value, then copy the equivalent HEX, RGB, and HSL strings for CSS, design notes, documentation, or a component theme. The preview and conversions update immediately, and everything runs in the browser. HSL is included because it makes lightness and saturation adjustments easier to reason about than editing three independent RGB channels.
Use this without the search next time. Prathom Workbench puts Prathom's tools in your toolbar.
Add to Chrome — freeWhat it does
- Native visual color input
- HEX, RGB, and HSL output
- Copy all representations at once
- Live preview with a reset color
- Local conversion with no account or upload
How to use Color Picker
- 1
Pick a color
Use the browser color control to choose a swatch, or type a six-digit HEX value beginning with a hash.
- 2
Compare the formats
Read the same color as HEX, RGB, and HSL. The preview makes it easy to confirm that a manually entered value was accepted.
- 3
Copy the values
Copy all three lines or select the representation your stylesheet, design tool, or documentation format expects.
- 4
Check contrast separately
Use the chosen color in its real background and run an accessibility contrast check when text readability matters.
How it works
The six hexadecimal digits are split into red, green, and blue channel pairs and converted from base sixteen into values from 0 to 255. Those values are normalized to zero through one for the HSL calculation. The largest and smallest normalized channels determine lightness; their difference determines saturation; and the channel that reaches the maximum determines the hue sector. The result is rounded for display, while the preview uses the browser's color input.
The calculation assumes the ordinary sRGB model used by the common CSS color syntaxes. It does not make claims about wide-gamut displays, print profiles, alpha channels, or perceptual uniformity. A string that looks correct can still render differently when a design tool applies a different color-management policy.
Use color values responsibly
Color conversion is the easy part of a design system. The harder parts are naming tokens, choosing foreground and background pairs, handling hover and focus states, and checking contrast for people with low vision or color-vision differences. Treat the copied values as source data for those decisions, not as a finished palette.
For CSS, keep the original HEX or token name near the generated RGB or HSL value so another developer can trace where it came from. For print work, confirm the color in the document's actual profile instead of assuming a screen-oriented sRGB value will reproduce identically on paper.
HSL does not round-trip cleanly
This is the part that surprises people, and it is worth knowing before you store an HSL value as the canonical one.
HEX and RGB describe the same thing two ways: 255 whole steps per channel, and every HEX pair maps to exactly one RGB triple and back. Nothing is lost in either direction.
HSL is different. Hue is reported in whole degrees, saturation and lightness in whole percent, so the displayed value is a rounded description of a point that usually sits between the numbers on offer. Convert #3A7BD5 to HSL and back and you can land a digit or two away from where you started. The shift is small enough to be invisible on a swatch and large enough to fail an exact-match comparison in a test or a design-token diff.
The practical rule: pick one representation as the source of truth and generate the others from it. If your tokens live in HEX, keep them in HEX and treat the HSL string as something you read rather than something you store. If a designer hands you HSL, convert once and commit the result rather than converting on every build, so the value cannot drift between two tools that round differently.
Why the same value looks different on two screens
A HEX triple is not a color. It is an instruction to a display, and what the display does with it depends on its profile, its brightness, and its color management.
sRGB is the assumption almost everything on the web makes, and most screens approximate it closely enough that the difference does not matter. Wide-gamut displays are where it stops being true: the same #E5484D can read noticeably more saturated on a P3 laptop panel than on an older sRGB monitor, because the panel is interpreting the number against a larger space unless something tells it not to.
You cannot fix that from a picker, and the tool does not pretend to. What you can do is stop treating a screenshot as evidence. If a color matters — a brand red, a status indicator, anything where "close" is not good enough — check the numbers rather than the appearance, and check them on the profile the work will actually be viewed in.
Examples
Brand teal for CSS
The RGB form is useful for APIs and older style declarations, while HSL makes the moderate saturation and dark lightness easier to adjust by eye.
White text background
A pale warm background can look white in a picker but still carry a visible hue. Check it against the actual text color rather than guessing from the HEX digits.
Frequently asked questions
What is the difference between HEX, RGB, and HSL?
They describe the same sRGB color in different coordinate systems. HEX writes red, green, and blue as hexadecimal pairs. RGB writes the three channel values from 0 to 255. HSL describes hue, saturation, and lightness, which can be easier for human adjustments but does not make a color automatically accessible.
Is HSL better than RGB for CSS?
Neither is universally better. HSL is convenient when a design needs a lighter or darker variation because lightness is an explicit component. RGB and HEX are compact and widely used in APIs, tokens, and design files. Modern CSS also supports newer color spaces, so use the representation your target supports and your team can review.
Does this check WCAG contrast?
No. The picker converts one color and shows its representations; contrast requires a foreground and a background plus a luminance calculation. A color that looks readable in isolation can fail against a real surface. Use a dedicated contrast check before shipping text, controls, or focus states.
Is the selected color sent to a server?
No. The native color input supplies a local hexadecimal value, and the RGB and HSL strings are calculated in JavaScript in the current tab. Nothing is uploaded or stored by the tool. You can use it while disconnected after the page itself has loaded.