Is Konnect2Tools free?

Yes. These in-browser tools are completely free to use with no account required for core functionality.

Do my files leave my device?

Browser document operations run locally, except where the operation uses an external service, such as AI summarisation. Read the processing note before using sensitive inputs.

Is the Color Code Converter tool safe to use?

Local operations process document content on your device. External-service operations may send inputs as described in the processing note. Keep originals and inspect the output.

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

HEX (#RRGGBB) uses hexadecimal pairs for red, green, and blue. RGB uses decimal 0–255 for each channel. HSL uses Hue (0–360°, the color wheel), Saturation (0–100%, vividness), and Lightness (0–100%, from black to white). All three represent the same color space with different notations.

When should I use HSL instead of HEX?

Use HSL when you need to programmatically vary a color — e.g., creating hover states (slightly darker), disabled states (lower saturation), and brand palettes. hsl(220, 90%, 56%) to hsl(220, 90%, 46%) creates a darker version of the same hue easily. With HEX, this requires recalculating all three channels.

How do I add transparency to a color?

Use rgba() in CSS: rgba(R, G, B, A) where A is 0.0 (transparent) to 1.0 (opaque). Or use HEX with 8 digits: #RRGGBBAA where the last two digits are the alpha channel in hex (FF = fully opaque, 80 = 50% transparent, 00 = fully transparent).

What is a color token or design token?

Design tokens are named variables for colors in a design system. Instead of hardcoding #3B82F6, you define --color-primary: #3B82F6 in CSS or use Tailwind config. This makes theme changes trivial — update one value to change the color everywhere. Tools like Figma Tokens and Style Dictionary manage design tokens at scale.

Developer & data utilities

Color Code Converter

Convert colour codes between HEX, RGB, HSL, and CSS colour names with live preview.

Run Color Code Converter online

In-browserDocument processing runs on your device. External resources may still load.

Enable JavaScript to use the interactive tool. Read the instructions, limitations and FAQs below before starting.

The Color Code Converter converts between HEX, RGB, and HSL color formats with a live preview and interactive color picker. Web developers, UI designers, and graphic artists frequently need to convert between these formats when working across different design tools, CSS code, and design specifications.

HEX (#RRGGBB) is the most common format in CSS and HTML. RGB (red, green, blue, 0–255 each) is used in image processing and canvas APIs. HSL (hue, saturation, lightness) is the most human-intuitive format — making colors lighter, darker, more vivid, or more muted is straightforward in HSL.

Our tool also provides the CSS custom property output (--color-primary: #3B82F6) for immediate use in Tailwind or CSS variables. The color picker lets you visually select any color and instantly see all three format representations.

How to use this utility

Use the controls below—paste text, pick files, or adjust options as described on the tool.
Click the main action button. Processing runs in your browser on this device.
Download or copy the output. Check the processing note for any external services used by this operation.

Common use cases

Converting brand colors from designer's HEX to CSS RGB for opacity manipulation
Building Tailwind CSS color palettes with HSL variations
Converting design system colors between Figma (HEX) and CSS (RGB/HSL)
Finding the HEX equivalent of a CSS named color for logo specifications
Creating dark mode variants by adjusting HSL lightness values

Tips for best results

1HSL is best for creating color variations — lower saturation for muted tones, higher for vivid
2CSS rgba() requires RGB values — convert HEX to RGB before adding alpha transparency
3Material Design and Tailwind define color palettes in 50–950 shades using HSL lightness shifts
4Color contrast for accessibility: text on background should be at least 4.5:1 ratio (WCAG AA)
5oklch() is the modern CSS color space — consider using it for perceptually uniform colors in new projects

Frequently asked questions

Is Konnect2Tools free?: Yes. These in-browser tools are completely free to use with no account required for core functionality.
Do my files leave my device?: Browser document operations run locally, except where the operation uses an external service, such as AI summarisation. Read the processing note before using sensitive inputs.
Is the Color Code Converter tool safe to use?: Local operations process document content on your device. External-service operations may send inputs as described in the processing note. Keep originals and inspect the output.
What is the difference between HEX, RGB, and HSL?: HEX (#RRGGBB) uses hexadecimal pairs for red, green, and blue. RGB uses decimal 0–255 for each channel. HSL uses Hue (0–360°, the color wheel), Saturation (0–100%, vividness), and Lightness (0–100%, from black to white). All three represent the same color space with different notations.
When should I use HSL instead of HEX?: Use HSL when you need to programmatically vary a color — e.g., creating hover states (slightly darker), disabled states (lower saturation), and brand palettes. hsl(220, 90%, 56%) to hsl(220, 90%, 46%) creates a darker version of the same hue easily. With HEX, this requires recalculating all three channels.
How do I add transparency to a color?: Use rgba() in CSS: rgba(R, G, B, A) where A is 0.0 (transparent) to 1.0 (opaque). Or use HEX with 8 digits: #RRGGBBAA where the last two digits are the alpha channel in hex (FF = fully opaque, 80 = 50% transparent, 00 = fully transparent).
What is a color token or design token?: Design tokens are named variables for colors in a design system. Instead of hardcoding #3B82F6, you define --color-primary: #3B82F6 in CSS or use Tailwind config. This makes theme changes trivial — update one value to change the color everywhere. Tools like Figma Tokens and Style Dictionary manage design tokens at scale.

Continue with another utility in developer & data utilities.

Explore all categories

PDF hub Jobs & admissions Image hub Developer hub Finance hub Converters Business Health Real estate GST & tax HR & payroll Legal Design & marketing Education