Color Converter

Converting a color between formats with Thetoolity takes seconds.

Converting from HEX: Type or paste your six-character hex code into the HEX field (with or without the leading hash symbol). The RGB and HSL values update instantly, and the color preview shows the exact color you are working with.

Converting from RGB: Adjust the Red, Green, and Blue sliders or type values directly into each field. Each component accepts a value from 0 to 255. The HEX code and HSL values update automatically as you change any component.

Converting from HSL: Adjust the Hue, Saturation, and Lightness sliders or enter values directly. Hue accepts a value from 0 to 360 degrees. Saturation and Lightness each accept a percentage from 0 to 100. The HEX code and RGB values update in real time.

The live color preview updates continuously so you always see the actual color while working, not just the numbers.

Digital color is expressed in multiple formats, each developed to serve a specific context. Designers and developers work with all of them depending on where a color is being used and what tools they are working with.

The three formats supported by Thetoolity's converter are the most widely used in web design, app development, and digital graphics.

HEX (Hexadecimal)

HEX is the most universally recognized color format in web development. A HEX color code is a six-character string of hexadecimal digits preceded by a hash symbol, representing the intensity of Red, Green, and Blue channels.

The format looks like this: #E5322D

Each pair of characters represents one color channel. The first two characters (E5) represent red. The middle two (32) represent green. The last two (2D) represent blue. Each pair is a hexadecimal number from 00 (0 in decimal, no intensity) to FF (255 in decimal, maximum intensity).

Hexadecimal is a base-16 numbering system using digits 0 through 9 and letters a through f. This is why hex color codes contain letters alongside numbers.

HEX codes are used extensively in CSS for web pages, in HTML attributes, in design tools like Figma and Sketch, in SVG files, and anywhere web and app colors are specified. They are compact and copy-paste friendly.

A shorthand three-character version exists when both digits in each pair are identical. For example, #FF6600 can be written as #F60. This shorthand works in CSS but is not always supported in all contexts.

RGB (Red, Green, Blue)

RGB is the additive color model used by all digital screens. Colors are created by mixing light of three primary colors: Red, Green, and Blue. Each channel has an intensity value from 0 (completely off, no light) to 255 (maximum intensity, full brightness).

The format in CSS looks like this: rgb(229, 50, 45)

The three numbers represent the Red, Green, and Blue intensities respectively. When all three are at 0, the result is black (no light at all). When all three are at 255, the result is white (all channels at full intensity).

RGB is the native color model of screens because monitors, phones, and TVs emit light using red, green, and blue LEDs or pixels. When you mix red and green light you get yellow. When you mix all three you get white. This is fundamentally different from mixing paint or ink, where more colors make the result darker (subtractive mixing).

RGB is used in CSS, in image editing software like Photoshop and GIMP, in video production, in game development, and in programming contexts where color values are processed computationally.

HSL (Hue, Saturation, Lightness)

HSL is a cylindrical color model designed to be more intuitive for human perception and design work than RGB or HEX. Instead of mixing light intensities, HSL describes color in terms of how humans naturally think about it.

The format in CSS looks like this: hsl(2, 79%, 54%)

Hue is the position on the color wheel measured in degrees from 0 to 360. Red is at 0 degrees. Yellow is at 60 degrees. Green is at 120 degrees. Cyan is at 180 degrees. Blue is at 240 degrees. Magenta is at 300 degrees. The wheel returns to red at 360 degrees.

Saturation is how vivid or muted the color is, expressed as a percentage from 0% to 100%. At 0% saturation, any hue becomes a shade of gray. At 100% saturation, the color is fully vivid and pure.

Lightness describes how light or dark the color is, expressed as a percentage from 0% to 100%. At 0% lightness, the color is always black regardless of hue or saturation. At 100% lightness, it is always white. At 50% lightness, the color is in the middle range where most useful colors live.

HSL is particularly valuable for programmatic color manipulation. If you want to create a darker version of a color, you simply reduce the lightness percentage while keeping the hue and saturation the same. If you want a more muted version, you reduce saturation. This makes HSL ideal for generating color scales, theming systems, and accessible color variations in design systems and CSS frameworks.

Each color format has strengths that make it the better choice in specific situations. Understanding these helps you work more efficiently across tools.

Use HEX when: You are writing CSS for a web page or web application and want a concise, copy-paste-friendly format. HEX is the most compact representation and the most widely recognized format among web developers. Most design tools export colors as HEX codes by default, making it the common currency of color handoff between designers and developers. HEX is ideal for brand colors, design tokens, and any color that you reference frequently and need to communicate quickly.

Use RGB when: You are working in an environment that uses numeric color values natively, such as a JavaScript canvas application, a game engine, or a graphics programming context. RGB is also the right choice when you need to perform mathematical operations on color channels, such as blending two colors programmatically, adjusting brightness by multiplying all channels, or applying color effects that operate on individual channel values. CSS also accepts rgba() which adds an alpha (opacity) channel, useful for semi-transparent colors.

Use HSL when: You are building a design system, color scale, or theme where you need to create consistent variations of a color. HSL makes it straightforward to create a button's hover state (slightly darker), a disabled state (lower saturation), or a full range of tints and shades for a color palette. CSS custom properties (variables) combined with HSL values make dynamic theming extremely clean. Many modern CSS frameworks and design systems use HSL internally for this reason.

Understanding how conversions between formats work helps developers who need to perform them in code.

HEX to RGB

Each pair of hexadecimal digits in a HEX code converts to a decimal integer representing a channel value. The first pair (positions 1 and 2 of the code after the hash) is the Red channel. The second pair is Green. The third pair is Blue.

To convert: take each two-character pair and convert it from base-16 hexadecimal to base-10 decimal. For example, the HEX code #E5322D converts as follows. E5 in hexadecimal equals 14 times 16 plus 5 which equals 229 for Red. 32 in hexadecimal equals 3 times 16 plus 2 which equals 50 for Green. 2D in hexadecimal equals 2 times 16 plus 13 which equals 45 for Blue. Result: rgb(229, 50, 45).

RGB to HEX

Reverse the process. Convert each decimal channel value to its two-digit hexadecimal equivalent and concatenate them with a hash prefix. Red 229 converts to E5. Green 50 converts to 32. Blue 45 converts to 2D. Result: #E5322D.

RGB to HSL

This conversion involves several steps. First, normalize each RGB value to a 0 to 1 scale by dividing by 255. Then find the maximum and minimum of the three normalized values. The Lightness is the average of the max and min. The Saturation depends on whether Lightness is in the lower or upper half of the range. The Hue depends on which channel is the maximum and the difference between the channel values. The result gives H in 0 to 360 degrees, S as a percentage, and L as a percentage.

HSL to RGB

Reverse the process by converting the hue, saturation, and lightness back to normalized RGB components using the intermediate chroma and offset calculations defined by the HSL model, then scale back to 0 to 255.

In practice, these conversions are handled automatically by Thetoolity's converter and by color functions in every programming language. Libraries like tinycolor2 in JavaScript, colorsys in Python, and built-in functions in many CSS preprocessors handle color format conversion with a single function call.

CSS supports multiple color format syntaxes, and understanding which ones browsers accept helps developers write more maintainable stylesheets.

HEX notation is the most common: color: #E5322D. The six-digit format is universally supported. The three-digit shorthand (#F60 for #FF6600) also works in all modern browsers. CSS Color Level 4 introduced an eight-digit hex notation (#RRGGBBAA) where the last two digits specify opacity, but browser support should be verified for each project's target audience.

RGB notation uses the rgb() function: color: rgb(229, 50, 45). For semi-transparent colors, rgba() adds an opacity parameter from 0 (fully transparent) to 1 (fully opaque): color: rgba(229, 50, 45, 0.5) creates a 50 percent transparent red. Modern CSS also accepts the rgb() function with a slash separator for alpha: rgb(229 50 45 / 50%).

HSL notation uses the hsl() function: color: hsl(2, 79%, 54%). For semi-transparent HSL colors, hsla() adds opacity: hsla(2, 79%, 54%, 0.5). HSL is particularly powerful with CSS custom properties because you can define a hue variable and create a full color scale programmatically.

Modern CSS also supports newer color spaces like oklch(), lab(), and lch() in CSS Color Level 4, though these are not yet as universally supported as HEX, RGB, and HSL.

Named colors are another CSS option. CSS defines 140 named colors including red, blue, cornflowerblue, and rebeccapurple. While convenient for quick prototyping, named colors are generally avoided in production design systems because they offer no systematic control and make color palette management harder.

Understanding when you will actually need to convert between formats helps illustrate the practical value of a color converter.

Design handoff from Figma or Sketch to code. Design tools typically show HEX or RGB values in their color panels. If your CSS uses HSL-based custom properties, you need to convert. If a designer gives you a Pantone color that has been converted to HEX for digital use, you may need it in RGB for a canvas element or in HSL for your design system token.

Working with third-party component libraries. Many component libraries and design systems define their color system in a specific format. If you are integrating a library that uses HSL internally and your existing colors are in HEX, conversion is necessary.

Accessibility and contrast checking. Some accessibility tools require color values in RGB format for contrast ratio calculations. Converting your HEX design colors to RGB values is a common step in accessibility auditing workflows.

CSS theming and dark mode. A common pattern for implementing dark mode in CSS is to define HSL values in custom properties and adjust only the lightness for dark mode variants. Starting from HEX colors in your design file, converting to HSL, and then building the theming system is a standard workflow.

Image processing and canvas programming. The HTML canvas API and libraries like Three.js or PixiJS work with colors in specific formats. Converting from the HEX codes in your design to the numeric values needed in code is a common developer task.

Email HTML templates. Email clients have inconsistent CSS support and sometimes require inline styles with hex or RGB values. Converting colors from a design system that uses HSL to the email-compatible formats is a regular part of email development.

While Thetoolity's converter works with fully opaque HEX, RGB, and HSL colors, understanding alpha is important for complete color format knowledge.

Alpha refers to the transparency or opacity of a color. An alpha value of 1 (or 100%) means completely opaque. An alpha value of 0 (or 0%) means completely transparent. Values between 0 and 1 produce semi-transparent colors.

In CSS, alpha is added to RGB using rgba(): rgba(229, 50, 45, 0.7) for a 70% opaque red. Alpha is added to HSL using hsla(): hsla(2, 79%, 54%, 0.7).

In HEX format, an eight-character code includes alpha as the last two digits. #E5322DB3 adds B3 (hexadecimal for 179, which is approximately 70% of 255) as the alpha channel. This format is supported in modern browsers but not in older ones.

When specifying colors with transparency for overlays, shadows, disabled states, modal backgrounds, and other transparent UI elements, the rgba() and hsla() functions are the most compatible and readable approach.

Thetoolity is a growing collection of free, fast, and clean online tools for designers, developers, and creative professionals at every skill level. Our color converter is one of many tools built to eliminate the small but constant friction of working with digital color across formats, tools, and code.

No accounts. No subscriptions. No paywalls. Just tools that open instantly and work every time.

Explore the full collection at Thetoolity.com and find generators, converters, calculators, checkers, and testers, all free and all instant.