Color Toolkit
HEX / RGB / HSL conversion plus an auto-generated 10-step shade ramp (great for Tailwind palettes); one-click copy.
>_ USAGE GUIDE
Enter a color in any format — HEX, RGB, or HSL are all recognized — and all three representations convert in real time with one-click copy. The standout feature is the auto-generated 10-step shade ramp: from your base color it derives a full gradient from darkest to lightest, which makes building a Tailwind palette (blue-100 through blue-900) or a design system's tonal scale almost effortless.
- Paste a color: HEX, RGB, or HSL input is detected automatically
- Read all three formats: they appear side by side; copy the one your code needs
- Open the shade ramp: ten tonal steps derived from your base color, ready to copy one by one or as a group
Typical scenarios: the design mockup lists RGB but your code wants HEX; a component library needs a complete tonal scale; dark-mode work requires derived dimmed variants. Color math is pure computation and runs locally in real time.
>_ FAQ
Q1 · What are HEX, RGB, and HSL each best for?
HEX (#1E90FF) is the most compact and works everywhere CSS and design tools do. RGB (rgb(30,144,255)) is convenient when handling alpha (rgba). HSL (hsl(210,100%,56%)) maps to how humans think — hue, saturation, lightness — and is the most intuitive for shading a single hue: adjust only L and you get a coherent scale. All three describe identical colors; choose per task.
Q2 · How is the shade ramp generated, and why does it look better than hand-picked steps?
The ramp keeps the base hue and samples ten points along the lightness axis at perceptually even spacing, nudging saturation near the extremes so neither end goes gray. Hand-made ramps often drift in hue as lightness changes; the algorithm keeps the hue constant, which reads as a unified family. Copy the steps individually or drop the whole set into a Tailwind config.
Q3 · Why does the converted color look slightly different from the design file?
The usual cause is color profiles: the mockup is calibrated to sRGB, your display applies gamut mapping, and browsers process profiles in their own way. The converted value itself — the math — is exact; the difference appears at display time. When colors must match across devices, trust the values, not the eye.
Q4 · How do I express a color with transparency?
HEX supports 8-digit form (#1E90FF80, last two digits are alpha); RGB uses rgba(30,144,255,0.5); HSL has hsla(...), and modern CSS also accepts rgb(... / 0.5). The shade ramp is built for opaque colors — add the alpha channel in code when you need transparency.
Q5 · Does the converter need an internet connection?
No. Color conversion and shade-ramp generation are pure math running in your browser — the page makes no network requests after loading and works fully offline. Design work on a plane or in a restricted network is unaffected, and no color you paste ever leaves the machine.