Files Stay On Your Device No watermark Works offline
For companies

HEX to Tailwind color

Find the closest Tailwind color to any HEX code, free and online. Paste your brand color and get the nearest name from the default palette, like blue-600, for Tailwind 4 or Tailwind 3. A ΔE value tells you how close it is, and two swatches show the difference.

How to match a HEX color to Tailwind

  1. 1Choose Tailwind 4 or Tailwind 3 under "Tailwind version"
  2. 2Paste your HEX code into "Color"
  3. 3Read the nearest Tailwind name and its ΔE, then copy it
  4. A class color name such as blue-600

How it works

  • Both versions.Tailwind 4 changed the default colors. Switch versions and the match is found again
  • Honest about the gap.You see "exact" or "nearest, ΔE" with the CIEDE2000 distance
  • Nothing is sent anywhere.The palette ships with the page and the search runs in your browser

What you can do

  • Match a HEX code to the nearest of 22 palettes in 11 steps each, from slate-50 to rose-950
  • See the difference between versions: #2563EB is exactly blue-600 in Tailwind 3 and blue-600 at ΔE 2.22 in Tailwind 4
  • Compare your color with the Tailwind color in two swatches side by side
  • Read the nearest match for both versions and the nearest CSS name in the list, whichever version is chosen
  • Paste rgb(), hsl() or oklch() from a design file instead of HEX

Good to know

  • The result is the name only, like amber-300. Add the utility yourself: bg-amber-300, text-amber-300 or border-amber-300
  • Only the default palette is searched. Colors you defined in your own theme are not known, and black and white are left out
  • Tailwind 4 defines its colors in OKLCH, Tailwind 3 in HEX, taken from Tailwind 4.1.11 and 3.4.17. The same name can look a little different in each
  • If the ΔE is high, no default color fits well. Then keep your own color, or build a scale from it with the Tailwind palette generator

Questions

How do I find the closest Tailwind color to a HEX code?

Paste the HEX code into the field and choose your Tailwind version. The nearest color name appears in the big line, with its ΔE and a swatch next to your own color.

Why do I get different names for Tailwind 3 and 4?

Tailwind 4 redefined its palette in OKLCH, so most colors moved slightly. #FFC61A, for example, is closest to amber-400 in Tailwind 3 and to amber-300 in Tailwind 4.

What ΔE is close enough?

Below 1 the two colors are hard to tell apart. Up to about 2 or 3 most people accept the match for a button or a background. Above that the Tailwind color is noticeably different.

Is my color sent anywhere?

No. The comparison runs in your browser and no request is made with your color.

Related tools

More tools in Web & code

All tools in Web & code

One site for every file job. What’s yours?

Stop hopping between converter sites. Pick from 410+ tools, or a recipe that chains several.

Drop a file here

A pasted file works too.

or search for a tool

Open an app

How it works

From “ugh, this file” to done, in three steps.

  1. Drop it, or pick a task

    No file? Search for what you need. Files are processed on your device, not uploaded for processing.

  2. Pick what you want

    Smaller, another format, signed, merged. One click, no settings to study first.

  3. Make it a recipe

    Need three steps in a row every week? Chain them once and run the same recipe next time.

For companies

One approved toolbox for the whole team.

In offices, on building sites and in agencies, teams handle sensitive files all day. ToolRecipe gives everyone the same tools and the same recipes, and the files are processed on each person's own computer.

Plan an introduction call What companies get
  • Files are processed on the employee's device
  • Company recipes everyone runs the same way
  • One place instead of ten converter sites

How it works

Small tools that run in your browser.

What runs where

Your browser keeps the tools you use: the same kind of tools you would otherwise use on a website. Your files stay on your device and are not uploaded.

A tool your browser has kept also works without internet. Under Offline, at the bottom of this page, you can save everything at once, and the site keeps working without a connection.

Some tools have AI built in, for example to remove a background or enlarge a photo. Your browser downloads their AI models once, from ToolRecipe itself, and then runs them on your device. No tool sends your files to an online AI service or to us.

On a computer, these tools use the graphics chip when it passes a short check, because that is usually faster. On a phone they run on the processor, with settings that fit in a phone’s memory.

Using a tool

Give the tool your file, choose what you want, save the result.

  • Start on the home page

    Drop a file in the box on the home page, or try a sample photo. Pick what you want to do and press “Open tool”. The tool opens with your file in it.

  • Put a file in

    Drop it anywhere on the page, pick it with “Choose a file” or paste it. No file yet? Search for the job, like “heic to jpg”.

  • Choose the settings

    Each tool shows only the settings it needs. Often one click is enough.

  • Save the result

    Saved files go to your downloads. A copy also waits in Results.

  • Results

    The Results tab on the right edge keeps your latest results in this browser until you remove them. “Clear all” empties it.

Chaining tools

What one tool makes can go straight into the next, without saving it and opening it again.

  • “Use it in”

    Tap a result in Results and pick a tool under “Use it in”. The result is handed on to that tool.

  • Drag it

    You can also drag a result onto an open tool. On a phone, touch and hold it first.

  • From a chain to a recipe

    To run the same tools again later, make a recipe of them in the recipe builder.

The recipe builder

Drop a file in the box on the home page and add the steps one at a time. Nothing runs until you press “Run recipe” or “Open tool”.

  • Pick what to do

    The box shows a tile for each kind of job your file allows, such as “Make it smaller”. A tile opens its ready-made choices and every tool of that kind. “Back” returns to the tiles.

  • Add steps

    Each choice becomes a numbered step in the row at the top. “Add another step” shows suggested next steps, then the tiles for what the last step makes. The cross on a step removes it, and “Undo” brings it back.

  • Name it

    The recipe is called “My recipe” until you name it. Press the pen next to the name to change it.

  • Run it

    With one step, press “Open tool” and the tool opens with your file. With two or more steps, press “Run recipe”. The recipe opens on its own screen, and the steps run one after the other.

  • Steps that need you

    Most steps run by themselves. A step marked “Your turn” waits for you, for example when you need to sign a PDF. When you are done, press “Continue to next step”, or “See the result” on the last step.

  • Save or start over

    “Save the current steps as a recipe” keeps the steps under My recipes. You do not have to run them first. On the recipe screen, “Save this recipe” under the steps does the same. “Start over” clears the box for another file.

Recipes

A recipe is a few tools in a row: what one step makes goes into the next.

  • Ready-made recipes

    “All recipes” in the menu lists recipes for common jobs. Drop your file on one and it runs step by step.

  • Make your own

    Build one in the box on the home page. On My recipes, “New recipe” opens the same builder at the top of the page, with a search box for the tool you need next.

  • My recipes

    Your saved recipes are under “My recipes” in the menu, in this browser. Open one to rename it or change its steps. Changes are saved at once. “Start with a file” runs it on a new file. “Delete” asks you to confirm, then deletes it.

  • Share a recipe

    “Copy share link” makes a link to the steps, never to your files. Nothing starts for the person who opens it until they choose a file of their own.

Ways of working

Tools and recipes run in your browser, on your device.

  • Start from a file

    Drop it in the box on the home page and pick what you want to do. Choose one step to open its tool, or add more to make a recipe.

  • Start from a tool

    Search for the job or open a tool from the menu. When the result is ready, tap it in Results and pick the next tool under “Use it in”.

  • Keep the steps

    A saved recipe keeps its name, its tools in order and the setting of each step. It never keeps your files or their names.

  • Come back later

    Open My recipes in the same browser, on the same device, and run a recipe on a new file. A recipe stays there until you delete it or clear your browser data.

Finding tools again

Every tool and every recipe has its own address.

  • Bookmark it

    On a tool’s page, press Ctrl+D (⌘D on a Mac) to keep it in your browser’s bookmarks.

  • On your home screen

    A tool can sit on your phone’s home screen like an app. See Install, below, for how.

  • Your own recipes

    Recipes you saved are under “My recipes” in the menu.

  • The stars

    The stars under a new result ask how well the tool worked. Your answer helps us improve it. Stars do not save the tool for you.

Who uses what

Tool sets for common jobs.

Put a tool on your home screen

The icon opens that tool, like an app.

iPhone and iPad

  1. Open the tool in Safari
  2. Tap Share (the square with the arrow)
  3. Choose “Add to Home Screen”, then Add

Android

  1. Open the tool in Chrome
  2. Tap the menu (⋮) at the top right
  3. Choose “Add to Home screen” or “Install app”

Computer

  1. Open the tool in Chrome or Edge
  2. Click the install icon in the address bar
  3. Choose Install

Regarding updates

We try to do regular updates and post new tools.

How you can check that files stay here

Tools read your files and make the result in this browser, on your device. Your files are not uploaded to be processed.

A security policy lets this page contact one address only: our own server, for counts. It passes page views and a fixed list of actions on to an analytics service in the EU, which counts them for us. Neither gets your files or their names. Anything else is blocked, and the badge at the top turns red and counts it.

If a tool fails, the page counts that too: only the kind of error and where in our code it happened, never the error's text, your files or what you typed.

If you send us your email address to ask about ToolRecipe for companies, we store it with that request at our analytics service in the EU and receive it by mail, to answer you. Write to info@toolrecipe.com to have it deleted.

Results stay in this browser until you clear them.

Works offline

This site is saved on this device, so it opens without a connection. Big tools are saved the first time you use them.

Skills

Claude skills we use ourselves, one job each.