Color Converter
Pick, convert, and copy colors between HEX, RGB, HSL, and HSB formats. Includes color picker, random colors, contrast checker, and history.
About this tool
A complete color toolkit for designers and developers. Pick any color with the native color picker or type values directly into HEX, RGB, HSL, or HSB fields — all formats sync in realtime. Check WCAG contrast ratios against white and black backgrounds with AA/AAA grades. Generate random colors for inspiration with a tap or spacebar. Your last 20 colors are saved locally and appear in the history grid — tap any swatch to reload it. Copy individual formats or all four at once. Works fully offline.
Details
- Category
- Utilities
- Version
- 1.0.0
- Size
- 14 KB
- Updated
- Jun 2026
Frequently Asked Questions
How does the contrast checker work?
We calculate the WCAG 2.1 relative luminance and contrast ratio of your chosen color against pure white (#FFFFFF) and pure black (#000000). The grade (AAA, AA, or Fail) follows WCAG normal text thresholds: AAA requires ≥7:1, AA requires ≥4.5:1. This tells you at a glance whether your text color will be readable on white or dark backgrounds.
Is the color picker the native browser picker?
Yes. We use the native HTML <input type="color"> which opens your operating system's color picker. On macOS this is the system color panel with sliders, on Windows it's the Color dialog, and on mobile it varies by OS. You can also type hex/RGB/HSL values directly and they sync bidirectionally.
Can I copy colors in CSS-ready format?
Yes. Each format has its own Copy button that copies the CSS-ready string: #B8F634 for HEX, rgb(184, 246, 52) for RGB, and hsl(79, 88%, 58%) for HSL. The Copy All button copies all three formats with labels for easy pasting into your stylesheet or design tool.
Are my recent colors saved?
Yes, your last 20 unique colors are saved to localStorage and persist across sessions. Tap any swatch in the history grid to load it back. Use Clear History to remove them all.
