Color Converter
Convert between HEX, RGB, HSL, CMYK, and OKLCH color formats
Click to pick any color
#a855f7rgb(168, 85, 247)hsl(271, 91%, 65%)cmyk(32%, 66%, 0%, 3%)oklch(62.7% 0.233 303.9)About this tool
The Color Converter translates colors between HEX (#a855f7), RGB (rgb(168, 85, 247)), HSL (hsl(280, 89%, 65%)), CMYK (for print workflows), and OKLCH (a newer, perceptually-uniform format gaining CSS support) with a live color preview swatch. OKLCH is worth knowing about if you haven't used it yet: unlike HSL, equal steps in OKLCH's lightness or chroma values look like genuinely equal visual steps to the human eye, which is why it's increasingly used for generating color scales and palettes that don't have HSL's well-known problem of some hues looking much brighter or darker than others at the 'same' lightness value.
When to use it
- →Converting brand color hex codes from design tools into CSS variables
- →Generating lighter or darker color variants by adjusting HSL lightness
- →Matching colors between Figma (hex), Tailwind (HSL), and raw CSS
- →Translating colors from color pickers that output RGB to the format your codebase uses
- →Converting a screen color (RGB/HEX) to CMYK for a print design handoff
- →Getting an OKLCH value for a modern CSS color scale that needs perceptually-even lightness steps
Tips
- ◆HSL is the most intuitive format for programmatically generating color palettes — adjusting only the L value gives you tints and shades.
- ◆HEX shorthand (#fff) is 3-digit when each pair of hex digits is the same — #aabbcc = #abc.
- ◆CSS accepts all three formats interchangeably — use whichever is most readable in context.
- ◆CMYK is for print, not screens — a screen displays color as emitted RGB light, while a printer builds color from CMYK ink, so this conversion is a mathematical approximation, not what a printer will produce exactly (get a real proof for critical print work).
- ◆OKLCH's L (lightness) and C (chroma) values behave more predictably than HSL's when you're building a color scale — a 10% jump in OKLCH lightness looks like a 10% jump everywhere on the color wheel, which isn't true of HSL.
Frequently asked questions
When should I use HEX vs RGB vs HSL in CSS?
HEX is the most compact and widely used in design tokens and design tools. RGB is useful when you need to programmatically manipulate color channels or add alpha transparency (rgba). HSL is the most human-readable for adjusting hue, saturation, and lightness — ideal for design systems and dynamic theming.
Why does the CMYK conversion look slightly different from what my printer produces?
RGB-to-CMYK is a mathematical approximation — real print production uses ICC color profiles specific to the printer, paper, and ink, which this tool has no way to know. Treat the CMYK values here as a reasonable starting point, not a substitute for an actual print proof.
What is OKLCH and why would I use it over HSL?
OKLCH is a color format built on the OKLab color space, designed so that equal numeric changes in lightness or chroma correspond to equal *perceived* changes — a problem HSL has never solved (a 'lightness 50%' blue and a 'lightness 50%' yellow in HSL don't look equally bright to the eye; in OKLCH they do). It's increasingly supported directly in CSS (oklch()) for exactly this reason.
What is the difference between RGB and RGBA?
RGBA adds a fourth channel for alpha (opacity), where 0 is fully transparent and 1 is fully opaque. For example, rgba(168, 85, 247, 0.5) is 50% transparent purple. HEX also supports alpha as an 8-digit code (#a855f780), though browser support is slightly older.
Why does the same HEX color look different on different screens?
Color rendering varies with screen color profiles (sRGB, P3, etc.), brightness settings, and panel technology. OLED screens have deeper blacks and more saturated colors than IPS panels. Always test color choices on multiple devices for important UI work.
How do I choose colors that meet WCAG accessibility contrast requirements?
WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text against its background. Use the Color Palette Generator to explore combinations, and verify contrast ratios with a dedicated accessibility checker. High-lightness colors on white and low-lightness colors on dark backgrounds typically pass.