What is a hex color code?

A hex color code writes a color as hexadecimal digits, the way CSS and most design tools do. In #3b82f6, each pair of digits is one channel: 3b is red, 82 is green, and f6 is blue, from 00 (off) to ff (full). An optional fourth pair sets the alpha, or opacity, so #3b82f6cc is the same blue at 80%. Codes where each pair repeats its digit can be shortened to three or four digits, so #ff8800 is also #f80.

Tool description

This tool lets you edit a hex color code pair by pair. Type or paste a code, pick a color, or paste one in RGB, HSL, or another format, then change the red, green, blue, and alpha pairs or the opacity and see the result on a transparency grid. The edited color is shown in the hex forms that CSS, Android, and code use, each ready to copy.

Features

  • Edit 3-, 4-, 6-, and 8-digit hex codes, with or without #
  • Change each channel as a two-digit hex pair, and the alpha as a hex pair or a percentage
  • Pick a color, or paste one in RGB, HSL, or another format, while keeping the alpha
  • Preview transparent colors on a checkerboard
  • Get the color as 6-digit HEX, 8-digit HEX, short HEX, rgb() or rgba(), #AARRGGBB, and 0xAARRGGBB
  • Switch between lowercase and uppercase hex digits
  • Runs in your browser

How it works

A 3- or 4-digit code is expanded by doubling each digit, and a code without an alpha pair is fully opaque (ff). A single digit typed in a channel field counts as 0 followed by that digit, so f is 0f. Opacity percentages are rounded to the nearest alpha value from 0 to 255, so 80% becomes cc (204). The short form only exists when both digits of every pair match; otherwise that field stays empty.

Tips

  • CSS reads the alpha pair last (#RRGGBBAA), but Android color resources and .NET put it first (#AARRGGBB), so pick the ARGB fields for those.
  • Leave the alpha at ff to get a plain 6-digit code; the 8-digit and ARGB fields still show it in full.