Does the eyedropper work in every browser?

The screen eyedropper relies on the browser EyeDropper API, which is available in recent Chromium-based browsers such as Chrome and Edge. In browsers that do not support it, the manual input and picker still work normally.

How is the nearest Tailwind color chosen?

The tool compares your color against the default Tailwind palette and returns the class with the smallest perceptual distance. It is a suggestion, not an exact match, so review it before committing to a design token.

Can I convert colors with transparency?

Yes. RGB and HSL outputs include the alpha channel when your input specifies one, so you can move between rgba() and hsla() representations.

Are my colors sent to a server?

No. All conversion and picking happens locally in your browser. Nothing about the colors you enter is uploaded or stored remotely.

Why do HSL values look slightly different after a round trip?

HEX and RGB are integer formats while HSL uses rounded percentages, so converting back and forth can introduce tiny rounding differences. The visible color stays effectively identical.

Color Converter & Picker

Convert colors between HEX, RGB, HSL. Get Tailwind suggestions and pick colors from your screen. Input a color value or use the pickers.

Input Color

Enter HEX, RGB(A), HSL(A), or CSS name.

Visual Picker

External Pickers

Conversions

Color representation in different formats.

HEX

RGB(A)

HSL(A)

Tailwind CSS

Background

Text Color

Uses exact HEX value. Finding closest named color is complex.

Preview

See color on light/dark background.

Dark

Preview Text (Light text suggested)
#0f172a

Color Palette

Collect colors you like.

Palette is empty.

About Color Converter & Picker

Color values rarely stay in one format. A designer hands you a HEX code, a CSS file wants RGB with an alpha channel, and a design system documents everything in HSL. This converter takes any of those inputs and shows the equivalent in every other format at once, so you never have to do the arithmetic by hand or hunt for a conversion table.

Beyond raw conversion, the tool surfaces the nearest Tailwind CSS color so you can map an arbitrary brand color onto the closest utility class instead of dropping arbitrary hex values that drift from your design tokens. An eyedropper lets you sample any pixel on screen — useful for matching a color from a screenshot, a logo, or a live page when you do not have the original source value.

Everything runs in your browser. Colors you paste or pick are never uploaded, which makes the tool safe for unreleased brand work and fast enough to use as a scratchpad while you iterate on a palette.

How to use Color Converter & Picker

Enter a color
Type or paste a HEX, RGB, or HSL value into the input, or use the eyedropper to sample a color from anywhere on your screen.
Read every format
The converted HEX, RGB, and HSL values update instantly, alongside the closest matching Tailwind CSS color class.
Adjust with the picker
Use the visual picker to nudge hue, saturation, or lightness and watch all formats stay in sync.
Copy and use
Copy the format you need straight into your CSS, design file, or component code.

Frequently asked questions

JSON Formatter · Beautifier · Validator

Format, minify, sort keys, and validate JSON/JSONC/JSON5 with optional JSON Schema validation. Supports comments and trailing commas.

Base64 Encoder / Decoder

Encode text or files to Base64, or decode Base64 back to its original form. Supports text input and file drag-and-drop.

QR Code Generator

Generate QR codes with customizable error correction levels, styles, and colors. Supports single and bulk generation with PNG and PDF export options.