Files Stay On Your Device No watermark Works offline
For companies

HEX to HWB

Convert HEX to HWB online, free and in your browser. Paste a HEX code and get the CSS hwb() value: hue, whiteness and blackness, ready to copy. HWB is easy to tweak by hand, because more white makes a tint and more black makes a shade.

How to convert HEX to HWB

  1. 1Paste a HEX code into "Color", or pick one with the color picker
  2. 2Read the hwb() value in the big line under the field
  3. 3Click the copy button next to it
  4. Your color as hwb(), ready for your CSS

How it works

  • Written the CSS way.The result looks like hwb(45.07 10.2% 0%), the syntax of CSS Color 4
  • Nothing is sent anywhere.The conversion is a little arithmetic that runs in your browser
  • Every notation below.RGB, HSL, Lab, OKLCH, XYZ and more appear in a list, each with a copy button

What you can do

  • Turn a HEX code into hwb(), for example #FFC61A into hwb(45.07 10.2% 0%) and #2563EB into hwb(221.21 14.5% 7.8%)
  • Type short or long HEX: #FC0, #FFCC00, and on this page also without the #
  • Paste rgb(), hsl(), lab(), oklch() or a CSS color name instead, and still get HWB
  • Pick a color with your browser's color picker and watch the HWB value follow
  • Copy any other notation of the same color from the list, and see the nearest CSS name and Tailwind colors

Good to know

  • HWB is a different way of writing the same sRGB colors as HEX, so nothing is lost or gained in the conversion
  • The hue is given with up to two decimals, whiteness and blackness with one. They describe the 8-bit color of the HEX code
  • A gray has no hue. It is written with a hue of 0, for example hwb(0 50.2% 49.8%) for #808080
  • A HEX code with alpha, like #FFCC0080, is read without its transparency

Questions

What is HWB?

HWB stands for hue, whiteness and blackness. You start from a pure hue on the color wheel and mix in white and black. CSS writes it as hwb(hue whiteness blackness), for example hwb(200 30% 20%).

Why convert HEX to HWB?

A HEX code is hard to change by eye. In HWB you lighten a color by raising the whiteness and darken it by raising the blackness, while the hue stays where it is.

Can I use hwb() in my stylesheet?

Yes. hwb() is part of CSS Color 4 and current browsers read it. If a tool you use does not, keep the HEX code there.

Is my color sent to a server?

No. The HEX code is converted by your browser on your own device. No request is made with it.

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.