Color Converter

A pure color toolkit: convert between HEX, RGB, and HSL in real time, explore classic color harmonies, and generate cohesive palettes from a single base color. Everything updates live as you pick or type a color, and every result stays on your device.

How to use

1. Pick a color - click the color picker or type a hex code such as #3b82f6. The preview swatch updates instantly.
2. Read the conversions - HEX, RGB, and HSL values are shown side by side with one-click Copy buttons, so you can paste the exact value your stylesheet or design tool expects.
3. Explore harmonies - complementary, analogous, triadic, and split-complementary colors are computed automatically. Click any harmony swatch to load it as your active color and see its own conversions, harmonies, and palette.
4. Generate a palette - choose 8, 12, or 16 colors. The palette is derived from your base color with controlled variations in lightness, saturation, and hue, and each swatch is kept distinct from its neighbors. Click any swatch to load it.

Color harmonies

Color theory identifies relationships between colors on the color wheel that are naturally pleasing. The tool computes four of them from your base hue:

• Complementary - the color directly opposite (180° hue shift). Maximum color contrast and the quickest way to make something stand out.
• Analogous - the two neighbors (±30°). Harmonious and low-tension, ideal for backgrounds, gradients, and UI sections that should feel calm.
• Triadic - three colors evenly spaced (120° apart). Vibrant and balanced, a popular choice for brand palettes and flat illustrations.
• Split-complementary - the complement's two neighbors (±150° and ±210°). Nearly the same color contrast as complementary but with less tension between the two supporting colors.

Each harmony keeps your base saturation and lightness, so the swatches stay in the same visual family as the color you started from.

Palette generation

The palette starts from your base hue and walks a ladder of lightness tiers - darker and lighter steps around the base - then sweeps saturation variants, and finally adds slightly hue-shifted accents so the set feels cohesive rather than monotonous. Constant colors (a near-black and a near-white) are appended so the palette also contains trustworthy text and surface colors. Duplicate or visually identical swatches are filtered out, and the result is capped at the size you chose: 8, 12, or 16 colors.

This makes the tool useful for concrete tasks:

• Pixel art and game assets - a small, harmonious ramp of shades and tints from one hue.
• UI themes - pick your brand blue, then pull the text, border, and accent colors from one consistent family.
• Data visualization - generate categorical colors that share a common base so charts read as a set.
• Illustration - analogous and triadic palettes give you shading directions without gray.

Click any generated swatch to load it as the active color; from there you can refine it via RGB or HSL input or feed it into the harmonies again.

Input formats

The tool is deliberately forgiving about how colors are entered:

• HEX accepts #rgb, #rrggbb, with or without the # prefix.
• RGB accepts rgb(r, g, b), r, g, b, or r g b with values 0–255.
• HSL accepts hsl(h, s%, l%) (hue 0–360, saturation and lightness 0–100 %). A negative hue is wrapped into the valid range automatically.

Invalid input is simply ignored - the preview and conversions always reflect the last valid color.

Notes

• All conversions and calculations are pure client-side math. No color data leaves your browser.
• The color converter focuses on color itself. To judge whether a text/background pair passes accessibility levels, use the dedicated Contrast Checker, which reports both WCAG 2.1 ratios and the perceptual APCA (Lc) levels.
• The preview swatch reflects the exact HEX your conversions are computed from, so what you see is what the numbers describe.