Color Converter
Convert between HEX, RGB, HSL, OKLCH, CMYK, and Display P3 instantly. Adjust channels with live sliders, preview contrast on light and dark surfaces, and copy ready-to-use CSS syntax.
On Light Background
Aa
#14b8a6
On Dark Background
Aa
#14b8a6
Converted CSS & design formats
Click any format card to copy the ready-to-use color value.
Try common input syntaxes
Paste legacy comma-separated values, modern space-separated CSS syntax, Lab, LCH, HWB, OKLab, Display P3, or named HTML colors.
Modern CSS variable
--color: oklch(70.38% 0.123 182.5);How Our Color Converter Works
Translate any web or print color value into every standard CSS format in three simple steps.
Paste or Pick Any Color
Enter a HEX code, RGB, HSL, OKLCH, CMYK, or named CSS color—or choose a shade directly from the color picker.
Fine-Tune Channels & Opacity
Use the interactive RGBA sliders to tweak individual color channels or alpha transparency while watching all formats update live.
Copy Ready-to-Use Code
Click any format card—HEX, RGB, HSL, OKLCH, Display P3, or CMYK—to copy the exact CSS syntax to your clipboard.
Key features
Built for web designers, frontend engineers, and print creators working across color spaces.
Modern CSS Color Spaces
Convert between classic HEX/RGB/HSL and modern CSS Color 4 formats including OKLCH, OKLab, Lab, LCH, and Display P3.
Alpha & Print Reference
Preserves alpha transparency across 8-digit HEX and modern slash syntax, plus provides instant CMYK approximations for print mockups.
Browser-Local Processing
Your files are processed directly in your browser and are not uploaded to Pinatool's servers.
Frequently Asked Questions
Everything you need to know about color formats, conversions, and gamut spaces.
How do I convert HEX to RGB or HSL?
Paste any 3-digit, 6-digit, or 8-digit HEX code into the input field or choose a color with the picker. The tool immediately calculates integer RGB/RGBA channels, HSL/HSLA percentages, and CSS syntaxes ready to paste into your stylesheet.
What is OKLCH and why should I use it?
OKLCH is a modern CSS color space designed around human visual perception. Unlike HSL, where hues at the same lightness level appear to have wildly varying brightness to the human eye, OKLCH keeps perceived lightness uniform across all hues. This makes generating accessible button hover states and harmonious theme palettes much more predictable.
Can I convert transparent colors with alpha channels?
Yes. Enter an eight-digit HEX (#rrggbbaa), an rgba() string, or a modern space-separated format with a slash (e.g. rgb(37 99 235 / 80%)). The transparency channel is preserved across all formats that support opacity.
Is RGB to CMYK conversion 100% exact?
No. The displayed CMYK value is a standard mathematical approximation suitable for mockups and communication. Professional print reproduction depends heavily on paper stock, ink types, press calibration, and specific ICC profiles. For commercial printing, always convert in software calibrated with your printer’s specific profile.
Are my color values sent to an external server?
No. All color math, gamut mapping, channel adjustments, and code exports happen 100% locally in your web browser. No color data ever leaves your device.
Explore More Tools
More free tools for color accessibility, shade generation, and palette extraction.