All Tools About Blog Code Examples MCP Server — Use tools from AI agents
Workflows Paste Anything — Smart Detector Tool Pipeline Builder Bulk / Batch Processor
JSON Tools JSON Formatter & Beautifier JSON Validator JSON to CSV Converter JSON to TypeScript Generator JSON to Python Converter JSON Flatten & Unflatten jq Playground — JSON Processor JSON Mock Data Generator JSON Schema Validator JSONPath Evaluator JSON Schema Generator JSON Patch / Diff Generator
Encoding Tools Base64 Encoder / Decoder URL Encoder / Decoder Hash Generator (MD5/SHA) JWT Decoder HTML Entity Encoder / Decoder Image to Base64 Converter String Escape / Unescape Tool ASCII / Binary / Hex Converter Protobuf Decoder — Wire Format Viewer Encoding Detective — Mojibake Repair
Formatters HTML Beautifier XML Formatter & Validator SQL Formatter & Beautifier CSS Minifier & Beautifier JavaScript Minifier & Beautifier TOML Formatter & Converter YAML Formatter, Validator & Minifier
Generators UUID Generator Password Generator QR Code Generator Lorem Ipsum Generator Cron Expression Generator chmod Calculator Slug / URL Generator .gitignore Generator
Testing Tools Regex Tester Regex Explainer — Plain English
Security Tools HMAC Generator Content Security Policy Generator SSH Key Generator SSL Certificate Decoder CORS Header Builder & Generator
Design Tools Color Picker & Converter Placeholder Image Generator SVG Path Editor & Visualizer
Comparison Tools Diff Checker / Text Compare .env Diff & Merge
Converters JSON-YAML Converter Epoch / Unix Timestamp Converter Markdown to HTML Preview Curl to Fetch/Axios Converter Tailwind CSS Converter OpenAPI to TypeScript Text Case Converter Number Base Converter CSV Viewer & Editor Date & Time Format Converter SQL to MongoDB & N1QL Converter Semver Calculator & Comparator Byte / Size Calculator URL Parser & Builder Glob to Regex Converter Math Expression Evaluator SQL DDL to TypeScript Converter Duration / Time Calculator CSS Unit Converter — px, rem, em, pt, vw, vh JSON to Go Struct Converter HTML to Markdown Converter CSV to SQL Converter SQL to ORM Converter
Reference HTTP Status Code Explorer Git Command Builder GraphQL Schema Explorer MIME Type Lookup
Text Tools Word & Character Counter Text Line Sorter, Deduplicator & Tools
Networking Tools Subnet / CIDR Calculator
DevOps Tools Nginx Config Generator Docker Compose Validator Robots.txt Generator & Validator GitHub Actions YAML Validator

Color Picker & Converter

Pick colors and convert between HEX, RGB, and HSL formats instantly. Free, client-side, no signup.

Your data never leaves your browser Available via MCP
#6c63ff
HEX#6c63ff
RGBrgb(108, 99, 255)
HSLhsl(243, 100%, 69%)
Next steps
CSS Minifier → QR Code → HTML Beautifier → Base Converter →

How to Use

  1. Use the color picker to select a color visually, or type a HEX value directly.
  2. Adjust individual R, G, B or H, S, L values for precise control.
  3. Click Copy next to any format (HEX, RGB, HSL) to copy the CSS-ready value.

Understanding Color Models

HEX colors are the most common format in web development. A HEX color is a six-digit hexadecimal number preceded by #. The first two digits represent red, the middle two green, and the last two blue. Each pair ranges from 00 (none) to ff (maximum). Shorthand notation (#f60) expands to the full form (#ff6600).

RGB (Red, Green, Blue) is the additive color model used by screens. Each channel accepts values from 0 to 255. Black is rgb(0, 0, 0) and white is rgb(255, 255, 255). CSS also supports rgba() with an alpha channel for transparency.

HSL (Hue, Saturation, Lightness) is designed to be more intuitive. Hue is a degree on the color wheel (0° = red, 120° = green, 240° = blue). Saturation controls color intensity (0% = gray, 100% = vivid). Lightness controls brightness (0% = black, 50% = pure color, 100% = white). HSL makes it easy to create color palettes by varying just one dimension.

CSS Color Tips

  • Use hsl() in CSS for easily readable color schemes — change the hue to shift colors while keeping consistent saturation and lightness
  • CSS custom properties work great with HSL: --brand-hue: 243; then hsl(var(--brand-hue), 100%, 69%)
  • Modern CSS supports oklch() and oklab() for perceptually uniform colors, where equal numeric changes produce equal visual changes
  • Use the color-mix() function in modern CSS to blend colors: color-mix(in srgb, #ff0000, #0000ff 50%)

Color Accessibility

WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). When selecting colors for text and backgrounds, verify the contrast ratio meets these thresholds. Tools like the browser's DevTools accessibility panel can check contrast ratios automatically.

Related Tools

Format color palette configs with the JSON Formatter or convert to YAML. Convert hex color values between bases with the Number Base Converter. Generate QR codes with custom colors. Create random hex strings for programmatic colors. Style CSS and HTML with your chosen colors. Generate placeholder text for design mockups.

Frequently Asked Questions

What color formats are supported?
This tool supports HEX (e.g., #ff6600), RGB (e.g., rgb(255, 102, 0)), and HSL (e.g., hsl(24, 100%, 50%)). You can input in any format and instantly see conversions to all others.
What is the difference between RGB and HSL?
RGB (Red, Green, Blue) defines colors by mixing light intensities from 0-255 for each channel. HSL (Hue, Saturation, Lightness) is more intuitive: Hue is the color angle (0-360°), Saturation is intensity (0-100%), and Lightness is brightness (0-100%). HSL is often easier for designers to work with because adjusting one property creates predictable results.
How do I get the CSS value for a color?
Click any Copy button next to the HEX, RGB, or HSL value to copy the CSS-ready color string to your clipboard. All three formats work directly in CSS properties like color, background-color, and border-color.
Is my data safe?
Yes. All color conversions happen entirely in your browser using JavaScript. No data is sent to any server.

Code Examples

Learn how to use this tool programmatically in your favorite language.

Convert colors

Related Tools

Placeholder Image Generator

Generate placeholder images with custom dimensions, colors, and text. Download as SVG, PNG, or JPEG.

SVG Path Editor & Visualizer

Edit, visualize, and understand SVG path commands. Live preview with command breakdown, control points, and formatting.

Paste Anything — Smart Detector

Paste any text and instantly detect its format — JSON, JWT, Base64, UUID, SQL, timestamps, colors, and more.

Tool Pipeline Builder

Chain tools together — output of one step feeds into the next. Deep-link sharing.

JSON Formatter & Beautifier

Format and beautify JSON data with syntax highlighting and tree view.

Use this tool from AI agents. The CodeTidy MCP Server lets Claude, Cursor, and other AI agents use this tool and 46 others directly. One command: npx @codetidy/mcp

Drop file to load