Color Converter

Pick a color or type a HEX code and instantly see it in every common format — HEX, RGB, and HSL — each ready to copy straight into your CSS or design tool. A live preview shows the color as you adjust it, so you can dial in exactly the shade you want and grab it in whichever notation your project uses.

HEX, RGB, and HSL — when to use each

All three describe the same colors, but each suits a different job. HEX (like #4f46e5) is compact and ubiquitous in CSS and design handoffs. RGB spells out the red, green, and blue channels from 0–255, which is handy when you need an alpha channel (RGBA) for transparency. HSL — hue, saturation, lightness — is the most human-friendly: because lightness is its own axis, you can make a color lighter or darker, or shift its hue, by nudging a single number, which is why designers reach for it when building tints and shades or a consistent palette.

Building palettes with HSL

Once you can read HSL, creating a coherent palette gets easier. Keep the hue fixed and vary the lightness to generate a ladder of tints and shades for buttons, hovers, and backgrounds. Rotate the hue by even steps for complementary or analogous colors. This converter shows the HSL values alongside HEX and RGB so you can experiment in the format that makes sense and then copy the result in the format your code expects. Everything updates live, so finding the exact shade is a matter of nudging a slider rather than guessing at hex digits.

Contrast and accessibility

Colour choices aren't only aesthetic — text has to be readable against its background. Accessibility guidelines set minimum contrast ratios between text and background colours so that people with low vision can read comfortably, and failing them is a common reason a nice-looking palette doesn't work in practice. Working in HSL makes this easier to manage: because lightness is its own value, you can keep a brand hue while pushing text light or dark enough to meet contrast targets. Convert your colours here to grab exact values, then check any critical text-and-background pair against a contrast checker before you ship it.

Which format to use where

Each color format suits a different job. HEX is the compact default for CSS and design handoffs. RGB maps directly to how screens emit light and is handy when you need to tweak one channel. HSL — hue, saturation, lightness — is the one to reach for when building a palette, because you can hold the hue steady and step the lightness to create tints and shades that feel related. Converting between them loses nothing for solid colors, so you can design in whichever model thinks the way you do and export to whatever your code needs.

Frequently asked questions

Last updated: 2026-01-20