Stax

Color Picker

Pick any color and instantly get HEX, RGB, and HSL values.

R
79
G
70
B
229
HEX#4F46E5
RGBrgb(79, 70, 229)
HSLhsl(243, 75%, 59%)

Color formats explained

Every color on screen can be described in multiple formats — HEX, RGB, HSL, and more. Different tools and workflows prefer different formats. Figma uses HEX and RGB. CSS supports all three. Tailwind uses HEX in its config. This tool lets you pick any color and instantly copy it in whichever format you need.

HEX vs RGB vs HSL

  • HEX — compact, widely supported, hardest to read at a glance.
  • RGB — intuitive for programmers, great when you need alpha (rgba).
  • HSL — most human-readable, easy to create lighter/darker variants by changing L.

Tips for designers and developers

To create a hover state that's slightly darker, take your base HSL color and reduce the L value by 10. To create a semi-transparent overlay, use the RGB values in rgba(r, g, b, 0.15). To build a consistent palette, keep H fixed and vary S and L.

Frequently asked questions

What is a HEX color code?
A HEX color code is a 6-character string representing a color in RGB format using hexadecimal notation. The format is #RRGGBB where RR, GG, BB are two-hex-digit values from 00 to FF for red, green, and blue. For example, #ff0000 is pure red, #ffffff is white, #000000 is black.
What is RGB?
RGB (Red, Green, Blue) represents colors as three numbers from 0 to 255. rgb(255, 0, 0) is red, rgb(0, 255, 0) is green, rgb(0, 0, 255) is blue. It's the native color model for screens.
What is HSL?
HSL (Hue, Saturation, Lightness) is a more human-intuitive color model. Hue is the color angle (0–360°), Saturation is the intensity (0–100%), and Lightness controls how light or dark the color is (0% = black, 100% = white, 50% = full color). HSL is widely used in CSS.
Which format should I use in CSS?
All three work in CSS. HEX is the most common for static colors. HSL is best when you need to programmatically adjust lightness or saturation (e.g. hover states). RGB is useful when you need alpha transparency — use rgba(r, g, b, 0.5) for semi-transparent colors.

Related tools