How to Use
Edit any of the three input fields (HEX, RGB, or HSL) and the other two will update automatically. The color preview at the top shows the current color in real-time.
Supported formats:
- HEX:
#4F46E5or#FFF - RGB:
79, 70, 229 - HSL:
242, 74%, 59%
What Is the Difference Between HEX, RGB, and HSL?
HEX is a hexadecimal representation of RGB values, commonly used in CSS and HTML. It uses a # followed by six hex digits (or three for shorthand).
RGB stands for Red, Green, Blue — each value ranges from 0 to 255. It is the most common color model for digital displays.
HSL stands for Hue (0-360°), Saturation (0-100%), and Lightness (0-100%). It is more intuitive for humans to work with because it separates the color hue from its intensity.
Frequently Asked Questions
Why do my colors look different on different screens?
Monitor calibration, panel technology (IPS vs OLED), and color gamut (sRGB vs P3) all affect color reproduction. The values themselves are universally consistent.
How do I pick a color scheme for my website?
Use HSL to experiment with hue relationships. Complementary colors are 180° apart on the color wheel (e.g., 242° and 62°). Analogous colors are 30° apart. HSL makes these relationships easy to calculate.