Kleuren Omzetten Tussen HEX, RGB en HSL
Quick Answer
Om een kleur te converteren: open de Color Converter, voer een kleur in in elk formaat (HEX, RGB, HSL) en de tool toont direct de equivalenten in alle andere formaten. Alle conversie gebeurt lokaal in je browser —geen data geüpload.
Introduction
Kleuren kunnen in meerdere formaten worden weergegeven: HEX (#ff6600), RGB (rgb(255, 102, 0)), HSL (hsl(24, 100%, 50%)) en andere. Verschillende tools en contexten gebruiken verschillende formaten —CSS gebruikt vaak HEX of RGB, design-tools HSL, en API's willekeurig. Converteren tussen formaten laat je een kleur in het ene systeem gebruiken in een context die een ander vereist.
Step by Step
-
Open the Color Converter tool
Go to the Color Converter tool page. The tool supports HEX, RGB, HSL, HSV, and CMYK formats.
-
Enter your color
Type or paste a color value in any supported format. Examples: '#ff6600', 'rgb(255, 102, 0)', 'hsl(24, 100%, 50%)'. The tool auto-detects the input format.
-
Review all format equivalents
The tool displays the color in all formats simultaneously: HEX, RGB, HSL, HSV, and CMYK. It also shows a color preview swatch so you can verify the conversion is correct.
-
Copy the format you need
Click the Copy button next to any format to copy that value to your clipboard. Use it in your CSS, design tool, or application.
-
Adjust the color (optional)
Some tools let you adjust the color with sliders (for HSL: hue, saturation, lightness) and see all formats update in real time. This is useful for finding related colors or shades.
Examples
HEX to RGB and HSL
Input: #ff6600
Output: RGB: rgb(255, 102, 0)
HSL: hsl(24, 100%, 50%)
RGB to HEX
Input: rgb(0, 128, 255)
Output: HEX: #0080ff
HSL: hsl(210, 100%, 50%)
HSL to HEX
Input: hsl(120, 100%, 50%)
Output: HEX: #00ff00
RGB: rgb(0, 255, 0)
Common Problems
- HEX with vs without # —some tools require the # prefix, others do not. Our converter accepts both.
- 3-digit vs 6-digit HEX —#f60 is shorthand for #ff6600. Both are valid; the converter normalizes to 6 digits.
- HSL hue range —hue is 0-360 degrees (a circle). 0 and 360 are both red. Values above 360 wrap around.
- Color space differences —HEX, RGB, and HSL are all sRGB. CMYK is a different color space (print) and conversion is approximate.
Tips
- Use HSL for creating color variations —adjusting hue, saturation, or lightness is more intuitive than RGB.
- Use HEX for CSS —it is the most compact and widely supported format in stylesheets.
- Use RGB when you need to set alpha transparency —rgb(255, 102, 0, 0.5) for 50% opacity (or use 8-digit HEX: #ff660080).
- Use our Color Converter for instant, private conversion between all color formats.