Color Picker & Converter
Pick, convert, and explore colors between HEX, RGB, and HSL — with contrast checking and harmonies.
CSS Color Formats
#3B82F6rgb(59, 130, 246)rgba(59, 130, 246, 1)hsl(217, 91%, 60%)hsla(217, 91%, 60%, 1)cmyk(76%, 47%, 0%, 4%)Contrast Ratio
White text
3.68:1
Black text
5.71:1
Color Harmonies
Complementary
Analogous
Triadic
Split-Complementary
Tetradic
How it works: Use the color picker canvas to select a hue and saturation/lightness, or type exact values in HEX, RGB, or HSL. The tool calculates contrast ratios against white and black for accessibility (WCAG AA/AAA). Color harmonies help you find complementary and triadic palettes. All processing happens locally in your browser.
Private by design
All color calculations happen locally in your browser. Your colors never leave your device.
Visual picker + inputs
Drag the color canvas or type exact HEX, RGB, or HSL values. Every format stays in sync.
WCAG contrast checker
Instantly check contrast ratios against white and black backgrounds for accessibility compliance.
How color conversion works
Colors on the web are typically represented in one of three models. HEX codes are six-digit hexadecimal numbers that encode red, green, and blue channels. RGB uses decimal values from 0 to 255 for each channel. HSL describes color by its position on a hue wheel, plus saturation and lightness percentages.
This tool lets you work in whichever model feels natural. Type a HEX code like #3B82F6 and the RGB values (59, 130, 246) and HSL values (217°, 91%, 60%) appear instantly. Adjust any slider and watch all other formats update in real time.
Accessibility and color contrast
Not every color works well with every background. The WCAG (Web Content Accessibility Guidelines) define minimum contrast ratios to ensure text is readable for people with visual impairments. This tool calculates the contrast ratio of your chosen color against both pure white and pure black, and tells you whether it passes AA or AAA standards.
Color harmonies help designers build cohesive palettes. Complementary colors create high contrast and visual tension. Analogous colors feel harmonious and calm. Triadic palettes are balanced and vibrant. Use the harmony cards to discover related colors, then click any swatch to make it your active color.
Frequently asked questions
›What is a color picker and why would I need one?
A color picker is a tool that lets you select, explore, and convert colors between formats like HEX, RGB, and HSL. Web developers, graphic designers, and UI/UX professionals use color pickers daily when writing CSS, designing interfaces, or ensuring accessible contrast ratios.
›How do I convert HEX to RGB?
Enter a HEX color code (e.g. #3B82F6) in the HEX tab, and the tool instantly computes the RGB values (59, 130, 246) and HSL values. You can also drag the color picker canvas to visually find a color and see all formats update live.
›What is the difference between RGB and HSL?
RGB (Red, Green, Blue) defines a color by mixing three primary light channels, each from 0 to 255. HSL (Hue, Saturation, Lightness) is more intuitive for humans — Hue is a color wheel degree (0–360), Saturation is intensity (0–100%), and Lightness is brightness (0–100%). HSL makes it easier to create lighter/darker shades of the same color.
›What is a good contrast ratio for accessibility?
WCAG 2.1 recommends a contrast ratio of at least 4.5:1 for normal text (Level AA) and 7:1 for enhanced accessibility (Level AAA). Large text (18pt+ or 14pt+ bold) needs at least 3:1. This tool checks your selected color against both white and black backgrounds and labels the result accordingly.
›What are color harmonies?
Color harmonies are mathematically related colors based on their position on the color wheel. Complementary colors sit opposite each other (180° apart). Triadic colors form an equilateral triangle (120° apart). Analogous colors are neighbors (±30°). Split-complementary and tetradic schemes offer richer palettes for design work.
›Can I use this tool to pick colors for CSS?
Yes. The tool outputs your color in the most common CSS formats: HEX, rgb(), rgba(), hsl(), hsla(), and cmyk(). Each format has a one-click copy button so you can paste directly into your stylesheets.
›Does this tool send my color data to a server?
No. All color conversion, contrast calculation, and palette generation run entirely in your browser using JavaScript. Your selected colors are never transmitted, logged, or stored on any server.
›How does the contrast ratio calculation work?
The tool calculates relative luminance for the selected color and for white/black backgrounds using the WCAG formula: L = 0.2126*R + 0.7152*G + 0.0722*B, where R, G, and B are linearized sRGB values. The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where the lighter luminance is always the numerator.
›What is CMYK and why does it matter?
CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in printing. Unlike RGB which is for screens, CMYK represents how ink absorbs light. The tool converts your RGB color to approximate CMYK percentages, useful when communicating with print designers or preparing assets for physical media.
›Is the eyedropper / pipette tool available?
The tool includes a visual canvas picker with hue and saturation/lightness controls. For picking colors from your screen or other browser tabs, use your operating system's native color picker or browser extensions. The Random button generates a random color instantly for inspiration.
More free developer tools
Part of our growing tool belt — all client-side, all free.