liminfoColor Picker
Free web tool: Color Picker
Color Harmony
Palette Presets
About Color Picker
The Color Picker is a multi-functional color utility that lets you select any color through HSL (Hue, Saturation, Lightness) range sliders or by typing a hex code directly, and immediately outputs the equivalent HEX, RGB, and HSL representations. A live preview swatch updates as you drag the sliders. Every format value has its own one-click copy button so you can paste directly into CSS, design tokens, or any other tool without reformatting.
Designers, front-end developers, and UI engineers use this tool to explore color relationships, prototype palettes, and verify accessibility compliance. The built-in WCAG contrast checker calculates the contrast ratio of your chosen color against both white and black, displays the ratio as a decimal (e.g., 4.50:1), and shows the WCAG AA or AAA compliance badge. This makes it trivial to decide whether to use white or black text on a given background color. A color history panel stores up to 20 recent swatches, so you can revisit and compare colors during a session.
Under the hood, the tool uses bidirectional color space conversion: HSL → RGB via the standard piecewise formula involving the chroma, hue sector, and lightness offset, and RGB → HSL for the reverse path when a hex value is typed. The WCAG relative luminance formula (IEC 61966-2-1 sRGB linearization, then weighted sum with coefficients 0.2126 R + 0.7152 G + 0.0722 B) is used to compute the contrast ratio as (L1 + 0.05) / (L2 + 0.05). All computations run in the browser via React useMemo hooks, with no server interaction.
Key Features
- HSL sliders for Hue (0–360°), Saturation (0–100%), and Lightness (0–100%) with live preview
- Hex text input with automatic conversion to HSL on blur
- Output in three formats: HEX (#rrggbb), RGB (rgb(r, g, b)), and HSL (hsl(h, s%, l%))
- One-click copy buttons for HEX, RGB, and HSL values
- Live WCAG contrast ratio against white and black with AA/AAA compliance labels
- Color history palette storing up to 20 recently saved swatches
- Bidirectional HSL↔RGB↔HEX conversion using standard color science formulas
- Dark mode support and fully responsive layout for use on any device
Frequently Asked Questions
What is HSL and why use sliders for it?
HSL stands for Hue, Saturation, and Lightness — a cylindrical color model that maps more intuitively to human perception than RGB. Hue is the color angle (0° = red, 120° = green, 240° = blue), saturation controls vividness, and lightness controls brightness from black to white. Sliders for HSL are especially useful because you can independently control the tone, vibrancy, and brightness of a color without changing the others.
How do I convert a hex color to RGB using this tool?
Simply enter your hex code (e.g., #3b82f6) in the Hex Input field and press Enter or click away. The tool instantly converts it to the equivalent RGB and HSL values and updates the sliders to match. The HEX, RGB, and HSL output rows are all updated simultaneously.
What does the WCAG contrast ratio mean?
The WCAG (Web Content Accessibility Guidelines) contrast ratio measures the luminance difference between two colors on a scale from 1:1 (identical) to 21:1 (black on white). A ratio of at least 4.5:1 is required for normal text (WCAG AA), and 7:1 for the stricter AAA standard. This tool shows your color's contrast against both white and black so you can instantly decide which text color meets the required standard.
What is the difference between WCAG AA and AAA?
WCAG AA requires a contrast ratio of at least 4.5:1 for normal-size text (under 18pt or 14pt bold) and 3:1 for large text. WCAG AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text. Most accessibility guidelines require at minimum AA compliance. AAA is recommended for text intended for users with low vision.
How is relative luminance calculated?
The WCAG relative luminance formula first linearizes each RGB channel from the sRGB gamma curve: values ≤ 0.03928 are divided by 12.92; others use the formula ((value + 0.055) / 1.055)^2.4. The linearized channels are then combined as L = 0.2126 × R + 0.7152 × G + 0.0722 × B, matching human eye sensitivity to each primary color.
Can I save colors between browser sessions?
The color history panel stores colors in-memory during your current browser session and holds up to 20 swatches. Closing or refreshing the page will clear the history. For persistent storage, copy the HEX values to a text file, design system tokens, or a CSS variable file.
What is the difference between RGB and HSL for CSS?
Both are valid CSS color formats. RGB is more traditional and widely supported: rgb(59, 130, 246). HSL is often preferred when programmatically adjusting colors because you can increment only the lightness to create tints and shades without recalculating all three channels: hsl(220, 90%, 56%). The tool provides both so you can choose whichever fits your workflow.
How do I find a color that has sufficient contrast against a specific background?
Enter your background color in the hex input. Look at the "vs White" and "vs Black" contrast ratios. If neither meets 4.5:1, use the lightness slider to make the color darker or lighter until the desired contrast is achieved. As a general rule, colors with lightness above ~55–60% will have better contrast against black text, and those below ~40–45% will have better contrast against white text.