Hex to RGB Converter: Hex Color Code to RGB & HSL
Convert hexadecimal color codes to RGB, RGBA, and HSL values.
Privacy First: 100% Client-Side Processing
Processed in your browser. Files are never uploaded.
How to Use the Hex to RGB Converter: Hex Color Code to RGB & HSL
- 1Enter your hex color code (with or without '#').
- 2View live color preview square.
- 3Review RGB, RGBA, HSL, and CSS snippet formats.
- 4Click any format to copy it to your clipboard.
Formula & How It Works
Hex to RGB Math
Parses two-digit hex pairs into base-10 integers from 0 to 255.
Worked Examples
Toolzy Blue
Input: #3B82F6
Explanation: R: 0x3B=59, G: 0x82=130, B: 0xF6=246.
Pure White
Input: #FFF
Explanation: Shorthand expanded to #FFFFFF.
Alpha Opacity
Input: #FF000080
Explanation: 8-digit hex with 50% opacity.
Frequently Asked Questions
How do you convert hex to RGB?▼
Break the hex into pairs (RR, GG, BB) and convert each 2-digit hex number to decimal (0-255).
What is #FFFFFF in RGB?▼
#FFFFFF is rgb(255, 255, 255), representing pure white.
What is #000000 in RGB?▼
#000000 is rgb(0, 0, 0), representing pure black.
Can I use 3-digit hex codes?▼
Yes, 3-digit shorthand like #F00 expands to #FF0000 (rgb(255, 0, 0)).
How do 8-digit hex codes work?▼
The last two characters represent alpha opacity (e.g. #00000080 is black at 50% opacity).
Is this tool free?▼
Yes, Toolzy color tools are 100% free and run client-side.
Quick Reference & Conversion Table
| Color Name | Hex Code | RGB Format | HSL Format |
|---|---|---|---|
| Pure Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Pure White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Vibrant Red | #EF4444 | rgb(239, 68, 68) | hsl(0, 84%, 60%) |
| Emerald Green | #10B981 | rgb(16, 185, 129) | hsl(160, 84%, 39%) |
| Royal Blue | #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
⚠️ Common Pitfalls to Avoid
- •Omitting the '#' symbol or using invalid hex characters outside 0-9 and A-F.
- •Forgetting that 8-digit hex codes place alpha at the end (RRGGBBAA).
💡 Practical Real-World Uses
- •Translating Figma and UI design color tokens into CSS stylesheets.
- •Converting brand hex codes for canvas and WebGL graphics programming.
- •Configuring Tailwind CSS custom color palettes.
Related Online Tools
Explore complementary calculators and converters with instant client-side execution
Decimal to Hex Converter: Decimal to Hexadecimal
Convert base-10 decimal numbers to base-16 hexadecimal values.
HTML Formatter: Beautify & Minify HTML Code Online
Beautify, format, or minify HTML code with custom indentation.
Discord Text Formatter: Bold, Italic & Color Text
Format Discord text with Markdown styles, spoilers, and ANSI color codes.
Character Counter: Count Letters, Words & Bytes Online
Count characters, words, sentences, paragraphs, and UTF-8 byte length.
Alphabetical Order Tool: Sort Lists A to Z Online
Sort lists alphabetically from A to Z or Z to A with custom sorting rules.
Invisible Character Tool: Copy Blank Unicode Spaces
Copy blank invisible characters and zero-width spaces with one click.
Explore Other Tool Categories
Browse our full collection of 50 free web utilities
Unit Converters
Exact metric & imperial conversions for weight, length, temperature & volume.
Math & Education
Percentage changes, fractions, square roots, geometry & statistics.
Date & Time
Calendar arithmetic, business day intervals, stopwatch & multi-counter.
Home & Construction
Paint coverage, pool volume, topsoil, roof pitch, square footage & materials.