Colour Palette & CSS Generator
Generate complementary, analogous, and triadic colour palettes from any base colour. Outputs CSS custom properties ready for your stylesheet.
Colour Palette & CSS Generator
Convert any colour to HEX, RGB, HSL, or Tailwind β instantly
A designer hands you a Figma file with brand colours in HEX. Your CSS needs rgba() for a semi-transparent overlay. Your Tailwind config uses utility classes you can't quite match. Pick a colour with the visual picker, type a HEX code like #3B82F6, enter RGB values like rgb(59, 130, 246), or paste an HSL value like hsl(217, 91%, 59%) β every output format updates simultaneously. Each result has a one-click copy button so you can paste it straight into your stylesheet, config file, or design system documentation.
The tool also shows the closest Tailwind CSS utility class matches using perceptual colour distance, a CSS custom property string you can drop into your :root, an opacity slider that generates rgba() values, and a live gradient preview with adjustable angle. Everything happens on one screen β no tab switching, no mental arithmetic, no copy-pasting between converter sites.
Who uses this colour converter
A developer receives a brand guide with the primary colour as #1D4ED8. They need the RGB values for an rgba() overlay, the HSL version to easily generate lighter shades for hover states, and a CSS custom property string for the design system. Instead of doing the arithmetic manually or juggling three different converter tabs, they paste #1D4ED8 once and get all formats in one place.
A project uses Tailwind but the brand colour #6C46FF doesn't appear in the default palette. The Tailwind matching section shows the five closest utility classes by perceptual distance β violet-500 (dE 1.2) might be close enough, or violet-600 might need a custom override. The Delta-E score tells you how close the match actually is, rather than relying on visual guesswork.
When assembling a design system, designers need to normalise colours from mixed sources β some in HEX from Figma, some in RGB from a legacy stylesheet, some in HSL from a colour tool. This converter lets them enter any format and verify that the output values are consistent across HEX, RGB, HSL, and CSS custom properties.
How colour conversion works β and why the formats matter
HEX, RGB, and HSL are three ways to describe the same colour
HEX stores each colour channel as a two-digit hexadecimal number: #3B82F6 breaks into R=3B (59), G=82 (130), F6 (246). RGB expresses those same three channels as decimal integers from 0 to 255. HSL re-describes the colour in terms humans find more intuitive β Hue is the angle on a 360-degree colour wheel (0 = red, 120 = green, 240 = blue), Saturation is the intensity from 0% (grey) to 100% (fully vivid), and Lightness is how bright it is from 0% (black) to 100% (white). All three formats represent the identical colour; the conversion is pure arithmetic with no data loss.
What happens when you type a HEX code
Type #3B82F6 and the tool splits the six characters into three pairs, converts each from base-16 to decimal (3B = 59, 82 = 130, F6 = 246), and feeds those RGB values into the RGB-to-HSL formula. The HSL calculation finds the maximum and minimum channel values, computes lightness as their midpoint, derives saturation from the difference, and determines hue based on which channel was dominant. All three input fields β HEX, RGB, and HSL β update to reflect the same colour in their respective formats. The gradient preview and Tailwind matches also update.
Worked example: converting #EF4444 (Tailwind red-500)
HEX #EF4444 splits into R=239, G=68, B=68. Converting to HSL: the max is 239 (red), min is 68 (green and blue equal), lightness is (239/255 + 68/255) / 2 = 0.598 β 60%. Saturation = (239-68) / (1 - |2Γ0.60 - 1|) / 255 = 0.836 β 84%. Hue = 0Β° because red is the dominant channel. Result: hsl(0, 84%, 60%). If you drag the opacity slider to 50%, the rgba output becomes rgba(239, 68, 68, 0.50).
Tailwind matching: why Delta-E matters
Simple RGB distance doesn't match how humans perceive colour differences. A 10-unit shift in the blue channel is far more noticeable than the same shift in green. The tool converts both your colour and every Tailwind palette entry into the CIELAB colour space, which models perceptual uniformity. Delta-E measures the Euclidean distance between two colours in that space. A score under 2 means the difference is invisible to most people; under 5 is a close match; above 10 is a noticeable difference. The five closest Tailwind classes are shown, ranked by this perceptual distance.
3-digit shorthand and edge cases
Three-character HEX codes like #F0A are expanded per the CSS specification: each digit is doubled, so #F0A becomes #FF00AA. RGB channel values above 255 or below 0 are clamped. HSL saturation and lightness are clamped to 0β100%. Invalid input shows an error state rather than producing NaN or Infinity. The gradient generator creates a linear-gradient using your chosen angle and a darker shade of the current colour, computed by subtracting 60 from each RGB channel.
Frequently Asked Questions
What colour formats does this tool accept as input?
HEX codes with or without the # prefix (including 3-digit shorthand like #F0A), RGB functions like rgb(59, 130, 246) or comma-separated values, and HSL functions like hsl(217, 91%, 59%) or comma-separated numbers. You can also use the visual colour picker. All formats are parsed as you type β no submit button needed.
How does the Tailwind colour matching work?
The tool converts your colour into the CIELAB colour space, which models how humans actually perceive colour differences. It then calculates the Delta-E distance between your colour and every entry in the Tailwind v3 default palette. The five closest matches are returned, ranked by perceptual similarity. A Delta-E under 2 means the difference is invisible to most people; under 5 is a close match.
What is the difference between HEX and RGB?
Both describe the same colour using different number systems. HEX uses base-16 (e.g. #3B82F6), where each pair of digits represents one colour channel from 00 to FF. RGB uses decimal numbers from 0 to 255 for each channel (e.g. 59, 130, 246). HEX is more compact and commonly used in CSS and design tools; RGB is easier to work with when adjusting individual channels programmatically.
Why would I use HSL instead of RGB?
HSL describes colour in a way that matches how humans think about it. Hue is the colour type on a 360-degree wheel, saturation controls intensity, and lightness controls brightness. Want a lighter version of your brand colour? Increase the L value in HSL. With RGB, you'd have to adjust all three channels simultaneously and guess at the result. HSL makes creating colour variations β lighter tints, darker shades, complementary pairs β much more intuitive.
Can I use this for colours with transparency?
The main converter works with opaque colours, but the opacity slider in the RGB section generates rgba() values at any alpha level from 0% to 100%. For example, setting the slider to 50% on #3B82F6 produces rgba(59, 130, 246, 0.50). You can copy that string directly into your CSS. The alpha channel is independent of the base colour conversion.
Why does my hex code look different in another app?
Different applications may use different colour profiles. This tool outputs sRGB, which is the standard for web browsers and CSS. Apps using Display P3 or Adobe RGB β common in design software on macOS β render the same numeric values as wider-gamut colours, making them appear more saturated on supporting screens. Screen calibration and ambient lighting also affect perceived colour.
What does the Delta-E number next to Tailwind matches mean?
Delta-E measures the perceptual distance between two colours. A score of 0 means they are identical. Under 2 β the difference is invisible to most people without side-by-side comparison. Under 5 β a close match that works for most practical purposes. Above 10 β a noticeable difference that would be visible in a UI. If the closest Tailwind match has a Delta-E above 5, you may want to define a custom colour instead.