Hex Color Converter
Convert between HEX, RGB, HSL, and HSV color formats. Preview the color and get values for CSS, design, and development.
Did this tool work for you?
How to use this calculator
Colors can be expressed in multiple equivalent formats. HEX uses base-16; RGB uses decimal 0–255.
- 1
Enter RGB values (0–255 for each channel).
- 2
The calculator converts to HEX, HSL, and HSV automatically.
- 3
Use the HEX value in CSS, HSL for adjusting lightness/saturation, and RGB for image editing.
Frequently asked questions
What does each color format mean?
RGB: amount of Red, Green, Blue light (0–255). HEX: the same in base-16 (00–FF). HSL: Hue (color wheel angle 0–360°), Saturation (0–100%), Lightness (0–100%). HSV: Hue, Saturation, Value (brightness). HSL and HSV are easier to work with for adjusting colors systematically.
How do I convert HEX to RGB manually?
Split the HEX code into three pairs: #6366F1 → 63, 66, F1. Convert each pair from base-16 to decimal: 0x63 = 99, 0x66 = 102, 0xF1 = 241. So rgb(99, 102, 241).
What is the difference between HSL and HSV?
Both use hue and saturation. L (lightness): 50% = pure color, 0% = black, 100% = white. V (value/brightness): 100% = pure color or white, 0% = black. HSL is more intuitive for web design; HSV is used in many image editors (Photoshop's color picker).
What does opacity/alpha add?
RGBA adds a fourth channel (alpha, 0–1): rgba(99, 102, 241, 0.5) is 50% transparent. HSLA does the same for HSL. In CSS, you can also use hex with an alpha channel: #6366F180 (last two hex digits = 50% opacity = 0x80 = 128/255).
Color format conversions for designers and developers
When to use each color format
Use HEX for web design and CSS (universal browser support, compact notation). Use RGB when working with image processing, canvas APIs, or blending calculations. Use HSL when you need to adjust color programmatically — changing lightness from 40% to 60% is intuitive in HSL, painful in RGB.
Color contrast and accessibility
WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text against background. Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L is relative luminance computed from RGB. Tools like the WebAIM Contrast Checker use these formulas. High contrast is critical for users with visual impairments.
CSS color keywords and modern formats
CSS supports 140+ named colors (red, coral, steelblue), hex (#RRGGBB or shorthand #RGB), rgb(), hsl(), and modern oklch() and lab() formats. The oklch format is perceptually uniform — equal steps in lightness/chroma look equal to the human eye, unlike RGB where equal steps do not.
Learn more from an authoritative source:
WikipediaVector Calculator
Add, subtract, and find the magnitude, dot product, and angle between 2D or 3D vectors.
Matrix Calculator (2×2)
Calculate the determinant, inverse, transpose, and eigenvalues of a 2×2 matrix.
Ohm's Law Calculator
Calculate voltage, current, resistance, or power using Ohm's Law. Enter any two values to find the other two instantly.
Projectile Motion Calculator
Calculate range, maximum height, time of flight, and velocity components for a projectile launched at any angle and speed. Assumes no air resistance.
Kinetic Energy Calculator
Calculate kinetic energy (KE) from mass and velocity, or find mass or velocity from a known kinetic energy value.
Work & Power Calculator
Calculate work done, power output, force, distance, or time using physics formulas. W = F × d and P = W / t.
Results are estimates for informational purposes only and do not constitute professional financial, medical, legal, or technical advice. Read full disclaimer →