Back to Projects
Design ToolsFeatured
Color Format Converter
Convert any color between HEX, RGB, RGBA, HSL, HSLA, HWB, and OKLCH instantly in your browser. Visual color picker, one-click copy, real-time preview. 100% client-side.
ColorCSSDesign ToolsDeveloper ToolsNext.jsTypeScript
Start Similar ProjectAbout the Project
Color Format Converter — HEX, RGB, HSL, HWB & OKLCH in One Place
Color Format Converter is a free, browser-based tool that converts any color value between every major CSS format instantly. Paste a HEX code, an rgb() function, a named color, or even an oklch() value — and get all eight formats back at once. No install, no account, works offline.
The Problem
Designers and developers constantly move colors between contexts that use different formats. Figma gives you HEX. Tailwind config uses HEX or RGB. Your CSS design tokens use HSL. The new color space spec recommends OKLCH. And somewhere in your codebase there's an rgba() with an alpha channel.
Every conversion means opening a search tab, copying the wrong format, or mentally doing the math. Most online converters handle one format at a time — you paste a HEX, get an RGB, then have to paste that RGB to get HSL.
Color Format Converter outputs all formats simultaneously. One paste, everything.
How It Works
Universal Input Parsing
The tool accepts any valid CSS color string as input:
#ec4899or#EC4899— 3, 4, 6, or 8 digit HEXrgb(236, 72, 153)orrgb(236 72 153)— legacy and modern syntaxrgba(236, 72, 153, 0.8)— with alpha channelhsl(330, 81%, 60%)orhsl(330 81% 60%)— HSL both syntaxeshsla(330, 81%, 60%, 0.8)— HSLAhwb(330 18% 7%)— HWB (modern CSS)oklch(63.49% 0.2437 0deg)— OKLCH perceptual color spacehotpink,cornflowerblue,rebeccapurple— all 140+ named CSS colors
Type or paste any of these and the tool parses it instantly, updating all output formats in real time.
Visual Color Picker
Click the color swatch on the left to open the browser's native color picker. Select any color visually and the text input updates automatically with the chosen HEX value. All eight output formats update in sync.
All Formats at Once
Every valid input produces eight output cards simultaneously:
| Format | Example |
|--------|---------|
| HEX | #EC4899 |
| HEX with alpha | #EC4899FF |
| RGB | rgb(236 72 153) |
| RGBA | rgba(236, 72, 153, 1) |
| HSL | hsl(330 81.2% 60.4%) |
| HSLA | hsla(330, 81.2%, 60.4%, 1) |
| HWB | hwb(330 18.0% 7.8%) |
| OKLCH | oklch(63.49% 0.2437 0.00) |
One-Click Copy
Every format card has a copy button. One click puts the value on your clipboard and shows a confirmation toast. There's also a "Copy all formats" button that copies every value in label: value format — useful for pasting into a doc or token file.
Color Preview Swatch
A full-width preview swatch below the input shows the exact rendered color including any alpha channel. As you type, it updates in real time — no submit button needed.
Key Features
- 8 output formats — HEX, HEX+alpha, RGB, RGBA, HSL, HSLA, HWB, OKLCH
- Universal input — accepts any CSS color string including named colors
- Native color picker — visual selection via browser's built-in picker
- Real-time updates — all formats refresh on every keystroke
- One-click copy per format, plus "Copy all" button
- Alpha channel support — RGBA, HSLA, 8-digit HEX all handled correctly
- OKLCH support — perceptually uniform color space for modern CSS
- 100% client-side — no server, no uploads, works offline
- Inline validation — red border + error message for invalid input
Use Cases
Design Token Workflows
Your design system defines colors in one format (often HEX from Figma). Your CSS custom properties use HSL. Your Tailwind config uses RGB fractions. Paste the HEX once and copy whichever format each context needs — no manual conversion, no rounding errors.
OKLCH Migration
Modern CSS color spaces are gaining adoption. Convert your existing HEX or HSL values to OKLCH to verify they fall in the expected perceptual range before migrating your design tokens.
Debugging Opacity
When a color isn't rendering as expected in a browser, paste the rgba() or hsla() value to see the clean HEX equivalent and verify the alpha channel is what you expect.
Quick Named Color Lookup
Type rebeccapurple or cornflowerblue to instantly see the HEX and RGB values behind any named CSS color — useful for documentation and design reviews.
Technical Implementation
Architecture
- Next.js 16 with App Router (TypeScript strict mode)
- Zero color libraries — all math implemented from scratch using the CSS Color Level 4 spec
- Web Crypto API not used — pure floating point arithmetic for all conversions
- Tailwind CSS v4 with custom
--brand/--brand-accentOKLCH tokens - shadcn/ui components (new-york style) + Radix UI
- Framer Motion for staggered card animations
Color Math
All conversions go through an internal RGBA representation (red, green, blue in 0–255, alpha in 0–1):
- HEX ↔ RGB: direct bit manipulation
- RGB ↔ HSL: standard hue-saturation-lightness algorithm
- RGB ↔ HWB: derived from HSL hue with whiteness/blackness components
- RGB ↔ OKLCH: full linear RGB → LMS → OKLab → LCH pipeline using the Björn Ottosson matrices
Try it now: color-format-converter.tools.jagodana.com
The Challenge
The client needed a robust design tools solution that could scale with their growing user base while maintaining a seamless user experience across all devices.
The Solution
We built a modern application using Color and CSS, focusing on performance, accessibility, and a delightful user experience.
Project Details
Category
Design Tools
Technologies
Color,CSS,Design Tools,Developer Tools,Next.js,TypeScript
Date
April 2026
Related Projects
More work in Design Tools
