What is the Color Picker & Palette Generator?

The Color Picker & Palette Generator is a professional-grade browser tool for working with color in every dimension — picking, converting, harmonizing, scaling, and checking contrast. Select a color using the gradient canvas, enter any value directly, or sample a color from anywhere on your screen using the built-in eyedropper. Everything updates instantly with no page reloads and nothing sent to a server.

---

How to Use It

1. Pick a color. Drag the cursor across the gradient canvas to set saturation and brightness. Drag the hue rail below the canvas to change the hue. The canvas redraws live as you move.
2. Enter a value. Type a HEX code directly into the input field and the picker will jump to that color. Any valid 6-digit hex is accepted.
3. Sample from your screen. Click the eyedropper icon to activate the native screen color picker. Move the cursor over any element on screen and click to capture its exact color. Works in Chrome 95+ and Edge 95+.
4. Copy any format. Every color format in the values panel has a copy button. Click once to copy that value to your clipboard.
5. Explore harmonies. Choose a harmony mode from the palette section — complementary, analogous, triadic, split-complementary, tetradic, or monochromatic. Click any harmony swatch to apply it as the new base color.
6. Use the shade scale. The ten-stop shade scale generates a full range from light to dark based on your color's hue. Hover any swatch to reveal its hex code; click to copy.

---

Color Formats

HEX — six hexadecimal characters representing red, green, and blue values. The standard format for CSS and HTML: #3b82f6.

RGB — three numbers from 0 to 255 for red, green, and blue. Used in CSS, design tools, and image processing: rgb(59, 130, 246).

HSL — hue (0–360°), saturation (0–100%), and lightness (0–100%). More intuitive for programmatic color adjustments. Changing lightness alone shifts a color from dark to light without affecting its hue: hsl(217, 91%, 60%).

HSB — hue, saturation, and brightness (also called HSV). Used by Photoshop, Figma, and most professional design tools. Brightness represents the maximum color intensity rather than a midpoint: hsb(217, 76%, 96%).

OKLCH — a perceptually uniform color space introduced in CSS Color Level 4. Lightness, chroma, and hue are defined so that equal numeric steps produce equal perceived differences, making it significantly better than HSL for generating smooth gradients and accessible color scales: oklch(60.1% 0.157 248).

---

WCAG Contrast Checker

The contrast panel calculates the luminance contrast ratio between your color and both white and black backgrounds. This is the ratio used by the Web Content Accessibility Guidelines (WCAG) to determine whether text is readable.

The thresholds are: AA requires 4.5:1 for normal text (3:1 for large text), AAA requires 7:1 for normal text (4.5:1 for large text). The panel shows the exact ratio and the highest WCAG level achieved for each combination. A live preview shows what actual text looks like at that color on that background before you commit to using it.

---

Shade Scale

The shade scale generates ten color stops — labelled 50 through 900 — from a single base hue. The stops follow the same lightness and saturation curves used by Tailwind CSS, so the output integrates naturally with Tailwind-based projects. Lighter stops (50–200) are desaturated pastels suitable for backgrounds. Mid stops (400–500) are the most vivid and closest to the original color. Dark stops (700–900) are deep, saturated tones suitable for text and borders.

Click any swatch to copy its hex code.

---

Color Harmony Modes

Complementary — the color directly opposite on the wheel. Maximum contrast, high visual tension. Good for call-to-action pairings and accent colors.

Analogous — two colors adjacent to the base, 30° on either side. Low contrast, harmonious, and naturally cohesive. Common in calm and natural designs.

Triadic — two colors spaced 120° apart from the base. Vibrant and balanced. Suitable for designs that need energy without the harshness of a complementary pair.

Split-complementary — two colors flanking the complement, 150° and 210° from the base. Provides visual contrast with more flexibility and less tension than a direct complement.

Tetradic — three additional colors at 90°, 180°, and 270° from the base, forming a rectangle on the wheel. Rich, complex palettes. Works best when one color dominates and the others serve as accents.

Monochromatic — four variations of the base color at different saturation and brightness levels. No hue contrast, maximum tonal cohesion. Used for elegant, restrained designs and UI surfaces.

Clicking any harmony swatch applies it as the new base color, so you can navigate from one color to another by following harmonic relationships.

---

Nearest Tailwind Color

The tool identifies the closest Tailwind CSS color family to your selection by measuring the Euclidean distance in RGB space across all 22 Tailwind color ramps. The result shows the family name, the 500-level hex value, and a five-stop strip so you can see how the full ramp compares visually to your color. The Tailwind class name (for example, bg-blue-500) is ready to copy with a single click.

---

Eyedropper

The native screen eyedropper uses the browser's EyeDropper Web API to capture any color visible anywhere on your screen — pixels from images, other browser tabs, UI elements, or desktop applications. Click the pipette icon to activate it, then click any pixel to sample its color. The picker updates immediately to the sampled value. This feature requires Chrome 95 or Edge 95 and later.

---

Privacy

All color processing happens entirely in your browser. No color values, palette data, or usage information are sent to any server.