Modern CSS Color Space Converter (LCH, HWB, HEX & More)
Convert any color between HEX, RGB, RGBA, HSL, HWB, LCH, CMYK, NCol, and CSS Named Colors instantly. Type or paste a value in any field and every other format updates in real time, no button clicks required. Built for front-end developers, UI/UX designers, and print specialists who need accurate, fast color conversion without switching between tools.
Color Conversion Features
8 Color Formats Supported: HEX, RGB, HSL, HWB, LCH, CMYK, NCol, CSS Names all in one place
Real-Time Sync: Edit any field and all others update instantly, no page reload
Alpha Transparency Slider: Precise opacity control from 0% to 100% across all formats
Native Color Picker: Click the preview tile to use your device's built-in color picker
Print-Ready CMYK: Bridge screen and print workflows without extra tools
One-Click Copy: Copy any format to clipboard instantly
CSS Name Recognition: Type 'tomato' or 'cornflowerblue' and get the full conversion
No Install, No Account: Works instantly in any browser on desktop, tablet, or mobile
Perfect for CSS styling, Figma handoffs, brand palette management, print preparation, accessibility contrast checks, and any workflow where color format matters.
Frequently Asked Questions
Paste your HEX code (e.g., #36C466) into the HEX field and the RGB value updates instantly, no button click needed. The tool reads each pair of hexadecimal digits and converts them to decimal: 36 = 54 (R), C4 = 196 (G), 66 = 102 (B), giving rgb(54, 196, 102). You can also go the other direction type an RGB value and the HEX field syncs immediately. All 8 formats update at once, so you get HEX, RGB, HSL, and more in a single step.
Each format describes the same color differently depending on the use case. HEX (#36C466) is a compact 6-character code used in HTML and CSS. RGB (rgb(54, 196, 102)) uses decimal numbers (0–255) per channel ideal for programmatic use. HSL (hsl(140, 57%, 49%)) describes Hue, Saturation, and Lightness, the most human-readable format for tweaking shades in UI design. CMYK (device-cmyk(72% 0% 48% 23%)) is used in print design, representing ink percentages for Cyan, Magenta, Yellow, and Key (black). Our tool converts between all of these and 4 more formats simultaneously.
LCH (Lightness, Chroma, Hue) is a perceptually uniform color space meaning two colors with the same L value appear equally bright to the human eye, unlike HSL where perceived brightness shifts as hue changes. This makes LCH ideal for generating consistent color palettes and accessible UI color systems. It's now supported natively in CSS (color: lch(70% 65 147)) and all major browsers. Our converter lets you type LCH values directly and see them synced to HEX, RGB, and every other format in real time making it the easiest way to experiment with LCH on the web.
There are two standard ways. First, use an 8-digit HEX code, the last two digits are the alpha channel in hex (e.g., #36C46680 = 50% opacity). Second, use rgba() or hsla() with a decimal alpha value (e.g., rgba(54, 196, 102, 0.5)). Our Color Converter includes a transparency slider that adjusts the alpha channel live across all formats simultaneously HEX8, RGBA, HSLA, and more all update together. You can also type the alpha value directly into any format field and the slider moves automatically.
Screen colors use the RGB model (additive light mixing), while printers use CMYK (subtractive ink mixing). These two color gamuts don't fully overlap, some vivid RGB colors simply cannot be reproduced in ink. To minimize mismatches, always check your color's CMYK values before sending artwork to print. Our tool shows the device-cmyk() value for any color you pick, letting you catch out-of-gamut issues before they cost you a reprint. For best results, also review your color in a color-managed environment (like Adobe Illustrator set to your print profile).