Color Converter
Convert between HEX, RGB, and HSL formats instantly.
Visualize colors and grab CSS codes for your projects.
#3B82F6
Click to pick color
CSS Usage
Common Use Cases
Web Design
Convert that random HEX code you found into an HSL value to easily create lighter or darker variations for hover states.
Print Preparation
Check the CMYK equivalent of your brand colors to see how they might look when printed on business cards.
Development
Debug color issues by converting opaque HEX codes (e.g., #RRGGBBAA) into more readable RGBA formats.
Theme Creation
Standardize your color palette by converting all legacy RGB values to HEX for your CSS variables.
How to Use
This tool is designed to be a "Swiss Army Knife" for color formats in web development.
Input & Conversion
- Type anywhere: Enter a value in any field (HEX, R/G/B, H/S/L). The other fields will update automatically.
- Color Picker: Click on the large color preview box to open your browser's native color picker (eye-dropper).
Copy to Clipboard
- One-click copy: Click the copy icon next to the HEX field.
- CSS Snippets: In the box below the preview, click on any line (e.g.,
rgb(0,0,0)) to copy valid CSS code.
Color Conversion in Code
Converting Hex to RGB programmatically is a common task. Here is how to do it in JavaScript and Python.
function hexToRgb(hex) {
// Remove hash
hex = hex.replace(/^#/, '');
// Parse components
const bigint = parseInt(hex, 16);
const r = (bigint >> 16) & 255;
const g = (bigint >> 8) & 255;
const b = bigint & 255;
return `rgb(${r}, ${g}, ${b})`;
}
console.log(hexToRgb("#ff0000"));
// Output: "rgb(255, 0, 0)"def hex_to_rgb(hex_val):
hex_val = hex_val.lstrip('#')
return tuple(int(hex_val[i:i+2], 16) for i in (0, 2, 4))
print(hex_to_rgb("#3B82F6"))
# Output: (59, 130, 246)/* Classic */
.color { color: #ff0000; }
.color { color: rgb(255, 0, 0); }
/* Modern (Level 4) - Space separated */
.color { color: rgb(255 0 0); }
.color { color: rgb(255 0 0 / 50%); } /* with alpha */Frequently Asked Questions
What is HEX?
HEX is a hexadecimal representation of RGB values. It starts with a # followed by 6 characters (0-9, A-F). The first pair represents Red, the second Green, and the third Blue.
When should I use HSL?
HSL (Hue, Saturation, Lightness) is more intuitive for humans. It's easier to create color palettes by simply adjusting the Lightness for shades or Hue for complementary colors, without guessing RGB numbers.
What is opacity (alpha)?
Opacity controls the transparency of a color. In RGBA, it's a number between 0 (fully transparent) and 1 (fully opaque).
How common is Color Blindness?
Approximately 1 in 12 men and 1 in 200 women have some form of color blindness. It's important to use high contrast and not rely on color alone for critical information.