Color Picker & Palette

Introduction

Color is one of the most powerful elements in design, and getting it right matters. Whether you're trying to match a brand color from a logo, build a harmonious palette for a website, or just find the exact RGB value of a color you see in a photo — having a solid color tool at hand saves a surprising amount of time.

This Color Picker & Palette Generator combines two modes in one. In the first mode, you use an interactive color wheel (with sliders for hue, saturation, lightness, and opacity) to pick any color you can imagine and get its Hex, RGB, and HSL codes. In the second mode, you upload any photo and click anywhere on it to sample the exact color of that pixel.

The tool also auto-generates color palette harmonies — Complementary, Analogous, Triadic, and Tetradic — based on your selected color, giving you a design-ready set of tones with a single click.

Technical & Concept Breakdown

Colors on digital screens are represented using additive mixing of light in the RGB color model (Red, Green, Blue), where each channel ranges from 0 to 255. Three alternate representations are commonly used:

Hex (#RRGGBB): Each channel is written in hexadecimal. #FF5733 means Red=255, Green=87, Blue=51.

RGB (r, g, b): The same three values in decimal. rgb(255, 87, 51).

HSL (hue, saturation%, lightness%): A more human-intuitive model. Hue is a degree on the color wheel (0°=red, 120°=green, 240°=blue). Saturation is color intensity. Lightness runs from black (0%) to white (100%). hsl(11, 100%, 60%) for the same color.

Palette Harmonies

These relationships are drawn from the traditional color wheel:

• Complementary: 180° opposite — creates high contrast (e.g., orange and blue)
• Analogous: 30° adjacent on both sides — creates subtle, harmonious looks
• Triadic: Three colors equally spaced (120° apart) — vibrant and balanced
• Tetradic/Square: Four colors at 90° intervals — richest variety but hardest to balance

Color Sampling from Images

When you upload a photo and click, the browser reads the canvas pixel at those coordinates using ctx.getImageData(x, y, 1, 1).data, which returns a 4-element array [R, G, B, A]. This value is then converted to Hex and HSL representations.

Real-World Use Cases

Brand Designers: Match exact company colors from a logo to get usable Hex codes for a style guide or CSS variables.

Web Developers: Convert a designer's Figma color (often in Hex)...