TetraKits
Pick any color visually and copy HEX, RGB, and HSL values instantly. Drag the hue slider, adjust saturation and lightness, and paste the code into CSS, Figma, or your design system. The TetraKits Color Picker runs entirely in your browser — free, private, and ready on mobile or desktop.
Overview
Landing pages, brand guidelines, and UI components need consistent color values across HEX, RGB, and HSL. A visual picker eliminates guesswork — drag, preview, and copy the exact code your stylesheet needs.
How to use the color picker
- Choose a color — Click the color swatch or use hue, saturation, and lightness sliders to find your shade.
- Read HEX, RGB, and HSL — All three formats update live. HEX (#FF5733) is common in CSS; RGB and HSL suit design tokens.
- Copy the value you need — Click copy next to any format. Browse named colors in RGB color codes for palette inspiration.
Common use cases
- Choose a color: Click the color swatch or use hue, saturation, and lightness sliders to find your shade.
- Read HEX, RGB, and HSL: All three formats update live.
- Copy the value you need: Click copy next to any format.
- Bookmark for quick access: Save the tool for repeat tasks without installing an app.
Frequently asked questions
What is the difference between HEX and RGB?
HEX (#RRGGBB) is a compact hex notation for web CSS. RGB (rgb(255, 87, 51)) expresses red, green, and blue channels from 0–255. Both represent the same color.
When should I use HSL?
HSL (hue, saturation, lightness) makes it easier to create lighter/darker variants of the same hue — useful for design systems and theme generation.
Can I enter a HEX code directly?
Yes. Type or paste a HEX value and the picker updates the swatch and RGB/HSL equivalents.
Are picked colors saved?
No. Colors exist only in your session. Copy values before leaving the page.
Is this color picker free?
Yes. Unlimited picking with no signup; everything runs locally in your browser.
