Skip to content
ALL DEVELOPER TOOLS56
JSON FormatterTXT → JSONJSON to CSVJSON → CSVCSV to JSONCSV → JSONSQL FormatterSQL → SQLMarkdown to HTMLMD → HTMLHTML to MarkdownHTML → MDXML FormatterXML → XMLBase64 Encode/DecodeTXT → B64URL Encode/DecodeTXT → URLJWT DecoderJWT → JSONHTML Entity Encode/DecodeTXT → HTMLUUID Generator— → UUIDPassword Generator— → TXTHash GeneratorTXT → HASHLorem Ipsum Generator— → TXTQR Code GeneratorTXT → PNGColor Picker & Converter— → HEXCSS Gradient Generator— → CSSBox Shadow Generator— → CSSRegex TesterTXT → MATCHCron Expression GeneratorTXT → CRONTimestamp ConverterNUM → DATEText DiffTXT → DIFFText Case ConverterTXT → TXTWord CounterTXT → STATSSubtitle ConverterSUBS → SRT · VTT · ASSYAML to JSONYAML → JSONJSON to YAMLJSON → YAMLYAML FormatterYAML → YAMLJSON MinifyJSON → JSONSort & Dedupe LinesTXT → TXTLine Ending ConverterTXT → CRLF · LF · CRXLSX to CSVXLSX → CSVCharset ConverterTEXT → UTF-8HAR ViewerHAR → TABLE · HARJWT EncoderJSON → JWTHMAC GeneratorTXT → MACFile ChecksumFILE → VERDICTWi-Fi QR Code Generator— → QRChmod CalculatorOCTAL → RWXHTTP Status CodesCODE → MEANINGByte ConverterSIZE → UNITSTime Zone ConverterTIME → ZONESAspect Ratio CalculatorSIZE → RATIOURL ParserURL → PARTSExtract ArchiveARCHIVE → FILES · ZIPCreate ZIPFILES → ZIPUnzip FilesZIP → FILESDOCX to MarkdownDOCX → MDSVG OptimizerSVG → SVGBarcode Generator— → BARCODEQR Code ReaderIMG → TEXTVCF to CSVVCF → CSVICS to CSVICS → CSVCSV to Markdown TableCSV → MDBcrypt Generator— → HASH
ENGINE NATIVEACCEPTS NONE

Color Picker & Converter

NATIVETOOL 67 OF 190

Color Picker & Converter — HEX, RGB, HSL

Pick a color visually or convert between HEX, RGB, and HSL formats.

ENGINENATIVE
ACCEPTSNONE
MAX SIZENONE
UPLOADNEVER
01Pick a color using the swatch or enter a HEX, RGB, or HSL value.
02The other formats update automatically.
03Click any value to copy it to your clipboard.

About Color Picker & Converter

Working with colors in CSS, design tools, or brand guidelines? This tool pairs your browser's native color picker with precise input fields for HEX, RGB, and HSL, and all three update in real time as you change any one of them — making it easy to convert between color systems. Need the HEX code for an RGB color your designer specified? Just enter the RGB values and copy the HEX output. Working in HSL and need the RGB equivalent? Type a hue, saturation, and lightness and read the RGB values instantly; hue and saturation are held while you edit those fields, so taking lightness down to black and back returns the color you started with rather than grey. Copy any single format with the button beside it, or copy all three at once. A CSS block under the large preview shows the same color as hex, rgb(), and hsl() declarations, ready to paste into a stylesheet. Whether you are fine-tuning a website color scheme, converting colors between formats for documentation, or exploring color options for a design project, this tool handles it all.

Questions

What color formats are supported?

HEX (#RRGGBB), RGB (0-255 per channel), and HSL (hue 0-360°, saturation 0-100%, lightness 0-100%). All formats update in sync.

Why use HSL instead of HEX or RGB?

HSL separates hue from saturation and lightness, so you can dial in a tint or shade without re-mixing the entire color. Designers prefer it for building palettes, hover states, and accessible contrast pairs.

Can I copy the color in CSS-ready form?

Yes. Click any value to copy it to your clipboard exactly as it should appear in CSS — for example #56b8e6, rgb(86 184 230), or hsl(202 75% 62%).

If I slide lightness down to 0, do I lose my color?

No. Hue and saturation are held while you edit the HSL fields, so taking lightness to black or white and back returns the exact color you started with instead of grey. Entering a new HEX or RGB value resyncs all three formats to that color.

Can I paste a 3-digit hex like #f80?

Yes — shorthand expands each digit, so #f80 becomes #ff8800, and the # itself is optional. A half-typed value is ignored until it parses, so the other fields never flash a wrong color mid-edit.

Is my file uploaded to a server?

No. Transmute processes everything locally in your browser using JavaScript and WebAssembly. Your files never leave your device — there is no server, no upload, no cloud processing.

Related

CSS Gradient GeneratorBuild CSS gradients visually — linear, radial, and conic. Drag color stops, fine-tune angles, and copy production-ready CSS in one click.— → CSSBox Shadow GeneratorBuild CSS box shadows visually with multiple stacked layers, inset toggle, and live preview. Copy production-ready CSS in one click.— → CSSImage Color PaletteExtract the dominant colors from any image using median-cut quantization. Copy hex codes to the clipboard for design, branding, or CSS work.IMG → HEXQR Code GeneratorGenerate a scannable QR code from any URL or text you paste, in the colors you choose. Save it as a PNG bitmap or as a scalable SVG.TXT → PNG