Mr. Tools

How to

How to use Color Picker, Image, and Transparency Support

A browser-only color tool for picking a color and converting it between HEX, RGB, and HSL. You can review the current color, compare nearby tones, and reuse recent colors in the same workspace. Check CSS color codes, convert design-spec values, and compare similar tones without leaving the browser.

Use Color Picker, Image, and Transparency Support
Color Picker, Image, and Transparency Support thumbnailColor Picker, Image, and Transparency Support thumbnail
Steps
2 steps
Guide
With screenshots
Content
Notes and FAQ

Use Cases

When to use it

  • Check a CSS color code quickly
  • Convert RGB or HSL values from a design spec
  • Compare similar tones side by side
  • Convert a color code from Figma or Photoshop to another format
  • Compare nearby tones to check accessibility
  • Quickly reuse a color you used recently

Capabilities

What this tool can do

  • Convert between HEX, RGB, and HSL
  • Preview the current color and copy each format
  • Reuse the tone palette and recent colors
  • Pick a color from the screen using the eyedropper
  • Auto-save up to 20 recently used colors
  • Adjust opacity with the alpha slider

Steps

Steps

The order of operations and checkpoints are listed so you can proceed while looking at the screen.

STEP 1

Pick a color and fine-tune the values

Use the color picker on the left, then adjust the same color through the HEX, RGB, or HSL fields if needed.

Checkpoints

  • The current color preview changes to the selected color
  • HEX, RGB, and HSL stay synchronized as the same color
  • Invalid input is shown on the related field

Actions on this screen

01
Color picker

Start with the picker to get close to the target color before fine-tuning.

Supporting capture showing where to use Color pickerSupporting capture showing where to use Color picker
02
Check HEX

Use HEX as the main reference when you want to paste the value into CSS or configuration files.

Supporting capture showing where to use Check HEXSupporting capture showing where to use Check HEX
03
Adjust RGB and HSL

Match numeric values when you need to align with a design spec or existing code.

Supporting capture showing where to use Adjust RGB and HSLSupporting capture showing where to use Adjust RGB and HSL

STEP 2

Copy the format you need and reuse nearby or recent colors

Copy HEX, RGB, or HSL from the current color panel, then reuse nearby tones or recent colors when needed.

Checkpoints

  • The required format can be copied
  • Nearby tones can be selected from the palette
  • Recent colors can be reused

Actions on this screen

01
Copy by format

Copy HEX, RGB, or HSL depending on where you need to use the color.

Supporting capture showing where to use Copy by formatSupporting capture showing where to use Copy by format
02
Tone palette

Choose a slightly lighter or darker variation from the palette to compare quickly.

Supporting capture showing where to use Tone paletteSupporting capture showing where to use Tone palette
03
Recent colors

Colors you used recently are stored in the browser so you can reuse them without rebuilding the same value.

Supporting capture showing where to use Recent colorsSupporting capture showing where to use Recent colors

Notes

Notes

Important points are grouped with reasons so you can make decisions before using the tool.

What to check

Treat one current color as the source of truth

HEX, RGB, and HSL are just different expressions of the same color. Fix the current color first, then choose the format you need.

What to check

Use the tone palette to compare nearby colors

When you want a slightly lighter or darker variation, choosing from the tone palette is faster than repeating manual input changes.

Note

Saved colors depend on browser storage

Recently used colors are stored in the browser only. Clearing browser data will also clear the color history. Keep a separate note of any important color codes.

FAQ

Questions about Color Picker, Image, and Transparency Support

Questions that make decisions easier before use are summarized first.

Are selected colors sent anywhere?

No. Picking, converting, copying, and saving recent colors all stay inside the browser.

Where are recent colors stored?

Recent colors are stored only in the browser storage so you can reuse them on the same device and browser.

Can I pick a color from the screen with the eyedropper?

Yes. The eyedropper lets you pick any color visible on screen. It is not available in browsers that do not support the EyeDropper API.

Can I set an opacity value?

Yes. Use the opacity slider to work with RGBA and HSLA formats.

Can I type a color code directly?

Yes. You can type values directly into the HEX, RGB, and HSL fields.

Where can I see the colors I have saved?

Up to 20 recently used colors appear in the recent colors section. They can be reused in the same browser.

Next guides

Related guides

Related guides are listed next so you can continue without getting lost.

How to use Image Format Conversion

This guide explains how to choose an image, select the output format, and download the result after checking the preview.

View guide
How to use Image Format Conversion

How to use Image Crop & Resize

This guide explains how to choose an image, adjust the crop area and output size, and save the result.

View guide
How to use Image Crop & Resize

How to use Image Background Removal

This guide explains how to choose an image, remove the background, and save the transparent PNG after checking the result.

View guide
How to use Image Background Removal
Image ToolsVideo ToolsText ToolsDeveloper ToolsDesign ToolsGenerator Tools