Color Picker & Converter

HEX (hexadecimal) represents colors as a 6-character code like #ff6600. RGB (Red, Green, Blue) uses three numbers from 0-255 to mix light, like rgb(255, 102, 0). HSL (Hue, Saturation, Lightness) uses an angle 0-360° for the hue, and percentages for saturation and lightness, like hsl(24, 100%, 50%). This tool converts between all three formats in real time as you type. You can edit any format and all others update instantly.

WCAG (Web Content Accessibility Guidelines) contrast ratio measures the difference in luminance between two colors, typically text and its background. The ratio ranges from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black on white). WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. Higher contrast improves readability for users with visual impairments.

Complementary colors are opposite each other on the color wheel (hue + 180°), creating high contrast. Analogous colors sit next to each other (hue ± 30°), producing harmonious, low-contrast schemes. Triadic colors are evenly spaced at 120° intervals, offering balanced contrast. Monochromatic schemes use variations in lightness and saturation of a single hue. This tool generates all these palette types from any base color.

Select 2 to 4 color stops by clicking Add Stop, then pick a direction using the toggle buttons (to right, to bottom, to bottom right) or enter a custom angle in degrees. The gradient preview updates in real time. Use the copy button to copy the generated linear-gradient() CSS string directly to your clipboard for use in your stylesheets.

Yes, this Color Picker & Converter is completely free with no signup required. It runs entirely client-side in your browser — no color data is ever sent to any server. All conversions, contrast checks, palette generation, and gradient building happen locally on your device, ensuring your privacy at all times.

HEX is a base-16 number matching red, green, and blue intensities. HSL represents color in terms of human perception: Hue (the color type on a wheel), Saturation (vibrancy vs grayness), and Lightness (brightness vs darkness), which is often much easier for designers to adjust manually.

WCAG AA is the standard legal baseline for most websites, demanding a 4.5:1 ratio for body text. WCAG AAA is the strictest level, requiring a 7:1 ratio for normal text and 4.5:1 for bold/large headers to ensure maximum accessibility.

Lightness in HSL defines how close a color is to white (100%) or black (0%). Brightness (in HSV/HSB) measures the intensity of light or color relative to a fully saturated color, which is a slightly different mathematical projection.

Yes, the tool generates a range of tints (adding white / increasing HSL lightness) and shades (adding black / decreasing HSL lightness) from your base color, helping you build a comprehensive design color scale.

This color picker supports alpha transparency, enabling conversions to RGBA, HSLA, and 8-digit HEX values (like #ff6600cc). You can adjust the opacity slider to customize transparent color stops.