Color Converter & Palette

A free tool to convert between HEX, RGB, and HSL color codes, and auto-generate Tailwind CSS compatible palettes. Extract colors easily with an intuitive color picker. Works entirely in your browser, ensuring your data is never sent to any external server.

HEX

RGB

HSL

Click to copy HEX

Hue160ﾂｰ

Saturation84%

Lightness39%

Enable Opacity

Generated Palette (Click to copy HEX)

Guide & Terminology

What are HEX, RGB, and HSL?

Representing colors in web design can be done in various formats, each serving a unique purpose.

How to Use

Real-time Conversion: Input or paste a value into any HEX, RGB, or HSL field to instantly view the converted equivalents.
Color Picker & Sliders: Use the intuitive sliders or the visual color picker UI to tweak colors and obtain exact values.
Automated Palette: Selecting a base color will automatically generate a dynamic 11-step light-to-dark palette (Shades & Tints) ranging from 50 to 950.
Export: Click the "Download" button to save the generated palette as a CSS variables file for immediate use in your projects.

Terminology

HEX (Hexadecimal): A 6-character code like #10B981 representing red, green, and blue intensities. It's the most common format in CSS because it's concise.
RGB (Red, Green, Blue): Specifies the intensity of each primary color of light from 0 to 255. Maps directly to screen color rendering.
HSL: Defines colors intuitively via Hue (0-360 angle), Saturation (0-100% intensity), and Lightness (0-100% brightness).

Common Use Cases

Instantly generating a full Tailwind CSS compatible monochromatic palette (50-950) from a single brand hex code.
Extracting the exact RGB values of a color to use in a canvas drawing script.

Security

All color calculations and conversions are performed locally in your browser.

Related Tools

Find more utilities to streamline your workflow

Image Optimizer (Resize/Compress)

A free tool to resize, compress, and convert PNG, JPEG, WebP, and AVIF images. Supports lossless compression and bulk exporting. Works entirely in your browser, ensuring your images are never uploaded to any external server.

Open Tool

Base64 ↔ Image Converter

A free tool to convert images to Base64 data URIs, or decode Base64 text back to downloadable images. Convenient for directly embedding images into HTML or CSS. Works entirely in your browser, ensuring your image files are never uploaded to any server.

Open Tool

Image Text Extractor (OCR)

A free tool to extract text from images with high accuracy using AI OCR. Supports multiple languages for scanned documents and screenshots. Works entirely in your browser, ensuring your images are never uploaded to any external server.

Open Tool

QR Code Generator

A free tool to instantly generate custom QR codes from URLs or text. Freely customize colors and error correction levels, and download as PNG/SVG. Works entirely in your browser, ensuring your input data is never sent to any external server.

Open Tool