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.

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

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.

More tools

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