Enter any color in HEX, RGB, or HSL format and instantly see it converted to every other format with a live preview.
#ff6600
Complementary
HEX
#ff6600
RGB
rgb(255, 102, 0)
RGBA
rgba(255, 102, 0, 1)
HSL
hsl(24, 100%, 50%)
HSLA
hsla(24, 100%, 50%, 1)
Colours on the web are expressed in several formats. Each has advantages depending on the context: design tools, CSS, accessibility testing, or programmatic colour manipulation.
The most common CSS colour format. A six-digit hexadecimal value preceded by # (e.g. #ff6600). Each pair represents red, green, and blue channels from 00 to ff. Short form uses three digits when each pair is identical (e.g. #f60).
RGB defines colours using red, green, and blue values from 0 to 255. RGBA adds an alpha channel (0–1) for transparency. This format maps directly to how screens display colour and is widely supported in CSS, canvas drawing, and image processing APIs.
HSL stands for Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). It is more intuitive for humans because adjusting a single value changes brightness or vibrancy without affecting the base hue. HSLA adds alpha transparency.
Use HEX when you need a compact notation for design tokens and CSS variables. Use RGB/RGBA for canvas and pixel manipulation. Use HSL/HSLA when you need to create colour scales, hover states, or accessible palette variations because lightness and saturation are easy to reason about.
A complementary colour sits opposite on the colour wheel — 180° away in HSL. Complementary pairs create high-contrast, vibrant designs and are commonly used for call-to-action buttons, accents, and data visualisation where maximum distinction is needed.
#3b82f6), RGB (e.g. rgb(59,130,246)), or HSL (e.g. hsl(217,91%,60%)).RGB defines colors using red, green, and blue channel values (0–255), which maps to how screens emit light. HSL uses hue (0–360°), saturation (0–100%), and lightness (0–100%), making it more intuitive for creating color variations like hover states or accessible palettes because you can adjust brightness without changing the base hue.
Yes. Tailwind CSS accepts HEX, RGB, and HSL values in your tailwind.config.js theme. Convert any color here and paste the value directly into your config or use CSS variables with the HSL format for dynamic theming.
Color rendering depends on your monitor's color profile and browser color management. The numeric values are identical — perceived differences come from hardware calibration. For critical brand work, pair this converter with our contrast checker and test on multiple devices. Need a full design system? Our UI/UX design team ensures pixel-perfect consistency.