6-digit hex code
#1733a6rgb(23, 51, 166)hsl(228, 76%, 37%)bg-[#1733a6]--color-primary: #1733a6;How to Use the Color Picker
- Click the large color swatch or the color input to open the native color chooser.
- Alternatively, type a hex value directly into the HEX field (with or without the
#prefix). - Edit the R, G, B or H, S, L fields individually — all panels stay in sync.
- Copy any CSS snippet from the CSS Snippets panel with one click.
- Click any swatch in the Shade Palette to jump to that shade.
Understanding Color Formats
- HEX — A 6-digit base-16 code like
#6d28d9. The most common format for web and design tools. - RGB — Red, Green, Blue channels from 0–255. Used in CSS as
rgb(109, 40, 217). - HSL — Hue (0–360°), Saturation (0–100%), Lightness (0–100%). More intuitive for creating color variations.
- Tailwind — Use arbitrary value syntax like
bg-[#6d28d9]to apply any color in a Tailwind CSS project.
Frequently Asked Questions
How is the shade palette generated?
The shade palette keeps your color's hue and saturation constant while stepping through 10 lightness values (95, 85, 75, 60, 50, 40, 30, 20, 12, 5). This mirrors the Tailwind CSS color scale approach.
Why does editing HSL sometimes not perfectly round-trip to HEX?
HSL uses floating-point math and rounding. Small rounding differences can shift the HEX value by 1–2 in the last digit. The color you see is accurate; only the final digit may differ by ±1.
Can I enter RGBA or HSLA values?
Not directly — this tool works with fully opaque colors. For transparency, take the HEX or RGB value shown and manually add an alpha channel in your code (e.g. rgba(109, 40, 217, 0.5)).
Is the color eyedropper supported?
The native browser color input includes an eyedropper on supported browsers (Chrome/Edge). Click the color swatch and look for the eyedropper icon inside the browser's color picker popup.