Seletor de Cores

Digital displays reproduce colors using the RGB (Red, Green, Blue) additive color model. Each pixel on a screen is composed of three subpixels -- red, green, and blue -- each of which can be set to 256 brightness levels (0-255). By combining these three channels, a standard display can produce 16.7 million colors (256^3). The color value you pick from an image or screen is the RGB triplet of that specific pixel, which can be expressed in multiple notations: HEX (#00BFA5), RGB (rgb(0, 191, 165)), or HSL (hsl(174, 100%, 37%)).

When you pick a color from an image using our tool, the browser's Canvas API reads the pixel data at the click position using getImageData(). This returns a Uint8ClampedArray containing the RGBA values (red, green, blue, alpha) of the pixel. The alpha channel (0-255) represents transparency --0 is fully transparent, 255 is fully opaque. The tool then converts the RGB values to HEX and HSL for display. For screen-wide color picking, the EyeDropper API captures a single pixel's color from anywhere on your display, including other browser tabs and desktop applications.

Color spaces matter when picking colors for different purposes. The sRGB color space is the standard for web design -- it's what browsers, CSS, and HTML use. However, many modern displays support wider color gamuts (Adobe RGB, Display P3) that can show more saturated colors than sRGB. When you pick a color from a P3-display image, the browser may report P3 values that are out of sRGB gamut. For web design, always work in sRGB to ensure consistent color across devices. For print design, consider converting to CMYK using a dedicated print color management tool.

Designers use color pickers in several workflows: extracting brand colors from a logo image, building a color palette from a photograph, matching colors between a design mockup and a live website, and capturing inspiration colors from anywhere on screen. The EyeDropper API is particularly powerful for the last use case -- you can pick a color from a design in Figma, a color from a website in another tab, or even a color from a desktop application, without taking a screenshot first.

When building a color palette from an image, pick 3-5 colors that represent the dominant tones. Start with the most prominent color (often the background), then pick 1-2 accent colors, and finally a neutral. Tools like the palette generator can automate this process by analyzing the image's color histogram. When picking colors for accessibility, always check the contrast ratio between text and background colors -- our contrast checker tool uses the WCAG 2.1 contrast formula to ensure readability.