Pick a color with the swatch, type a hex value, or upload an image and click to sample a color. Copy HEX, RGB, or HSL below.
Click or drag on the color area to select a color visually. The tool shows the selected color's HEX, RGB, and HSL values, which you can copy with one click. You can also type in a HEX value directly to see what it looks like.
HEX colors use a six-character code like #FF5733, where each pair represents red, green, and blue intensity from 00 to FF. RGB uses decimal values from 0 to 255, like rgb(255, 87, 51). HSL describes the same color as hue, saturation, and lightness, like hsl(11, 100%, 60%), which makes it easy to nudge a shade lighter or darker without guessing new numbers. CSS accepts all three, so copy whichever fits your workflow.
Need to match a color from a screenshot? Use your OS eyedropper (built into most browsers too) to grab the HEX value, then paste it here to get the RGB equivalent. Want a slightly lighter or darker version? Adjust the brightness slider instead of guessing new values.