Maintain contrast
Aim for WCAG 2.1 contrast ratios of 4.5:1 for normal text and 3:1 for large text. Test under light and dark themes.
Color Picker & Converter
Generate Palette
Comparing color models
Designers and developers switch between color models to match their tools. Use this converter to translate between HEX, RGB, HSL, and HSV representations instantly.
| Model | Components | Best for |
|---|---|---|
| HEX | #RRGGBB hexadecimal | CSS variables, design tokens, static palettes |
| RGB | Red, Green, Blue 0–255 | Canvas drawing, LED strips, low-level rendering |
| HSL | Hue (°), Saturation %, Lightness % | Design adjustments, generating tints and shades |
| HSV | Hue (°), Saturation %, Value % | Image editors, selecting vivid colors from palettes |
Color accessibility checklist
Consistent color choices keep interfaces legible for everyone. Apply these accessibility practices to your palette.
Avoid color-only cues
Pair color emphasis with text labels, icons, or patterns so color-blind users understand status changes.
Test variations
Preview palettes against simulated color vision deficiencies and ensure critical information remains distinguishable.
Reproduce a color conversion
Enter #3B82F6: RGB is rgb(59,130,246), HSL rounds to hsl(217,91%,60%), and HSV rounds to hsv(217,76%,96%).
JavaScript — HEX to RGB
const hex = '#3B82F6';
const rgb = [1, 3, 5].map(i => parseInt(hex.slice(i, i + 2), 16));
console.log(rgb); // [59, 130, 246]Python 3 — HEX to RGB
value = '#3B82F6'
rgb = tuple(int(value[i:i + 2], 16) for i in (1, 3, 5))
print(rgb) # (59, 130, 246)Use six hexadecimal digits. RGB/HSL input uses integer channels; HSV is a calculated output. This tool does not calculate contrast ratios or simulate color blindness. Check contrast separately before using a palette for text.
Color tool FAQ
What is the difference between HEX, RGB, and HSL?
HEX is hexadecimal RGB, RGB lists decimal channel values, and HSL represents hue, saturation, and lightness—ideal for adjusting brightness programmatically.
How can I ensure color accessibility?
Check contrast ratios against WCAG guidelines and avoid conveying meaning with color alone. Simulate color blindness before production.
Does the tool modify colors on a server?
No. Shade calculations and conversions run in your browser, so brand palettes and design tokens stay private.
Can I generate complementary palettes automatically?
Yes. The palette generator suggests complementary, analogous, triadic, and monochromatic variations to speed up theme design.
How do I convert colors programmatically?
Expand Reproduce a color conversion for JavaScript and Python examples that convert six-digit HEX to RGB. HSL and HSV values are also shown by the interactive tool.
Choose a developer tool
- AES-GCM encrypt/decrypt
Protect text with AES-GCM and PBKDF2 tokens that stay on-device.
- Hash generator
Generate MD5, SHA-1, and SHA-256 digests locally with Web Workers.
- Base64 encoder & decoder
Convert any text to or from Base64 without leaving your browser.
- JWT verifier
Decode claims and verify HMAC signatures without network calls.
- JSON formatter
Validate, format, and diff JSON without network calls.
More tools for data, text and testing
- XML formatter
Format, minify and convert XML to JSON locally.
- Regex tester
Experiment with regular expressions and capture groups locally.
- URL encoder and inspector
Encode components and inspect query parameters locally.
- UUID v4 generator
Create collision-resistant UUID v4 identifiers using Web Crypto.
- Secure password generator
Build strong passwords with custom length, charset, and entropy.
- Epoch time converter
Convert Unix timestamps into local, UTC and ISO dates.
- Text transformer
Convert case, slugify, and clean strings on-device.
- QR code builder
Design QR codes for text, Wi-Fi, contacts, email, or SMS locally.
- Barcode maker
Generate EAN and Code 128 barcodes and download crisp PNG output.
- IP lookup
Look up your public IP using disclosed external services.
- Lorem ipsum generator
Produce paragraphs, lists, and markdown filler text fast.
- Image compressor
Compress JPG, PNG, WebP and AVIF images to a target size in your browser. Preview results, process batches and download images individually or as a ZIP.
- Image converter
Convert WebP and AVIF images to JPG or PNG locally. Batch convert supported images, control quality and transparency, preview results and download a ZIP.
- JSON ↔ CSV
Convert JSON and NDJSON to CSV for Excel, or CSV to JSON, locally. Flatten nested objects, choose columns and delimiters, and download UTF-8 results.
- Base64 ↔ image
Decode Base64 or data URIs to an image preview and download, or encode an image file to Base64. Inspect dimensions and size without uploading your image.
- HEIC → JPG
Convert HEIC and HEIF photos to JPG or PNG in your browser. Choose quality, preview converted images and download individual photos or a batch ZIP.
- Base64 → PDF
Decode Base64 to PDF locally, preview pages with zoom and navigation, and download the decoded PDF. Supports raw Base64 and application/pdf data URIs.
Run the AES interoperability guide or read how these tools are checked.