Color Converter

How to Convert Colors Between Formats

Converting colors between HEX, RGB, and HSL formats is a common task for web developers, graphic designers, and anyone working with digital media. Each format represents the same color in a different way, and knowing how to switch between them gives you more flexibility when writing CSS, choosing brand colors, or communicating with your team. Here is a step-by-step guide to using this free color converter.

1. Enter a color value: Type a HEX code (like #1A5F9E) into the HEX field, or enter individual Red, Green, and Blue values into the RGB fields, or supply Hue, Saturation, and Lightness values into the HSL fields. You can also click the color picker square to visually browse and select any color.
2. See instant results: As soon as you change any value, all three formats update in real time. The large preview box at the top shows exactly what the color looks like, so you never have to guess.
3. Copy the format you need: Click the "Copy" button next to any format to copy the formatted string to your clipboard. For example, clicking Copy next to RGB will copy rgb(26, 95, 158), ready to paste into your CSS file or design tool.
4. Use the CSS output: At the bottom of the tool you will find a ready-to-use CSS snippet that includes the color in all three formats as comments, making it easy to document your color choices in stylesheets.
5. Try random colors: Click the "Random Color" button to generate a new random color. This is useful for exploring color palettes, finding inspiration, or testing how different colors look in your design.

All conversion happens entirely in your browser using pure JavaScript math. No data is sent to any server, no cookies are stored, and there is nothing to install. The tool works on any modern browser, including Chrome, Firefox, Safari, and Edge, on both desktop and mobile devices.

Understanding Color Formats

Digital screens display colors by combining light. There are many mathematical models for describing these colors, but three formats dominate web development and design: HEX, RGB, and HSL. Understanding what each format represents will help you choose the right one for any given situation.

HEX Color Codes

A HEX color code is a six-character string prefixed with a hash symbol (#). Each pair of characters represents the intensity of one of the three primary light colors: red, green, and blue. The values use hexadecimal (base-16) notation, meaning each pair ranges from 00 (zero intensity, or none of that color) to FF (full intensity, or maximum of that color). For example, #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue. The OUH brand color #1A5F9E has a red component of 1A (26 in decimal), green of 5F (95), and blue of 9E (158), producing a rich medium-blue.

HEX codes are the most widely recognized color format on the web. They are compact, easy to copy and paste, and supported by every browser and design application. Some tools also support three-character shorthand (e.g., #F00 for #FF0000) and eight-character HEX that includes an alpha (transparency) channel.

RGB Color Values

RGB stands for Red, Green, Blue. Instead of hexadecimal notation, RGB uses three decimal numbers between 0 and 255, one for each primary color channel. The CSS syntax is rgb(26, 95, 158). RGB is the most intuitive format if you think in terms of mixing light: higher numbers mean more light from that channel. When all three channels are 0 you get black; when all three are 255 you get white. RGB also has an extended form, rgba(), which adds a fourth value between 0 and 1 for transparency. Many programming languages, game engines, and image-editing tools use RGB as their default color model because it maps directly to how monitors emit light.

HSL Color Values

HSL stands for Hue, Saturation, and Lightness. Unlike HEX and RGB, which describe colors in terms of hardware channels, HSL describes colors in terms that are more natural for humans to understand. Hue is a degree on the color wheel (0 to 360), where 0 and 360 are red, 120 is green, and 240 is blue. Saturation is a percentage from 0% (gray) to 100% (full color). Lightness is a percentage from 0% (black) to 100% (white), with 50% being the "normal" brightness. The CSS syntax is hsl(209, 72%, 36%). HSL is especially useful when you need to create color variations: you can lighten a color by increasing L, desaturate it by decreasing S, or shift the hue while keeping brightness and saturation constant. Designers often prefer HSL because it makes palette generation and accessibility adjustments much more intuitive.

HEX vs RGB vs HSL: When to Use Each

All three color formats can represent exactly the same set of colors, so choosing between them is mainly about convenience, readability, and the context in which you are working. Here is practical guidance for web developers and designers.

Use HEX when you need a compact, widely recognized format. HEX codes are the default in most design tools (Figma, Sketch, Photoshop) and are what most developers reach for in CSS. They are easy to compare visually, and because they are short strings, they work well in design tokens, brand guidelines, and color documentation. If you are sharing a color with a colleague, a HEX code is usually the most universally understood format.

Use RGB when you are working programmatically with color channels. If you need to calculate color differences, blend two colors, or manipulate individual channels in JavaScript or another language, RGB values are the most straightforward to work with because each channel is an independent integer. RGB is also the native format for the HTML Canvas API, WebGL, and most image-processing libraries. If you need transparency, the rgba() function lets you add an alpha channel without switching formats.

Use HSL when you are designing color palettes, creating themes, or adjusting colors for accessibility. Because HSL separates the concept of "what color" (hue) from "how vivid" (saturation) and "how bright" (lightness), it is the most intuitive format for making systematic adjustments. For example, to create a hover state that is slightly lighter than a button color, you can simply increase the L value by 10%. To create a muted version of a brand color, decrease S. To generate an analogous palette, shift H by 30 degrees in either direction. CSS custom properties combined with HSL make dynamic theming straightforward.

In practice, many professional workflows use a combination of all three. A brand guideline might list the official HEX code, a CSS file might use HSL for easy theming, and a JavaScript animation might use RGB for performance-critical blending. This converter makes it easy to jump between all three at any time.

Frequently Asked Questions

What is a HEX color code?

A HEX color code is a six-digit hexadecimal number, preceded by a hash sign (#), that represents a specific color. The first two digits specify the red component, the middle two specify green, and the last two specify blue. Each pair ranges from 00 (no intensity) to FF (maximum intensity). For example, #FFFFFF is white and #000000 is black. HEX codes are the most common way to specify colors in HTML and CSS because they are concise and universally supported by browsers, design software, and development tools.

How do I convert HEX to RGB?

To convert a HEX color to RGB manually, split the six-character code into three pairs and convert each pair from hexadecimal to decimal. For example, for #1A5F9E: the red pair 1A equals 1 × 16 + 10 = 26, the green pair 5F equals 5 × 16 + 15 = 95, and the blue pair 9E equals 9 × 16 + 14 = 158. So the RGB equivalent is rgb(26, 95, 158). This tool does the math automatically and instantly for any color you enter.

What does HSL stand for?

HSL stands for Hue, Saturation, and Lightness. Hue is the type of color (measured as a degree from 0 to 360 on the color wheel), Saturation is how vivid or pure the color is (from 0% gray to 100% fully saturated), and Lightness is how bright or dark the color is (from 0% black to 100% white). HSL was designed to be a more human-friendly way of describing colors compared to RGB or HEX. It is supported natively in CSS with the hsl() function and is particularly useful for creating color schemes, adjusting contrast, and building accessible designs.

Which color format should I use in CSS?

All three formats (HEX, RGB, and HSL) are valid in CSS and render identically in every modern browser. HEX is the most popular choice for its brevity and is what most design tools export by default. RGB (and rgba()) is useful when you need transparency or are computing colors dynamically with JavaScript. HSL is the best choice for building maintainable design systems because its values map to human intuition: you can create lighter, darker, or muted variations of a color by adjusting just one number. Many developers use HEX for one-off colors and HSL for CSS custom properties and theming. There is no wrong answer -- pick whichever makes your code most readable and maintainable for your team.