Back to Arsenal

Ultimate Color Format Converter

Color

Convert between HEX, RGB, RGBA, and HSL formats.

ttb run color-converter
r34
g211
b238
HEX#22D3EE
RGBrgb(34, 211, 238)
HSLhsl(188, 86%, 53%)
CMYKcmyk(86%, 11%, 0%, 7%)
CSS#22D3EE
RGB Array[34, 211, 238]
Share this tool:
VecteezySponsored

Get stock vectors, photos, and videos for content and design workflows.

Browse Vecteezy

How to Use Color Format Converter

Enter a color value in any supported format - HEX (e.g., #FF5733), RGB (e.g., rgb(255, 87, 51)), or HSL (e.g., hsl(11, 100%, 60%)). The tool instantly converts it to all other formats and displays a color preview. You can also use the color picker to visually select a color and get all conversion values at once. Perfect for web development, graphic design, and ensuring color consistency across your projects.

1

Input a color code

Type any valid HEX, RGB, or HSL color code into the input field.

2

Use the visual picker

Alternatively, click the color swatch to open the visual color picker and select a shade manually.

3

Copy formatted codes

The tool instantly converts your color. Click the copy icon next to any format (HEX, RGB, HSL, CMYK) to copy it to your clipboard.

Frequently Asked Questions

What color formats are supported?+
The tool supports HEX (3 and 6 digit), RGB, RGBA, HSL, and HSLA color formats. Enter a value in any format to get conversions to all others.
What is the difference between HEX, RGB, and HSL?+
HEX uses hexadecimal notation (#RRGGBB), RGB defines colors by Red/Green/Blue intensity (0-255), and HSL uses Hue (0-360°), Saturation (0-100%), and Lightness (0-100%). All represent the same colors, just differently.
Can I use this for CSS colors?+
Absolutely. All output formats are valid CSS values that you can copy and paste directly into your stylesheets.

More Color Tools

Palette Generator

Gradient Generator

Contrast Checker

Tailwind Color Finder

Free tools, weekly.

Get lightweight updates when new tools land.