Color Converter (HEX ↔ RGB ↔ HSL)

Convert colors between HEX, RGB, and HSL with a live preview.

Color Converter UI

Informational only; verify critical results independently.

How to use

  1. Paste a hex code, or type RGB integers, or adjust HSL sliders if available.
  2. Watch the live swatch to confirm it matches your brand reference.
  3. Copy CSS-ready strings: #rrggbb, rgb(), rgba(), hsl(), or hsla().
  4. Tweak one channel at a time when matching a screenshot pixel.
  5. Convert legacy 3-digit hex to 6-digit for older IE-safe stylesheets if needed.
  6. Export the same color to design handoff docs in multiple notations.

Examples

  • #1e90ff → rgb(30, 144, 255) for CSS
  • hsl(210, 100%, 50%) → hex for Figma import
  • rgb(255, 99, 71) → hsl for animation easing in preprocessors
  • Short #abc expanded to #aabbcc
  • Brand #003366 replicated in HSL for theme tokens
  • 8-digit #rrggbbaa for transparent overlays

FAQ

3-digit hex?
#RGB duplicates each nibble: #abc ≡ #aabbcc.
sRGB vs display P3?
Values are typically sRGB hex; wide-gamut displays may render slightly differently.
Alpha channel?
If supported, #rrggbbaa and rgba()/hsla() carry opacity.
Why HSL?
Easier to lighten/darken or shift hue in code than raw RGB.
Named colors?
Type common names like 'rebeccapurple' if the parser supports CSS color keywords.
Privacy?
All conversion runs locally.

Related guides

Related tools

Last updated: 2025-09-16

← Back to Color Tools