ToolvyraToolVyraAll Tools
Generators · Sheet 04

Color Converter

Convert a color between HEX, RGB, and HSL formats instantly. Pick a color or type a code, every format updates live.

Pick a color
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
How It Works

Colors on the web can be written in more than one format, and different tools and codebases often expect a specific one. HEX is the compact six-digit format most commonly used in CSS and design tools, RGB describes a color as red, green, and blue light values from 0 to 255, and HSL describes a color by hue, saturation, and lightness, which is often easier to reason about when adjusting a shade by hand.

Type a HEX code into the input field, or use the color picker swatch to choose a color visually, and this tool instantly calculates the matching RGB and HSL values below. Click Copy next to any format to copy that exact string to your clipboard, ready to paste into a stylesheet, a design tool, or code.

This is useful when a designer hands off a HEX value but your code needs RGB, when you are fine-tuning a shade using HSL's lightness control, or when you simply want to confirm what a color looks like before using it in a project.

Frequently Asked Questions
What is the difference between HEX and RGB?+

They describe the same color in different formats. HEX is a six-digit code like #3B82F6, while RGB expresses the same color as three numbers between 0 and 255 for red, green, and blue.

Why would I use HSL instead of RGB?+

HSL separates a color into hue, saturation, and lightness, which makes it easier to create lighter or darker versions of the same color by adjusting just one number.

Does this tool store the colors I enter?+

No. All conversion happens instantly in your browser using plain JavaScript. Nothing is sent to a server or saved anywhere.

Can I enter a 3-character HEX code?+

Yes, shorthand codes like #f00 are automatically expanded to their full 6-character equivalent, such as #ff0000.