Color Picker

A color picker is an interactive tool that lets you select any color and instantly see its value expressed in every major color format used across the web, print, and design industries. Instead of memorizing cryptic codes or doing manual conversions, you simply click your chosen color and the tool does the work—outputting HEX, RGB, RGBA, HSL, HSLA, and CMYK representations in one place.

Color pickers are essential for web designers, front-end developers, UI/UX professionals, and digital artists. Whether you are matching a brand color precisely for a CSS stylesheet, preparing artwork for a print shop, or experimenting with palette ideas, having all color formats side by side eliminates errors and saves time.

This online color picker goes further than a plain hex selector. It computes lightness variations—nine steps of the same hue at increasing and decreasing brightness—so you can build a complete tonal scale for a design system. It also generates color harmonies based on proven color theory relationships: complementary, triadic, and analogous colors. All values update in real time as you drag the color wheel or type a hex code directly.

Understanding how different color models describe the same shade helps you work confidently across tools. RGB is native to screens, HSL maps to human perception of hue and lightness, and CMYK is required for professional printing. Our color picker makes switching between these models frictionless.

Every color you see on a screen can be described by multiple mathematical models. This color picker converts between them automatically, but knowing what each model represents helps you choose the right format for your workflow.

HEX (Hexadecimal)

HEX is the most common format in web development. A hex color such as #3B82F6 encodes three bytes—3B for red, 82 for green, F6 for blue—each as a base-16 number from 00 (0) to FF (255). The picker parses hex digits using parseInt(hex.substring(0,2), 16) for red, parseInt(hex.substring(2,4), 16) for green, and parseInt(hex.substring(4,6), 16) for blue.

RGB and RGBA

RGB expresses the same three channels as decimal integers (0–255). RGBA adds a fourth alpha channel for transparency, where 1 is fully opaque. CSS syntax: rgb(59, 130, 246) or rgba(59, 130, 246, 1).

HSL and HSLA

HSL (Hue, Saturation, Lightness) maps much more naturally to human color intuition. Hue is a degree on the color wheel (0°–360°), saturation describes vibrancy (0–100%), and lightness ranges from black (0%) through the pure hue (50%) to white (100%). Because HSL separates perceptual qualities, it is ideal for generating tonal scales and harmonies. This tool uses the standard algorithm described above.

CMYK

CMYK (Cyan, Magenta, Yellow, Key/Black) is the subtractive model used in color printing. The conversion from RGB first calculates K = 1 − max(R', G', B'). If K equals 1 (pure black), all other channels are 0. Otherwise each ink percentage is derived by C = round(((1−R'−K)/(1−K)) × 100), and similarly for M and Y. Note that on-screen CMYK is an approximation; precise print reproduction requires a calibrated ICC color profile.

The lightness variation strip in the color picker shows your selected color at nine different brightness levels. Starting from the base HSL lightness value, the tool generates four lighter steps by adding 10%, 20%, 30%, and 40% to the lightness component (capped at 100), and four darker steps by subtracting 10%, 20%, 30%, and 40% (floored at 0). The base color sits in the center, labeled "Base."

This tonal scale mirrors the convention used by major design systems such as Tailwind CSS, Material Design, and Radix UI, which define colors as numbered scales (50 through 950 or similar). By clicking any swatch in the strip the picker adopts that lighter or darker shade as the new active color, so you can inspect its exact HEX, RGB, HSL, and CMYK values and continue exploring from there.

When building UI components, use lighter variations for backgrounds, hover states, and focus rings, while reserving the deepest shades for body text and borders. This consistent approach to lightness ensures sufficient contrast ratios for accessibility (WCAG 2.1 recommends a minimum 4.5:1 contrast ratio for normal text).

The mathematical relationship is straightforward: only the L channel in hsl(H, S%, L%) changes across the strip. Hue and saturation remain constant, which keeps the color recognizably the same family. This is why HSL is the right model for generating design-system palettes.

Color harmony refers to combinations of hues that are aesthetically pleasing because of their geometric relationship on the color wheel. The picker generates five harmony colors from your base using modular arithmetic on the hue angle.

Saturation and lightness are kept equal to the base color so that the harmony relationships are pure—only the hue shifts. Clicking any harmony swatch sets it as the new active color, letting you explore the palette interactively. Triadic schemes work well for playful brands and illustrations; analogous schemes suit professional dashboards and minimal interfaces where visual tension should be low.

Knowing when to use each format is as important as knowing how to convert between them. Here is a practical guide for common design and development workflows.

CSS Stylesheets

All modern browsers support HEX, RGB(A), and HSL(A) natively. HEX is compact and easiest to copy-paste from design tools. HSL is preferred when you want to tweak colors programmatically—for example, darkening a button on hover by reducing L by 10 percentage points—because the relationship between values and visual output is intuitive. RGBA and HSLA are required whenever you need partial transparency.

Design Tools (Figma, Sketch, Adobe XD)

Design tools typically accept HEX and RGB inputs in their color dialogs. When exporting tokens to a developer handoff, prefer HEX for solid colors and RGBA when layers use transparency. Some tools also let you define HSL for easier palette management.

Print and Pre-press

Professional printing workflows require CMYK values, often alongside a Pantone (PMS) reference. The CMYK numbers from this tool give a screen-based approximation; for production print work, always convert using an ICC color profile in Adobe Illustrator, InDesign, or a similar application to ensure color accuracy on press.

Accessibility and Contrast

When choosing text and background colors, verify contrast ratios. WCAG 2.1 Level AA requires at least 4.5:1 for normal text and 3:1 for large text. The lightness (L) component in HSL is a reliable indicator—a large L difference between foreground and background generally yields high contrast, but always measure with a dedicated contrast checker because hue also affects perceived brightness.