Color converter

Client

Paste a color in HEX, rgb(), rgba(), hsl(), hsla(), or a CSS keyword—or use the picker. Copy classic and OKLCH forms, or use harmonic palette hints below.

Syntaxes this converter shows

One picked color becomes HEX, rgb()/hsl(), OKLCH, and related CSS forms plus optional harmony hints. Outputs are for copy-paste into stylesheets or design tokens—not for color-managed print proofs.

Convert

?
Paste a CSS color: #RRGGBB, rgb(), rgba(), hsl(), hsla(), or a named color (e.g. steelblue). Use the swatch to adjust RGB; all values update together.
Picker

Outputs

  • HEX#3B82F6
  • RGBrgb(59, 130, 246)
  • RGBArgba(59, 130, 246, 1)
  • HSLhsl(217.2, 91.2%, 59.8%)
  • HSLAhsl(217.2, 91.2%, 59.8%)
  • OKLaboklab(0.6231 -0.0332 -0.1851)
  • OKLCHoklch(0.6231 0.188 259.8)

Harmonic palettes

?
HSL-based relatives at the same saturation and lightness as your color—handy starting points for UI palettes. Click Copy for HEX/RGBA.

Complementary

  • #F6AF3B

Split complementary

  • #F6513B
  • #E0F63B

Triadic

  • #F63B82
  • #82F63B

Analogous

  • #3BE0F6
  • #513BF6

Nearby workflows on Toolcore

  • WCAG contrast — after you pick foreground and background from the converted values.
  • Harmony palette — when you need triadic or complementary sets beyond one swatch.
  • Tailwind-style theme — to turn a brand HEX into a 50–950 ramp and semantic variables.

Common use cases

  • Copy HEX, rgb(), hsl(), or OKLCH strings into design tokens, CSS, or Figma-friendly notes without installing an app.
  • Translate a brand color into multiple syntaxes for legacy code, modern OKLCH gradients, or documentation.
  • Use harmonic hints to pick related accents for buttons, borders, and focus rings that stay in the same family.

Common mistakes to avoid

  • Mixing up HEX with and without #

    Some tools require a leading #; others accept bare digits. If a color fails to parse, check the exact format the field expects.

  • Expecting identical appearance on every display

    Browsers map CSS colors to the screen profile they use. Perceptual spaces like OKLCH help consistency, but two monitors can still look different.

FAQ

Is conversion done on your servers?

No. Parsing and conversion run in your browser; the page does not send your colors to us.

What are OKLab and OKLCH for?

They are perceptual color spaces that often make gradients and lightness steps look more even than classic HSL. Use whichever syntax your project and browsers need.

Where can I check contrast for accessibility?

Use the WCAG contrast checker in the Color hub when you need pass/fail for text on a background—not every pair of colors needs a formal check.

Common search terms

Phrases people search for that match this tool. See the full long-tail keyword index.

  • hex to rgb converter
  • rgb to hsl online
  • oklch color converter
  • css named color lookup
  • convert hex to oklch

More tools

Related utilities you can open in another tab—mostly client-side.