Free Online Color Picker and Color Converter
Utilsly's color picker is a free, browser-based tool that lets you visually pick any color and instantly convert it between all major color formats including HEX, RGB, RGBA, HSL, HSLA, HSV, and CMYK. Everything runs locally in your browser — your data never leaves your device.
What Color Formats Are Supported?
This color converter supports HEX (with and without alpha), RGB, RGBA, HSL, HSLA, HSV, CMYK, CSS integer values, CSS custom properties, and Tailwind-style arbitrary color values. All conversions happen instantly as you pick or type — whether you need HEX to RGB, RGB to HSL, or any other combination.
How to Use the Color Picker
Click the large color swatch to open your browser's native color picker, or type a HEX, RGB, or HSL value directly. Use the Formats tab to copy any color format. Switch to Palette to generate complementary, triadic, analogous, or monochromatic color schemes. Use the Shades tab for tints and shades, Contrast for WCAG accessibility checking, Gradient to build CSS gradients, or Image to extract colors directly from a photo.
Supported Color Picker Features
- Color Format Conversion — Instantly convert between HEX, RGB, HSL, HSV, CMYK and more.
- Color Palette Generator — Generate complementary, triadic, analogous, split-complementary, tetradic, and monochromatic palettes.
- Tints & Shades — Get 9 lightness steps based on your color's hue and saturation.
- WCAG Contrast Checker — Check AA and AAA accessibility contrast ratios against white, black, and custom backgrounds.
- CSS Gradient Builder — Create linear, radial, and conic CSS gradients and copy the code.
- Image Color Picker — Upload any image and click to extract the exact color at any pixel.
- CSS Named Colors — Browse and pick from all 140+ CSS named colors.
- Color History — Keeps track of the last 20 colors you picked.
What is WCAG Contrast?
WCAG (Web Content Accessibility Guidelines) defines contrast ratio requirements for readable text. A ratio of 4.5:1 meets AA for normal text, 3:1 for large text, and 7:1 for AAA (enhanced). This WCAG contrast checker checks your color against white and black backgrounds automatically.
HEX vs RGB vs HSL — What's the Difference?
HEX is a compact hexadecimal representation used in HTML and CSS (e.g. #FF5733). RGB defines colors as red, green, blue values from 0–255. HSL (Hue, Saturation, Lightness) is more intuitive for designers and makes it easy to generate variations of a color. CMYK is used in print design. All are mathematically equivalent — this color converter converts between them instantly.