Expand a shorthand swatch
#f80Expected: HEX: #FF8800; RGB: rgb(255, 136, 0)
Each shorthand digit expands into two identical hexadecimal digits.
Color Converter
Color Converter
Translate HEX colors into RGB and HSL for your next design.
Something missing? Suggest an improvement →
Worked examples: try and compare
These examples show expected results and common failure cases. Loading an example replaces the tool input after confirmation when you already have text.
Convert a neutral gray
#808080Expected: RGB: rgb(128, 128, 128); HSL: hsl(0, 0%, 50%)
Equal RGB channels have zero saturation. Hue is reported as zero for this neutral color.
How to use Color Converter
Enter a 3- or 6-digit HEX color, such as #3b82f6. Get HEX, RGB, and HSL values. Alpha channels are not supported.
Turn a design swatch into CSS values
Enter #336699 to obtain rgb(51, 102, 153) and hsl(210, 50%, 40%). The leading # is optional. A shorthand value such as #f80 expands to #ff8800 before conversion. Copy the notation that your stylesheet or design tool expects.
Understand rounding and accepted inputs
The converter accepts three or six hexadecimal digits. It does not accept eight-digit alpha colors, named colors or an RGB string as input. HSL values are rounded to whole numbers, so converting that rounded HSL elsewhere may not reproduce the original RGB channels exactly.
Color conversion does not measure readability
RGB and HSL describe the same color using different coordinates. Neither output tells you whether text has enough contrast against its background. Test the actual foreground and background pair with an accessibility contrast checker, including hover and focus states.
Do you upload my data?
This tool runs in your browser. Inputs and results are not sent to our server. Closing or refreshing the page clears your work, so save any results you need.