Pick any color and get HEX, RGB, and HSL codes. Use the sliders, type a code, or use the native picker.
Digital screens display colors by mixing red, green, and blue light at different intensities. Every color you see on a screen is a combination of these three channels, each ranging from 0 (off) to 255 (full brightness). This is the RGB color model. HEX codes are simply a more compact way to write RGB values using hexadecimal notation. HSL (hue, saturation, lightness) is a more intuitive model that describes colors the way humans think about them.
A HEX color code starts with # followed by six hexadecimal digits. The first two represent red, the middle two green, and the last two blue. Each pair ranges from 00 (0 in decimal, no color) to FF (255, full intensity). For example, #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue. #000000 is black (all off), and #FFFFFF is white (all full). HEX codes are the standard format for colors in CSS and HTML.
RGB expresses the same information as HEX but in decimal. rgb(255, 0, 0) is the same red as #FF0000. CSS accepts both formats interchangeably. RGB also supports an alpha channel for transparency: rgba(255, 0, 0, 0.5) is 50% transparent red.
HSL stands for hue, saturation, and lightness. Hue is the color angle on a 360-degree color wheel (0/360 is red, 120 is green, 240 is blue). Saturation is the intensity from 0% (gray) to 100% (vivid). Lightness goes from 0% (black) to 100% (white), with 50% being the pure color. HSL is often easier to work with when you want to create variations of a color because you can adjust saturation and lightness independently without affecting the hue.