Skip to content
AldeaCode Logo
es
Developer100% local · 0 bytes sent

Color Converter (Hex / RGB / HSL)

Type a color in any common CSS notation (hex with or without #, 3 or 6 digits, rgb / rgba / hsl / hsla) and see all three primary representations plus the live preview. Alpha channel is preserved. Click a quick example to load it instantly.

Loading…

How it works

We parse hex (3 / 6 / 8 digits), rgb(), rgba(), hsl() and hsla() with a tiny set of regex matchers. RGB and HSL conversions use the standard formulas. The preview is just a div with backgroundColor set to the parsed hex.

How to use it

  1. Paste the color value

    Drop in a hex (with or without #, 3/6/8 digits), an rgb(), rgba(), hsl() or hsla() string. Common CSS notations are accepted.

  2. Inspect every format

    The same color is rendered as hex, rgb() and hsl() side by side, with alpha preserved. A live swatch previews the actual color.

  3. Tweak via HSL or RGB

    Adjust lightness, hue or saturation by editing the HSL value, or shift channels by editing the RGB row. The hex updates instantly.

  4. Copy the format you need

    Each row has its own copy button. Grab hex for design tools, rgb() for CSS variables, hsl() when matching tonal shifts.

Use cases

Convert a designer's hex into rgb() for a CSS variable.

Tweak a brand color's lightness without leaving the browser.

Inspect what a hex value looks like before pasting into code.

Match a shade to a near color via HSL adjustments.

When NOT to use it

  • As a Photoshop / Figma colour reference. CSS HSL and design-tool HSV are different colour models. Hue matches, saturation and lightness do not.
  • For accessible contrast checks. This tool gives the colour values, not the contrast ratio against a background. Use a dedicated WCAG contrast checker.
  • For rendering wide-gamut colours. Output is sRGB; if your source is P3 or Rec.2020 it gets clipped.

Your data never leaves your browser

Every utility runs entirely on your device. Nothing is uploaded, nothing is stored on a server. You can disconnect from the internet and they keep working.

Frequently asked questions

Related tools

Generators

URL Slug Generator

Convert any text into a URL-safe slug. Unicode-aware, batch mode by line.

Developer

SHA Hash Generator

Compute SHA-1, SHA-256, SHA-384 and SHA-512 hashes locally with Web Crypto.

Format

JSON Formatter and Validator

Pretty-print, minify or validate JSON in your browser.