Mr. Tools

How to

How to use Color Picker, Image, and Transparency Support

Color Picker, Image, and Transparency Support lets you choose colors with a 2D picker or from an image, then review HEX, HEXA, RGB, RGBA, HSL, and HSLA in one workspace. Use it to confirm CSS color codes, convert design-spec values, compare nearby tones, and reuse recent colors. The workflow moves from selection to review to copy in a single screen, so you can prepare any color needed for design work without switching pages.

Use Color Picker, Image, and Transparency Support
Color Picker, Image, and Transparency Support thumbnailColor Picker, Image, and Transparency Support thumbnail

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

Guide

How to use each screen area

Learn how to use each screen area, including settings, input, previews, results, and saving.

01 HOWTO

Pick a color with the 2D picker

Drag in the 2D picker to choose a color and use the hue slider to change the hue. The color codes on the right update in real time.

2D picker selecting a color with color codes updating in real time2D picker selecting a color with color codes updating in real time

What this area does

  • Adjust saturation and brightness with the 2D picker
  • Switch the color family with the hue slider

Where to use it

01
2D picker

Start with the 2D picker and hue slider to get close to the target color before fine-tuning.

Supporting capture showing where to use 2D pickerSupporting capture showing where to use 2D picker
02
Color saturation

Move left or right inside the 2D picker to change how vivid the selected color is.

Supporting capture showing where to use Color saturationSupporting capture showing where to use Color saturation
03
Color brightness

Move up or down inside the 2D picker to adjust brightness while keeping the same hue.

Supporting capture showing where to use Color brightnessSupporting capture showing where to use Color brightness

02 HOWTO

Adjust opacity and review color codes

Use the opacity slider to set transparency. Confirm that HEX, HEXA, RGB, RGBA, HSL, and HSLA all reflect the same color in sync on the right.

Opacity slider and all color code formats synchronizedOpacity slider and all color code formats synchronized

What this area does

  • Adjust transparency from opaque to transparent with the opacity slider
  • Review the same color as HEX, HEXA, RGB, RGBA, HSL, and HSLA

Where to use it

01
Check HEX / HEXA

Use HEX when you need a solid color for CSS or configuration files. Use HEXA when transparency must be included.

Supporting capture showing where to use Check HEX / HEXASupporting capture showing where to use Check HEX / HEXA
02
Alpha-enabled formats

When transparency matters, confirm that HEXA, RGBA, and HSLA match the current alpha value.

Supporting capture showing where to use Alpha-enabled formatsSupporting capture showing where to use Alpha-enabled formats
03
Check RGB and HSL

Review RGB or HSL numbers when you need to align with a design spec or existing code.

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

03 HOWTO

Copy in the format you need

Click the copy button next to the format you want in the color code panel on the right. HEX, HEXA, RGB, RGBA, HSL, and HSLA can all be copied.

Color code copy buttons in the color code panelColor code copy buttons in the color code panel

What this area does

  • Copy the color code format needed for the destination
  • Choose HEXA, RGBA, or HSLA when opacity needs to be included

Where to use it

01
Copy by format

Copy HEX, HEXA, RGB, RGBA, HSL, or HSLA 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
Copy without opacity

Use HEX, RGB, or HSL when pasting a solid color into CSS or configuration values.

Supporting capture showing where to use Copy without opacitySupporting capture showing where to use Copy without opacity
03
Copy with opacity

Use HEXA, RGBA, or HSLA when the destination needs a transparent color.

Supporting capture showing where to use Copy with opacitySupporting capture showing where to use Copy with opacity

04 HOWTO

Sample a color from an image

Add an image file to the image area at the bottom left, then click anywhere on the preview to use that pixel's color as the current color.

Sampling a color from an image and applying it as the current colorSampling a color from an image and applying it as the current color

What this area does

  • Add an image file and sample a color from the preview
  • Use the sampled color as the current color for adjustment or copying

Where to use it

01
Sample from image

Add an image file, then click the preview to apply the sampled pixel color as the current color.

Supporting capture showing where to use Sample from imageSupporting capture showing where to use Sample from image
02
Add an image

Choose an image file to show a preview for color sampling.

Supporting capture showing where to use Add an imageSupporting capture showing where to use Add an image
03
Click the preview

Click the color you want in the preview to apply that pixel as the current color.

Supporting capture showing where to use Click the previewSupporting capture showing where to use Click the preview

05 HOWTO

Reuse colors from palette and history

Select a nearby shade from the tone palette on the right to compare options. Recently used colors are saved in the browser and can be reused without recreating them.

Tone palette and recent colors panel for reusing colorsTone palette and recent colors panel for reusing colors

What this area does

  • Choose nearby lighter or darker colors from the tone palette
  • Reuse recently used colors from the browser history

Where to use it

01
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
02
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
03
Apply the selected color

Colors chosen from the palette or history update the current color, color codes, and copy area together.

Supporting capture showing where to use Apply the selected colorSupporting capture showing where to use Apply the selected color

Notes

Notes

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

What to check

Treat one current color and alpha value as the source of truth

HEX, HEXA, RGB, RGBA, HSL, and HSLA are different expressions of the same color. Fix the current color and transparency 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 Compression

Compress multiple images in their original format, compare size changes, and save the results.

View guide
How to Use Image Compression

How to use Image Format Conversion

Learn where to load multiple images, choose format and quality, review conversion results, download individually, download as ZIP, and convert again.

View guide
How to use Image Format Conversion

How to use Image Crop & Resize

Learn where to load an image, crop, resize, keep aspect ratio, choose format and quality, preview, copy, and download.

View guide
How to use Image Crop & Resize
Image ToolsVideo ToolsText ToolsDeveloper ToolsDesign ToolsGenerator Tools