Color Converter (Hex, RGB, HSL)
Color Preview
#6366f1
Usage Guide
Color Converter is an online tool for converting colour values between HEX, RGB, HSL, HSV, and CMYK formats — everything running locally in your browser. Colour format conversion is a daily task for designers and front-end developers: design tools like Figma export HEX codes; CSS uses both HEX and RGB/HSL; print workflows require CMYK values; image processing libraries might use HSV or normalized RGB floats; accessibility checkers work with sRGB values for contrast calculations. Switching between these formats manually using formulas is tedious and error-prone. This tool accepts any valid colour value and instantly shows the equivalent value in all supported formats simultaneously. Type a HEX code, paste an RGB triple, enter an HSL value, or pick a colour from the native colour picker — all representations update in real time. A large colour swatch shows the actual colour for immediate visual confirmation. The converter correctly handles the full sRGB gamut and clamps out-of-range values gracefully. You can also enter CSS colour names (e.g. "rebeccapurple", "tomato") and see all their numeric equivalents. For teams that maintain design tokens or colour palettes across multiple platforms (iOS, Android, web, print), this tool serves as a quick reference for ensuring colour consistency across different format requirements.
- Enter a colour value — Type or paste any colour value into the input field: a HEX code (#6366f1 or #fff), an RGB value (rgb(99, 102, 241)), an HSL value (hsl(239, 84%, 67%)), or a CSS colour name. The converter detects the format automatically.
- Use the colour picker — Click the colour swatch or the colour picker button to open the browser's native colour picker. Choose any colour visually and all format values update immediately.
- Read all format equivalents — The tool displays the chosen colour simultaneously in HEX, RGB (0–255), RGB (0–1 normalized), HSL (degrees, percent), HSV, and CMYK. All values update together whenever you change any input.
- Adjust individual channels — Fine-tune the colour by modifying individual channel values — for example, change only the alpha channel in RGBA, or nudge the hue in HSL for a slightly warmer or cooler variant of the same colour.
- Copy any format — Click the "Copy" button next to any format row to copy that specific value to your clipboard. For example, copy the HEX code for CSS, the RGB value for a design tool, or the CMYK value for a print specification.
- Verify with the swatch — The large colour preview swatch always shows the actual rendered colour. Use it to visually confirm that the converted values correspond to the colour you intended before copying.
Frequently Asked Questions
What colour formats does this tool support?
The tool converts between three widely-used CSS colour formats: HEX (#RRGGBB), RGB (rgb(r, g, b) with values 0–255), and HSL (hsl(h, s%, l%) — Hue 0–360°, Saturation and Lightness 0–100%). It also accepts CSS named colours such as "tomato" or "deepskyblue" as input.
What is the difference between RGB and HSL?
RGB describes a colour by its red, green, and blue light intensities (0–255 each). HSL describes a colour by its Hue (position on the colour wheel, 0–360°), Saturation (colourfulness, 0–100%), and Lightness (brightness, 0–100%). HSL is often more intuitive for designers because adjusting lightness or saturation is straightforward.
Is this colour conversion done on a server?
No. All conversion logic runs entirely in your browser using native JavaScript colour maths. Nothing is sent to any server.
Can I use this tool offline?
2Kit is a Progressive Web App (PWA). After your first visit it is cached and works fully offline.
Why do I need to convert between colour formats?
Different tools and workflows use different colour formats. Design tools often output HEX, while CSS animations and theme systems may use HSL for easier programmatic manipulation. This tool lets you quickly translate between formats without mental arithmetic.
Technical Implementation
All processing runs entirely in your browser — no data is ever sent to any server. This tool works fully offline as a Progressive Web App (PWA): after the first visit, all pages and assets are cached by a Service Worker and remain available without an internet connection. Your input data never leaves your device, making it safe for sensitive content including API keys, passwords, private configuration, and confidential documents.