Color Picker & Code Converter

Pick a color to get HEX, RGB, and HSL values with one-click copy. Instantly check WCAG AA/AAA contrast ratios against white and black, and generate a 5-shade palette for your design system.

Frequently Asked Questions

How do I convert HEX to RGB?▼

Enter a hex color code (like #3B82F6) in the picker. The tool instantly shows the RGB equivalent (59, 130, 246). Each pair of hex digits represents red, green, and blue intensity from 0-255.

What is WCAG contrast ratio?▼

WCAG contrast ratio measures the luminance difference between text and background colors. A ratio of 4.5:1 is required for AA compliance (normal text), and 7:1 for AAA. This tool checks your color against white and black backgrounds automatically.

What is the difference between HEX, RGB, and HSL?▼

HEX (#FF5733) is a compact hexadecimal format popular in CSS. RGB (255, 87, 51) defines red, green, blue intensity 0-255. HSL (11°, 100%, 60%) uses hue (color wheel degree), saturation (vividness), and lightness (brightness) — often more intuitive for designers.

How do I generate a color palette from one color?▼

Pick a base color and the tool generates a 5-shade palette from light to dark. These shades maintain the same hue but vary in lightness, perfect for creating consistent design systems with primary, hover, active, and background variants.

Share this tool: X / Twitter LinkedIn