Color Picker & Converter
Pick or type a color in HEX, RGB, HSL, or HSV/HSB. All values stay in sync. Copy codes for CSS or design tools. No sign-up.
How it works
Use the color swatch or type a value in any field (HEX, RGB, HSL, or HSV/HSB). All formats stay in sync so you can enter one and read the others. Click copy next to any value to paste into your code or design app.
HEX (hexadecimal)
A HEX color is written as # followed by six hexadecimal digits. The first two are red, the next two green, and the last two blue. Each pair is a number from 00 to FF (0–255 in decimal). For example, #417CF7 means red 65, green 124, blue 247.
HEX is very common in CSS, HTML, and design tools (Figma, Sketch, etc.) because it is compact and easy to copy. The leading # is optional in some contexts but standard in web code.
RGB (red, green, blue)
RGB describes a color by how much red, green, and blue light to mix. Each value is from 0 to 255. (0,0,0) is black; (255,255,255) is white. This matches how screens work: each pixel has red, green, and blue subpixels.
In CSS you write rgb(65, 124, 247). RGB is used in image editors, APIs, and any code that deals with raw pixel values. It is easy to convert to and from HEX (each 0–255 value becomes two hex digits).
HSL (hue, saturation, lightness)
Hue is the “color name” on a wheel from 0° to 360° (red ≈ 0°, green ≈ 120°, blue ≈ 240°). Saturation (0–100%) is how vivid the color is—0% is gray, 100% is the pure hue. Lightness (0–100%) is how light or dark—0% is black, 100% is white, 50% is the “natural” tone of that hue.
HSL is intuitive when you think “make it lighter” or “same color, less vivid.” In CSS, hsl(221, 91%, 61%) means hue 221°, 91% saturation, 61% lightness. Changing only the lightness gives you a lighter or darker shade of the same color, which is useful for hover states and accessibility.
HSV / HSB (hue, saturation, value / brightness)
Hue is the same as in HSL (0–360°). Saturation (0–100%) is how much the hue is mixed with gray. Value (or Brightness, 0–100%) is the brightness of the color: 0% is black, 100% is the brightest version of that hue. HSV and HSB are the same model; only the name differs (Value vs Brightness).
Many design apps (e.g. Photoshop, GIMP) and color pickers use HSV/HSB because it matches how people think “vivid vs dim” without changing the hue. In this tool you can type hsv(221, 74%, 97%) or three numbers separated by commas. Converting to RGB or HEX gives you the same final color; only the way you describe it changes.