Free Developer Tool
HSL Color Picker
Select colors using hue, saturation and lightness controls.
HSL Values
Hue
°
Saturation
%
Lightness
%
Color Values
HSLhsl(239, 84%, 67%)
RGBrgb(100, 103, 242)
HEX#6467F2
What is HSL Color Picker?
Choose and adjust colors using hue, saturation and lightness controls. The tool provides the equivalent HEX and RGB values so the selected color can be used directly in CSS and design projects.
How to use
- Choose a color using the picker.
- Adjust hue, saturation and lightness.
- Review the generated color values.
- Copy the HEX, RGB or HSL representation.
Features
- HSL controls
- Visual color preview
- HEX and RGB conversion
- Instant value updates
Common Use Cases
- CSS color selection
- Theme development
- UI design
- Color adjustments
Example
Input
HSL: 204, 70%, 53%
Output
HSL: hsl(204, 70%, 53%) RGB: rgb(52, 152, 219) HEX: #3498DB
FAQ
What does HSL stand for?
HSL stands for Hue, Saturation and Lightness.
Can I adjust hue separately?
Yes.
Does it provide HEX and RGB values?
Yes.
Missing a feature?
If this tool doesn't cover your use case or is missing functionality, please let me know through the Contact page.
New improvements and features are added based on user feedback.