Color Picker (HEX/RGB/HSL)
Pure frontend local processing · HEX/RGB/HSL/CMYK convert · Palette save·Contrast check·Gradient generator
Zero Dependencies · Works OfflineWhat can this Color Picker do?
Color Picker is a complete browser-based tool that runs entirely locally. It provides an interactive saturation/value panel and hue bar for picking colors, supports instant conversion between HEX, RGB, HSL and CMYK formats, and includes a WCAG contrast checker plus a CSS gradient generator. Pick, convert and copy colors quickly — no uploads, no signup.
Features
- Visual color picking: Click or drag on the saturation/value panel and hue bar for precise color selection
- Multi-format conversion: HEX/RGB/HSL/CMYK values sync in real time — edit any field and the others update automatically
- WCAG contrast check: Compare foreground and background colors and see whether they pass AA/AAA levels
- CSS gradient generator: Choose start and end colors, then generate linear or radial gradient CSS code
- Color palette: Save frequently used colors, stored in localStorage, with export support
How to Use
1. Pick a color: Click on the saturation/value panel, then drag to select the exact color. You can also type a value directly into the HEX, RGB or HSL fields — all formats update automatically.
2. Copy a color value: Click the 📋 button next to any color value to copy that format to your clipboard and paste it directly into your CSS or code.
3. Contrast check: Enter a foreground and background color, then click "Check" to view the WCAG contrast ratio and whether the text is readable on that background.
4. Generate a gradient: Pick a start and end color, select a direction, and the tool generates the CSS code automatically. Click copy to use it immediately.
Use Cases
Front-end development
When writing CSS, developers often need to fine-tune color values. Use this local tool to pick a color and get HEX/RGB/HSL formats instantly, without switching between multiple tools. The gradient generator outputs ready-to-use CSS code.
UI design and configuration
When designing interfaces, you need to verify color combinations meet accessibility standards. The contrast checker validates whether text and background colors pass WCAG levels, and the palette feature stores your color set for quick reuse.
Design across scenarios
Different projects need different color values. Save your palette, then copy the matching format for web, print, or other use cases.
Extended Knowledge
Color models: RGB is an additive model (used on screens); CMYK is a subtractive model (cyan, magenta, yellow, black — used in print); HSL separates color into hue, saturation and lightness dimensions, which is more intuitive for humans. HEX is simply a compact way of writing RGB values and is commonly used in CSS.
WCAG standards: The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background so that all users can read the content. AA level is the minimum requirement, while AAA level is a stronger standard. Large text (≥18pt or 14pt bold) requires a lower contrast ratio.
FAQ
What is the difference between HEX and RGB?
HEX uses a six-digit hexadecimal number to represent a color (e.g. #FF5733) and is common in CSS and design tools. RGB uses three 0-255 values for the red, green and blue channels (e.g. rgb(255,87,51)) and is common in code. They represent the same color in different formats — this tool converts between them instantly.
When should I use HSL instead of RGB?
HSL (hue, saturation, lightness) is more intuitive: adjusting the hue changes the color, while saturation and lightness control vividness and brightness. With RGB you must adjust three channels at once. For design tweaks, HSL is recommended; for coding, RGB/HEX is more common.
What is the WCAG contrast standard?
WCAG 2.1 requires: AA normal text ≥4.5:1, large text ≥3:1; AAA normal text ≥7:1, large text ≥4.5:1. This tool calculates the contrast ratio live and tells you whether it passes, so designers never have to guess.
Will my palette data be lost?
Palette data is saved in your browser's localStorage and persists after you close the page. However, clearing browser data will delete it. Use the Export feature to back up your palette.
Does the tool support CMYK?
Yes. CMYK is a subtractive color mode (cyan, magenta, yellow, black). This tool converts between CMYK and HEX/RGB/HSL. Note that screens display in RGB and print uses CMYK, so conversions may show small differences.
Which formats does the gradient generator support?
It supports linear gradients (linear-gradient) and radial gradients (radial-gradient), with customizable direction, angles and multiple colors. The generated CSS code can be copied straight into your stylesheet.