Tool StudioHEX, RGB, and HSL conversion, plus instant palettes
Palette
The same color, lighter to darker — for one color used consistently across a UI. More on palette types in the FAQs below.
Enter a color
Type a HEX code or RGB values.
See every format
HEX, RGB, and HSL update together.
Generate a palette
Pick a palette type and copy any swatch.
Enter a color in HEX or RGB — typing either updates the other instantly — and see HSL alongside it, then generate a palette built from that exact color: Shades (six lightness steps from dark to light, a monochromatic palette), Complementary (the opposite hue, for high-contrast accents), Analogous (neighboring hues, naturally harmonious), or Triadic (three hues evenly spaced 120° apart, vibrant but balanced). Every swatch shows its HEX code and copies with one click. All the color math — the exact wheel offsets and lightness steps each palette type uses — runs entirely in your browser, with nothing uploaded or sent anywhere.
Shades keep the same color but vary its lightness, light to dark — good for one color used consistently across a UI. Complementary uses the exact opposite color on the color wheel, giving high contrast — good for accents. Analogous uses colors sitting next to this one on the wheel, which naturally look harmonious together with low contrast. Triadic uses three colors evenly spaced around the wheel, giving a vibrant but balanced look.
HSL is shown as live output from your HEX/RGB input — enter either of those and HSL updates automatically.
Yes — varying only the lightness of a single hue is exactly what "monochromatic" means in color theory; Shades here is that palette type, spanning both darker shades and lighter tints of your base color in one set.
A shade is a color mixed toward black (darker); a tint is mixed toward white (lighter). The Shades palette here covers both directions — from a dark shade to a light tint — rather than picking just one.
Six steps — 20%, 35%, 50%, 65%, 80%, and 95% lightness — keeping the same hue and saturation as your base color throughout.
±15° and ±30° from your base color's hue on the color wheel, plus the base color itself — five colors total, close enough to stay harmonious.
Yes — three colors evenly spaced at 0°, 120°, and 240° around the color wheel from your base hue.
Yes — the HEX and RGB fields are linked both ways: type into either one and the other, plus HSL, updates live.
No — every conversion and palette is calculated entirely in your browser; nothing is sent to a server.
Yes — click any swatch to copy its HEX code instantly.
Shades — using one hue at different lightness levels keeps a UI visually consistent while still giving enough contrast for text, buttons, and backgrounds. Complementary and Triadic work well for a single accent color, not a whole interface.
Convert SVG markup or files to PNG images at any scale, from 1x up to 8x for crisp high-resolution output. All rendering happens in your browser using canvas — nothing is uploaded.
Pick any color from your screen, an uploaded image, or a swatch, and get instant HEX, RGB, and HSL values. Uses the browser's native EyeDropper API where available. All processing happens in your browser.
Generate every standard favicon size from one image — 16×16 up to 512×512, plus Apple touch icon and Android/PWA sizes — along with a ready-to-use web manifest. All processing happens in your browser.
Resize images to exact pixel dimensions or by percentage, with an aspect-ratio lock. Convert to PNG or JPEG. Preview before/after size and dimensions. All processing happens in your browser — images never leave your device.