Softonic

HEX Color Picker

Step 1 / 4 Hex color

Designers and developers juggle the same colour across several notations a hundred times a day. Click anywhere in the 2D saturation/value field, drag the hue slider, or paste a value, and this picker shows HEX, RGB, HSL, HSV and CMYK side by side, with WCAG contrast checks against black and white so you know straight away if the colour is readable.

How to pick a colour

  1. 1

    Choose a hue

    Drag the vertical hue slider through the full 0-360° spectrum.

  2. 2

    Pick saturation and value

    Click or drag inside the 2D square to set how vivid and how bright the colour is.

  3. 3

    Fine-tune with the inputs

    Type exact values in HEX, RGB, HSL, HSV or CMYK: all five fields stay synchronised.

  4. 4

    Check accessibility and copy

    Contrast ratios against black and white appear inline; one click copies the notation 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
HSV/HSB hue 0-360°, saturation %, value/brightness % Photoshop, Figma colour pickers
CMYK cyan %, magenta %, yellow %, key/black % Print, prepress
OKLCH lightness %, chroma, hue Modern CSS Color Module 4 palettes

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 in real time. If a custom foreground colour is critical, use a dedicated contrast checker for every pair.

Tips

  • HEX is the default in most design tools, but short three-digit hex (#F60) is equivalent to #FF6600, not #F06060.
  • HSL is friendlier for building palettes: lock the hue, vary lightness for tints and shades.
  • CMYK and RGB cannot be perfectly interconverted, print CMYK depends on the press profile. Always proof print work on real paper.
  • If you design for modern CSS, consider OKLCH for perceptually uniform lightness steps.

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, switch to HSL, then vary lightness in 10% steps while keeping hue and saturation locked. You get a coherent ladder of tints and shades that sit on the same hue.

Recently used colours are kept in your browser’s local storage so they survive a refresh. Nothing is sent to a server, and you can clear the palette history any time.

Related Tools

Color Palette Generator

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

FPS Counter

Measure browser FPS with requestAnimationFrame, smoothing, min/max frame rate, warnings and an optional graph. Runs locally with no upload or API.

BBCode to HTML Converter

Convert BBCode (bulletin-board markup) to clean HTML. Handles formatting tags, lists, quotes, code, images, links and tables.

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.

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.

Binary to ASCII Converter

Paste binary (space-separated bytes or a long bitstream) and get the ASCII text it represents. Handles 7-bit and 8-bit encodings.