Color Converter

Convert colors between HEX, RGB, HSL, and HSV formats. Includes a color picker, live preview, and easy copy-to-clipboard functionality for CSS.

Click to pick a color
HEX
RGB
HSL
°
%
%

Color Format Overview

HEX Colors

HEX colors use hexadecimal notation to represent RGB values. Each pair of digits represents red, green, and blue channels (00-FF). Example: #FF5733

RGB Colors

RGB (Red, Green, Blue) uses decimal values from 0-255 for each channel. CSS syntax: rgb(255, 87, 51)

HSL Colors

HSL (Hue, Saturation, Lightness) is often more intuitive for designers:

  • Hue: Color wheel position (0-360°)
  • Saturation: Color intensity (0-100%)
  • Lightness: Light/dark balance (0-100%)

HSV/HSB Colors

HSV (Hue, Saturation, Value) is similar to HSL but uses Value (brightness) instead of Lightness. Common in design software like Photoshop.

When to Use Each Format

  • HEX: Most common in web development, compact notation
  • RGB: When you need alpha transparency (RGBA)
  • HSL: When adjusting colors programmatically (easy to lighten/darken)
  • HSV: Common in design tools and color pickers

Frequently Asked Questions

What is a HEX color code?
A HEX color code is a six-digit hexadecimal number representing RGB values. Each two-digit pair represents red, green, and blue (00 to FF). For example, #FF5733 means red=255, green=87, blue=51. HEX is the most common color format in web development.
What is the difference between HSL and HSV?
HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) are cylindrical color models. HSL uses Lightness (0-100%) where 50% is pure color. HSV uses Value (brightness, 0-100%). Both are more intuitive than RGB for color selection. HSL is more common in CSS, HSV in design tools.
How do I convert RGB to HEX?
Each RGB value (0-255) is converted to a two-digit hexadecimal number. R=255 becomes FF, G=87 becomes 57, B=51 becomes 33. Combine them with a # prefix: #FF5733. This tool does all conversions automatically.
What are CSS named colors?
CSS defines 148 named colors like 'red', 'blue', 'green', 'rebeccapurple', and 'transparent'. These can be used directly in CSS without hex codes. However, named colors have limited selection—hex codes give you 16.7 million colors.
What is RGBA vs RGB?
RGBA extends RGB with an Alpha channel for transparency (0 to 1). For example, rgba(255, 0, 0, 0.5) is 50% transparent red. The A value is 0 (fully transparent) to 1 (fully opaque). HEX doesn't support alpha; use RGBA or 8-digit HEX (#RRGGBBAA) instead.
How do I choose accessible color combinations?
Ensure sufficient contrast between text and background colors. The WCAG standard requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Use color contrast checkers to verify your combinations meet accessibility standards.

Related Tools