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

Related Products

on Gumroad

⚡ $29

Developer Productivity Bundle

Stop rebuilding the same setup every project. 51 VSCode snippets, 40 Git aliases, 5 Docker Compose stacks, 5 GitHub Actions workflows, 5 README templates, and a dotfiles kit. Set up a professional dev environment in under an hour.

Buy on Gumroad →

🤖 $19

AI Prompt Engineering Toolkit

Production-ready prompt templates, chain-of-thought workflows, and API integration code for GPT-4, Claude, Gemini, and any instruction-following LLM.

Buy on Gumroad →

🛠️ $19

Developer Productivity Toolkit

Complete dev environment setup: VS Code settings, keybindings, snippets, shell aliases, Git hooks, tmux config, and Starship prompt. Copy, paste, code faster.

Buy on Gumroad →