Color Picker
Pick any color visually and copy the value in HEX, RGB, HSL, or OKLCH. Enter a hex code to convert to other formats. Includes a color wheel, shade slider, and clipboard copy.
rgb(99, 102, 241)
hsl(239, 84%, 67%)
How to use the color picker
Pick a color or paste a hex code; HEX, RGB, HSL, and OKLCH update simultaneously.
Formula & explanation
RGB ⇄ HSL via the standard conversions. We display rounded values for legibility.
Examples
#6366f1 = rgb(99, 102, 241) = hsl(238, 84%, 67%).
Frequently asked questions
- What color formats does this show?
- HEX (#RRGGBB), RGB (0–255 per channel), and HSL (hue 0–360°, saturation and lightness as percentages).
- What is the difference between HSL and HSB/HSV?
- HSL and HSB/HSV both use hue and saturation, but their third axis differs: HSL uses lightness (50% = pure color), HSB uses brightness (100% = pure color). Most CSS workflows use HSL.
- Can I paste a color in formats other than hex?
- The text input accepts 6-digit hex codes only. Use the native color wheel to pick any color visually.
- Does this tool store my selected colors?
- No — everything stays in your browser's memory and is gone when you close the tab.
Related developer tools tools
- CSV to JSON ConverterConvert CSV to a JSON array of objects. Uses the first row as keys, handles quoted values, and detects common delimiters automatically.
- CSV to XML ConverterConvert CSV rows into XML elements with column headers as tag names. Useful for Excel exports, legacy systems, and ETL pipelines.
- CSV to YAML ConverterConvert CSV to YAML for use in config files, Ansible playbooks, and Kubernetes ConfigMaps. Uses the header row as YAML keys.
- Curl to Code ConverterPaste a curl command, get equivalent code in JavaScript (fetch/axios), Python (requests), or Go (net/http). Handles headers, JSON bodies, basic auth, and form data.
- JSON to TypeScriptGenerate TypeScript interfaces and types from any sample JSON. Handles nested objects, arrays, optional fields, and mixed types. Paste JSON, copy the interface.
- Token Counter for GPT, Claude, LlamaCount tokens for ChatGPT, GPT-4o, Claude, Llama, and Gemini before hitting context limits. Shows per-model token count, character count, and approximate API cost.