Color Format Converter
Convert between HEX, RGB, HSL, HSV, LAB, LCH, OKLCH, CMYK, Display P3, and CSS color names.
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL?
HEX is a compact notation (#FF5733) using base-16 values for red, green, and blue channels. RGB uses decimal values (rgb(255,87,51)). HSL describes color by Hue (0-360°), Saturation (0-100%), and Lightness (0-100%), which is more intuitive for creating color variations. Tip: use HSL when you need to quickly create lighter or darker variants of a color.
What is OKLCH and why should I use it?
OKLCH (Lightness, Chroma, Hue) is a perceptually uniform color space — meaning equal numeric changes produce equal visual differences. Unlike HSL, which can have uneven brightness across hues, OKLCH ensures consistent perceived lightness. Tip: use OKLCH for design tokens and color scales; it's supported in CSS via oklch() and is the recommended format for Tailwind v4.
How do I convert colors in CSS?
Modern CSS supports multiple color formats natively: hex (#fff), rgb(), hsl(), oklch(), lab(), and lch(). Browsers interpret all of them. This tool converts between formats instantly so you can use whichever format your project prefers. Tip: CSS color-mix() can blend colors in any color space without manual conversion.
What color format is best for web development?
HEX is the most compact and widely used in existing codebases. HSL is best for manual adjustments (lighten, darken, desaturate). OKLCH is the most accurate for generating uniform palettes. Tip: for new projects, consider oklch() for theme colors and hex for fixed brand colors.
How do I handle color transparency/alpha?
Add an alpha channel: rgba(255,87,51,0.5), hsla(14,100%,60%,0.5), #FF573380 (last two hex digits), or oklch(0.65 0.2 30 / 0.5). All modern browsers support 8-digit hex and the slash syntax for alpha. Tip: in Tailwind, use the shorthand bg-red-500/50 for 50% opacity.