Safe Local Tools

Free Color converter

Pick a color with the swatch or system picker, type HEX (with or without #), or paste rgb()/hsl(). RGB uses 0–255; HSL uses hue 0–360° and saturation/lightness 0–100%. Alpha is 0–100% and appears in rgba()/hsla() and 8-digit HEX when not fully opaque. Values are sRGB — not CMYK or Display P3. Everything stays in this browser tab.

Loading…

How to use this tool

  1. 1

    Open Color converter

    Use it for this task: HEX, RGB, HSL, alpha support, native color picker, live preview, one-click CSS copy.

  2. 2

    Enter a color value

    Paste a HEX, RGB, HSL, or similar color value and adjust it with the picker if needed.

  3. 3

    Copy the format you need

    Use the converted color in CSS, design tools, documentation, or UI specs.

Quick facts

Runs offline?Yes — after this page loads, all math runs in your browser.
CMYK or Pantone?No — this tool uses sRGB only. For print, export from a design app with an ICC profile.
Is data uploaded?No. Safe Local Tools is static; colors never leave this tab.
Wide gamut (P3)?Inputs and outputs are treated as sRGB. P3-specific hex is not modeled here.

Top use cases

  1. HEX, RGB, HSL, alpha support, native color picker, live preview, one-click CSS copy.
  2. Runs offline?: Yes — after this page loads, all math runs in your browser.
  3. CMYK or Pantone?: No — this tool uses sRGB only. For print, export from a design app with an ICC profile.
  4. Is data uploaded?: No. Safe Local Tools is static; colors never leave this tab.
  5. Wide gamut (P3)?: Inputs and outputs are treated as sRGB. P3-specific hex is not modeled here.

FAQ

Why does the HEX field not match what I typed?▾

When a value parses successfully, RGB/HSL fields and copies reflect the parsed color. On blur, invalid text is replaced with the last valid HEX.

Can I use spaces inside rgb()?▾

Use the standard comma form: rgb(10, 20, 30). Extra spaces around numbers are fine.

Does changing H in HSL always keep the same HEX?▾

Hue is cyclic (0° and 360° are equivalent). Very small rounding differences can appear when jumping between RGB integers and HSL.

What about color-blind safe palettes?▾

This page converts single colors only. Use dedicated palette generators for accessibility checks.

Can I paste HSL without the % sign?▾

Saturation and lightness must include % to match CSS, for example hsl(200, 50%, 40%).

Are picked colors sent anywhere?▾

No — the picker and inputs only update local React state in your browser.