CSS Tool · Free · No signup
Hex / RGB / HSL Converter
Convert any color between Hex, RGB, HSL, and CSS formats — with a visual picker, sliders, and instant copy buttons.
#6754E9
Tap to open color picker
Quick swatches
HEX
3, 6, or 8 digits (with alpha)
RGB
rgb(103, 84, 233)
HSL
hsl(248, 78%, 62%)
Opacity (Alpha)
%
rgba(103, 84, 233, 1)
Text contrast (WCAG)
Aa
On white
4.65:1
Aa
On black
4.51:1
▶ How to use these color values
A
In your CSS
Use any format —
color: #6754E9; or color: rgb(103, 84, 233); or color: hsl(248, 78%, 62%); — browsers accept all three.B
In Elementor
Any color field accepts Hex. Paste the hex code (with the
#) into the color picker's input.C
When to use HSL
HSL is easier to tweak — change the L (lightness) value to make any color lighter or darker without picking a whole new hex.
✓
Tip — the WCAG contrast check
For text to be readable: aim for 4.5:1 or higher for body text (AA), 7:1 for AAA. Large text (18px+ bold or 24px+ regular) can use 3:1.
