Pick any color and get HEX, RGB, and HSL codes. Use the sliders, type a code, or use the native picker.
Digital colors are defined by mixing red, green, and blue light (the RGB model). Each channel ranges from 0 to 255 (or 00 to FF in hexadecimal). Pure red is #FF0000, pure green is #00FF00, pure blue is #0000FF. White is #FFFFFF (all channels at maximum) and black is #000000 (all channels at zero). The hex color code is the most common format used in web design, CSS, and graphic design.
Pick a color visually using the color wheel or gradient picker, or enter a specific value in hex (#RRGGBB), RGB (0-255 per channel), or HSL (hue, saturation, lightness). The tool shows the color in all three formats simultaneously and provides a live preview. You can also extract colors from an uploaded image, generate complementary and analogous color palettes, and check contrast ratios for accessibility compliance.
Hex: 6-character code preceded by #. Most common in web development. #38BDF8 means R=56, G=189, B=248. RGB: Three decimal values from 0-255. rgb(56, 189, 248). Same color, different notation. HSL: Hue (0-360 degrees on the color wheel), Saturation (0-100%), Lightness (0-100%). hsl(199, 93%, 60%). HSL is more intuitive for creating color variations (darken by reducing lightness, desaturate by reducing saturation).
Digital color is represented through several models, each serving different purposes. RGB (Red, Green, Blue) is the standard for screens and web design, mixing light additively. Values range from 0-255 per channel, creating over 16.7 million possible colors. CMYK (Cyan, Magenta, Yellow, Key/Black) is used for print, mixing pigments subtractively. HSL (Hue, Saturation, Lightness) is the most intuitive for humans: hue is the color wheel position (0-360 degrees), saturation controls vividness (0-100%), and lightness controls brightness (0-100%).
Hex color codes (#RRGGBB) are simply a compressed way to write RGB values in hexadecimal. Each pair of hex digits represents one channel: #FF0000 is pure red (255,0,0), #00FF00 is pure green, and #0000FF is pure blue. The shorthand #RGB format (e.g., #F00 for red) doubles each digit. Web-safe colors were originally a set of 216 colors that displayed consistently across early monitors, but modern displays render all 16.7 million RGB colors accurately.
Color accessibility is increasingly important in web design. The Web Content Accessibility Guidelines (WCAG 2.1) require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text against background colors. Approximately 8% of men and 0.5% of women have some form of color vision deficiency, making it important to never convey information through color alone. Tools that check contrast ratios against WCAG standards are essential for accessible design.
Colors are represented in multiple systems: HEX (#FF5733), RGB (255, 87, 51), and HSL (11, 100%, 60%). HEX is standard for web design, RGB for screen displays, and HSL for intuitive color adjustment (hue rotates through the color wheel, saturation controls vibrancy, lightness controls brightness). Complementary colors sit opposite each other on the color wheel (blue/orange, red/green, purple/yellow) and create maximum contrast. Analogous colors sit adjacent and create harmony. The 60-30-10 rule guides balanced color schemes: 60% dominant color, 30% secondary, 10% accent. For accessibility, WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Dark text on light backgrounds is generally more legible than the reverse.