Color Picker

Choose colors, convert HEX / RGB / RGBA / HSL / HSV / CMYK, build harmony palettes, sample pixels from images, and export your palette—all on-device.

Lighter shades

Darker shades

Complementary

Analogous

Triadic

Monochromatic

History

Sample from image

Drag & drop or click to browse an image

Introduction

Color is the fastest signal in an interface: brand recognition, state (error/success), hierarchy, and accessibility contrast all depend on precise values. Designers juggle HEX for CSS, RGB for canvases, HSL for perceptual tweaks, and approximate CMYK when talking to print. This Color Picker consolidates those formats, generates harmony palettes, and samples pixels from local images without uploading brand assets to a third party.

History keeps recent choices for quick comparison. Export packages the current color, palettes, and history as JSON for design tokens or handoff notes.

How it works

The native color input drives conversions. RGB channels feed HSL/HSV math and a simple CMYK approximation. Alpha blends into RGBA and the large swatch. Palette generators adjust hue and lightness relative to the base color. Image sampling draws onto a canvas, reads getImageData under the cursor, and shows a circular magnifier for precision.

Common use cases

Extract brand colors from a logo screenshot. Build light/dark scale tokens. Check complementary accents for charts. Copy HSL into CSS variables. Pair with CSS Gradient Generator for multi-stop backgrounds.

Benefits

Private sampling, multi-format copy buttons, palette export, keyboard-friendly controls, and responsive layout for tablets in design reviews.

Working with design tokens

Many teams store brand colors as CSS custom properties such as --color-primary. Copy HEX for stylesheets, RGB for canvas drawing code, and HSL when you need to derive hover states by adjusting lightness. Exporting the palette JSON gives you a snapshot of complementary, analogous, triadic, and monochromatic sets derived from the current base—useful when brainstorming chart colors or marketing accents.

Image sampling helps reverse-engineer colors from screenshots or photography. Zoom with the magnifier, click to lock a sample into history, then compare lighter and darker ramps for accessible text contrast. Always verify final contrast with dedicated checkers when shipping UI text over brand colors.

Remember that CMYK here is approximate. Professional print production should use calibrated ICC workflows; treat on-screen CMYK percentages as conversation starters with print partners, not final separations.

Random color is useful for wireframe placeholders and generative art experiments. History is limited to recent entries so the panel stays scannable; export when you need a permanent record. All processing remains offline after assets load, aligning with WebTools privacy principles.

Examples

Brand blue

#1A73E8 → rgb(26, 115, 232) → hsl(217, 89%, 51%)

FAQ

Is CMYK print-accurate?
No. Values are a mathematical approximation for rough guidance, not ICC print profiles.
Are images uploaded?
No. Sampling uses Canvas on your device only.
How many hex codes are there?
There are exactly 16,777,216 possible hex color codes. Hex codes use a six-digit hexadecimal format (#RRGGBB), with each pair representing values from 00 to FF (0 to 255 in decimal). Multiplying the 256 possible values per color channel (red, green, and blue), we get 256×256×256=16,777,216 (or 256³) unique combinations
Color Shades, Tints and Tones
Color shades, tints, and tones are fundamental concepts for refining and expanding color palettes. By adjusting the darkness, brightness, or intensity of a base color, you can create harmonious color schemes and variants of a base color to use in interface and web design.
Color shades
A shade is created by mixing a base color with black, resulting in a darker variation of the original color. Shades add depth and contrast, and are commonly used to provide visual weight or establish hierarchy within designs.
Color tints
Tints are created by adding white to a base color, producing lighter, softer versions of the original hue. Tints help establish visual balance, soften the overall aesthetic, and are often used for backgrounds and borders, or paired with a shade.
Color tones
A color tone results from adding gray (a combination of black and white) to a base color, which reduces its intensity and saturation. Tones are useful for creating sophisticated, subtle palettes and can introduce a sense of harmony and balance in designs.

Related tools