Enter any color in HEX, RGB, or HSL and see it converted to every format instantly. Explore the color with interactive sliders, generate harmonious palettes, and visualize your color in a live 3D color space.
Pro tip: HSL is the most intuitive format for design work. Hue picks the color, Saturation controls vibrancy, and Lightness adjusts brightness. Once you think in HSL, creating consistent color systems becomes second nature.
How to Use the Color Converter
Type or paste any color value into the input field — HEX codes like #3B82F6, RGB values like rgb(59, 130, 246), or HSL values like hsl(217, 91%, 60%). The tool auto-detects the format and instantly converts to all three. Drag the HSL sliders to explore variations, click a palette swatch to load it as the active color, and rotate the 3D visualization to see where your color sits in the color space.
HEX vs. RGB vs. HSL: When to Use Each
HEX is the most compact format and the standard in CSS. It is great for quick communication and code, but hard to mentally manipulate. RGB describes colors as mixtures of red, green, and blue light (0–255 each). It maps directly to how screens display color but is unintuitive for design decisions. HSL (Hue, Saturation, Lightness) is the most human-friendly: pick a hue on the color wheel, set how vivid you want it, then adjust brightness. Use HEX in your code, RGB when debugging rendering, and HSL when designing.
Color Theory: Building Harmonious Palettes
Color harmony is based on geometric relationships on the color wheel. Complementary colors sit opposite each other (180° apart) and create maximum contrast. Analogous colors are neighbors (30° apart) and feel cohesive and calm. Triadic colors form an equilateral triangle (120° apart), offering vibrant variety. Split-Complementary uses the two colors adjacent to the complement, giving contrast with less tension. Each scheme has its personality — the best choice depends on your project’s mood and purpose.
WCAG Accessibility and Contrast Ratios
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background colors to ensure readability for people with visual impairments. AA requires a ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). AAA requires 7:1 for normal text and 4.5:1 for large text. Over 300 million people worldwide have color vision deficiency — checking contrast is not optional, it is a professional responsibility.
Tints, Shades, and Tones Explained
A tint is a color mixed with white (increasing lightness). A shade is a color mixed with black (decreasing lightness). A tone is a color mixed with gray (decreasing saturation). These are the building blocks of any robust design system. By generating a 9-step scale from a single base color, you create a consistent palette for backgrounds, borders, hover states, and text without introducing new hues.
The 3D Color Space
The interactive 3D visualization shows the HSL color space as a cylinder. The vertical axis represents lightness (black at bottom, white at top), distance from center represents saturation, and the angle around the cylinder represents hue. Your selected color is marked with a glowing sphere. This spatial view helps you understand relationships between colors that are invisible in flat pickers — like why desaturated pastels all cluster near the center axis regardless of hue.
Color Accessibility and Contrast Ratios
WCAG defines two compliance levels for text contrast: AA requires a minimum ratio of 4.5:1 for normal-sized text and 3:1 for large text (18pt or 14pt bold), while AAA raises those thresholds to 7:1 and 4.5:1 respectively. Contrast ratio is calculated from the relative luminance of each color, which is derived from the linearized RGB channel values using the formula L = 0.2126R + 0.7152G + 0.0722B — not simply from HSL lightness. Two colors with identical HSL lightness values can still produce very poor contrast if their luminance contributions from R, G, and B channels differ significantly; for example, a saturated yellow and a saturated blue at the same lightness will yield a much higher contrast ratio than two colors that appear similar in the HSL model. Always verify contrast with a proper calculator before shipping, rather than relying on visual intuition alone.
Once you have your colors dialed in, you may want to bring them into your stylesheets directly — the CSS Generator lets you build and preview CSS rules using your converted color values. If you are working on written content alongside your design work, the SEO Content Analyzer can help ensure your pages are as well-optimized as your color palette.