Softonic

HEX Color Picker

Step 1 / 4 HEX colour picker

Common Presets

Choose a colour with your browser’s visual control or enter a three- or six-digit HEX value. The picker converts it to RGB, HSL and an approximate CMYK value, then calculates relative luminance and exact contrast ratios against white and black. The colour is processed in this browser and is never added to the funnel URL.

How to pick a colour

  1. 1

    Start with a preset or the colour control

    Choose one of the sample colours or open your browser's native colour control.

  2. 2

    Enter an exact HEX value

    Type three digits such as #F60 or six digits such as #FF6600. The picker expands short HEX correctly.

  3. 3

    Review the calculated formats

    See HEX, RGB, HSL, approximate CMYK and sRGB relative luminance together.

  4. 4

    Check contrast and copy

    Compare the colour with white and black, then copy the HEX, RGB or HSL value you need.

Colour notations in practice

Every colour model answers a slightly different question.

Notation reference

Notation Components Where it is used
HEX #RRGGBB CSS, design tools, brand guides
RGB red 0-255, green 0-255, blue 0-255 CSS rgb(), image editors
HSL hue 0-360°, saturation %, lightness % CSS hsl(), design systems
CMYK cyan %, magenta %, yellow %, key/black % Print, prepress

Accessibility contrast

WCAG 2.2 defines minimum contrast ratios between text and background:

  • AA for normal text: ≥ 4.5:1
  • AA for large text (18 pt or 14 pt bold): ≥ 3:1
  • AAA for normal text: ≥ 7:1

The picker computes the ratio against white and against black from sRGB relative luminance. These two ratios do not prove that another foreground colour will be readable; use a dedicated contrast checker for every exact pair.

Tips

  • HEX is the default in most design tools, but short three-digit hex (#F60) is equivalent to #FF6600, not #F06060.
  • Copy HSL when you want to adjust hue, saturation or lightness in CSS or a design tool.
  • The CMYK value is a simple mathematical estimate. Print results depend on the press, ink, paper and colour profile, so use colour-managed software and a proof for production work.
  • A ratio of at least 4.5:1 meets WCAG AA for normal text, but font size, weight and the exact foreground/background pair still matter.

Frequently Asked Questions

Photoshop applies a colour profile (usually sRGB for screen, often different for print). Browsers render untagged HEX as sRGB. If your document is set to Adobe RGB or ProPhoto, the pixel values are the same but the perceived colour shifts.

Yes, both describe full red, with red at 255 and green and blue at 0. HEX is just a two-digit hexadecimal notation for each 0-255 channel value.

Pick your primary colour and copy the HSL value. In CSS or a design tool, keep the hue and saturation fixed while adjusting lightness. Check every resulting foreground/background pair rather than assuming the whole palette is readable.

The current colour is kept in this browser tab for up to 30 minutes so it can survive the guided steps. It is not placed in the funnel URL or sent to our servers. Starting over, closing the tab, clearing browser data or waiting for expiry removes it.

Related Tools

ASCII Table Reference

Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

HTML Character Reference

Searchable list of HTML entities, their named and numeric codes, and a one-click copy for special characters and symbols.

JSON Formatter

Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.

Phone Validator

Validate phone numbers by country, detect the region and type, and normalize valid numbers to E.164, international, national and RFC 3966 formats.

Random Color Palette Generator

Generate random color palettes from 2 to 15 swatches, choose a vibrant, pastel, muted or dark style, then copy HEX codes or CSS variables.

Tool available in other languages