ZeroUtil

Color Picker

Pick colors visually and get HEX, RGB, and HSL values.

100%
HEX#3b82f6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)

How to Use the Color Picker

Choose a color visually using the native color picker, or type a color value in HEX, RGB or HSL format. Adjust the opacity slider to control transparency. All format outputs update in real time.

Supported Input Formats

  • HEX — #ff0000 or ff0000 (3-, 6- and 8-digit supported)
  • RGB / RGBA — rgb(255, 0, 0) or rgba(255, 0, 0, 0.5)
  • HSL / HSLA — hsl(0, 100%, 50%) or hsla(0, 100%, 50%, 0.5)

Output Formats

  • HEX / HEXA — 6-digit or 8-digit hexadecimal color code
  • RGB / RGBA — Red, green, blue values (0-255) with optional alpha
  • HSL / HSLA — Hue (0-360), saturation (0-100%), lightness (0-100%) with optional alpha
  • CSS Name — shown when the color matches a named CSS color

Click "Copy" next to any format to copy the value to your clipboard. All processing happens in your browser — no data is sent to any server.

Frequently Asked Questions

What color formats can I enter?

You can type colors in HEX (#ff0000), RGB (rgb(255, 0, 0)), RGBA (rgba(255, 0, 0, 0.5)), HSL (hsl(0, 100%, 50%)) or HSLA format. Both 3-digit and 6-digit HEX codes are supported, as well as 8-digit HEXA codes.

How does the opacity slider work?

The opacity slider controls the alpha channel (0-100%). When opacity is below 100%, RGBA and HSLA formats are shown alongside the standard values. The preview swatch displays a checkerboard behind the color to visualize transparency.

What is a CSS color name?

CSS defines 148 named colors (like "red", "coral", "navy"). When your color matches one of these names exactly and opacity is 100%, the name is displayed below the preview swatch.

Is my data sent to a server?

No. All color conversions happen locally in your browser. Nothing is uploaded.

Ad

More CSS & Design

Gradient Generator

Create CSS linear and radial gradients with a visual editor.

Open tool →

Color Palette Generator

Generate harmonious color palettes from a base color.

Open tool →

Text Shadow Generator

Create CSS text shadows with a visual editor and presets.

Open tool →

Box Shadow Generator

Create CSS box shadows with a visual editor.

Open tool →

Border Radius Generator

Create CSS border-radius with a visual corner editor.

Open tool →

Glassmorphism Generator

Create frosted glass CSS effects with backdrop blur.

Open tool →