Colour Picker & Converter by NexLink Core
Pick a colour with the sliders, paste one in any common format, or grab one straight off your screen. Every format updates live, so this works equally well as a HEX to RGB converter, an RGB to HEX converter, or a way to get an HSL or CMYK value out of a colour you already have.
Pick or Convert a Colour
Supported Input Formats
The Paste any colour field is deliberately forgiving. All of these describe the same blue:
| Input | Notes |
|---|---|
#0A51C2 | Standard 6-digit hex |
0a51c2 | The # is optional, and case doesn’t matter |
#0A51C2FF | 8-digit hex, with the last pair as alpha |
#07C | 3-digit shorthand, expanded to #0077CC |
rgb(10, 81, 194) | Commas optional — rgb(10 81 194) works too |
rgba(10, 81, 194, 0.5) | Alpha as a decimal |
rgb(10 81 194 / 50%) | Modern CSS slash syntax |
hsl(216, 90%, 40%) | Degrees and percentages |
hsla(216 90% 40% / 0.5) | With alpha |
rebeccapurple | Any of the 148 CSS colour keywords |
If a value can’t be read, the field flags it rather than silently snapping to something else.
Understanding the Formats
HEX
Six hexadecimal digits — two each for red, green and blue. The most common way to write a colour in CSS and the format most design tools expect. An optional seventh and eighth digit carry alpha, so #0A51C280 is the same blue at 50% opacity.
RGB and RGBA
The same three channels as decimal numbers from 0–255. RGBA adds an alpha channel from 0 (fully transparent) to 1 (fully opaque). Use this when you need transparency and want the value to stay readable.
HSL and HSLA
Hue (0–360°), Saturation (0–100%) and Lightness (0–100%). Far easier to reason about than hex when you want a variation of a colour: keep the hue, change the lightness, and you have a consistent set of shades. This is exactly how the Shades & Tints strip below the picker is built.
HSV / HSB
Hue, Saturation and Value (also called Brightness). Close to HSL but it behaves differently at the top of the range — full value gives you the pure hue rather than white. This is what Photoshop, GIMP and most image editors show in their colour dialogs.
CMYK
Cyan, Magenta, Yellow and Key (black), as used in print. The conversion here is the standard arithmetic one with no colour profile applied, so treat it as a starting point rather than a print-accurate value — a real print workflow needs an ICC profile for the specific press and paper.
CMYK has a smaller gamut than your screen. Bright, saturated colours — vivid greens and oranges especially — will look duller in print than they do here. Always proof with your printer’s profile before committing to a run.
Checking Contrast
The contrast panel shows your colour’s ratio against white and against black, which tells you whether text in that colour will actually be readable.
The WCAG thresholds are:
- AA (body text) — at least 4.5:1
- AA (large text) — at least 3:1, where large means 18pt/24px, or 14pt/18.66px bold
- AAA (body text) — at least 7:1
If a brand colour fails against white, you usually don’t need to abandon it. Drop the lightness by 10–15% using the slider and re-check — that is often enough to clear 4.5:1 while staying recognisably the same colour.
Contrast is calculated on the opaque colour and ignores alpha, because the real ratio for a semi-transparent colour depends on whatever sits behind it.
Building Shades and Tints
The strip at the bottom holds your colour’s hue and saturation while stepping lightness from 10% to 90%. That gives you a coherent scale for hover states, borders, backgrounds and disabled states without any of them looking like a different colour.
A practical starting set for a UI:
- 10–20% — text on a light background, or deep backgrounds in dark mode
- 30–50% — the main brand colour and primary buttons
- 60–70% — hover and focus states
- 80–90% — subtle backgrounds, borders and dividers
Click any swatch to load it into the picker and read off its exact values.
Frequently Asked Questions
How do I convert HEX to RGB?
Paste the hex value into the Paste any colour field. The RGB row updates immediately, and clicking it copies the value.
Why does the hue slider not move on greys?
Pure black, white and grey have no meaningful hue or saturation — every hue produces the same grey. Rather than reset the slider to zero and lose your place, the picker holds the previous hue so you can move straight back out to a colour.
Are the CMYK values print-accurate?
No, and no converter can be without knowing your press. These are the standard formula-based conversions, which are fine for a rough idea or for filling in a spec sheet, but real print work needs a proper ICC profile.
What is the “Pick from screen” button?
It opens your browser’s native eyedropper so you can sample any pixel on screen. It only appears in browsers that support the EyeDropper API — currently Chrome, Edge and Opera.