Let's Chat
InsightsTools

Colour Converter

Convert between hex, RGB, HSL, and Tailwind CSS colour classes. Find the nearest Tailwind colour for any hex code.

Nearest CSS colour: --

RGB
HSL
CSS Variable
--color: #F37021;
Tailwind CSS
bg-orange-600 nearest

How to Use This Tool

Enter a colour in any format — hex, RGB, or HSL — and all other formats update instantly, including the nearest Tailwind CSS class. You can also use the visual colour picker to select a colour. Click "Copy" next to any format to copy the value to your clipboard, ready to paste into your CSS, design tool, or Tailwind project.

Why Colour Formats Matter

Different situations call for different colour formats. Hex codes are compact and widely supported. RGB is useful when you need to manipulate individual colour channels. HSL is the most intuitive for designers — adjusting lightness and saturation is straightforward, making it ideal for creating consistent colour palettes and design systems.

Having the right format at your fingertips saves time when building websites, creating brand guidelines, or communicating colour specs to developers.

Hex to Tailwind CSS Colour Lookup

If you're building with Tailwind CSS, this tool instantly finds the nearest Tailwind colour class for any hex code. It checks your colour against all 220+ colours in Tailwind's v3 default palette and tells you whether it's an exact match or shows you the closest alternative. This is useful when you're converting brand colours into a Tailwind design system and need to know which utility class to use.

Related Tools

Contrast Checker Check if your colours meet WCAG accessibility standards Brand Colour Extractor Upload your logo and extract brand colours with hex codes

Frequently asked questions

What is the difference between hex, RGB, and HSL?

Hex is a six-character code (e.g. #ff6600) commonly used in CSS and design tools. RGB defines colours by red, green, and blue values from 0-255. HSL defines colours by hue (0-360 degrees), saturation (0-100%), and lightness (0-100%). All three represent the same colours, just in different formats.

When should I use HSL instead of hex?

HSL is more intuitive for creating colour variations. To make a colour lighter or darker, adjust the L (lightness) value. To make it more or less vivid, adjust S (saturation). This makes HSL ideal for building colour palettes and design systems where you need consistent tints and shades.

How do I convert hex to RGB?

Each pair of characters in a hex code represents a colour channel: the first two are red, the middle two are green, and the last two are blue. Convert each pair from hexadecimal (base 16) to decimal (base 10). For example, #ff6600 becomes rgb(255, 102, 0). Or just use this tool.

How do I find the nearest Tailwind CSS colour for a hex code?

Enter your hex code into this tool and it will automatically show the nearest matching Tailwind CSS colour class (e.g. bg-orange-600). It compares your colour against all 220+ colours in the Tailwind v3 default palette and shows whether it is an exact match or the closest approximation. You can copy the Tailwind class directly.

What is a Tailwind CSS colour class?

Tailwind CSS uses utility classes like bg-blue-500 or text-red-600 to apply colours. Each class maps to a specific hex value from Tailwind's default colour palette. If your brand colours don't match a Tailwind class exactly, this tool helps you find the closest one so you can maintain visual consistency in Tailwind projects.

Need a brand identity that stands out?

We create cohesive colour palettes and brand identities for small businesses. Get in touch to discuss your project.

Let's Chat