Conversor de Color

Pega un color en cualquier formato CSS común — #hex, rgb(), hsl(), hwb(), o uno de los 148 colores con nombre — y míralo normalizado en todos los demás formatos. Haz clic en un chip para copiarlo. En directo, en tu navegador, sin subir nada.

Acepta #RGB, #RGBA, #RRGGBB, #RRGGBBAA, rgb(), rgba(), hsl(), hsla(), hwb(), o uno de los 148 colores CSS con nombre. Los valores alfa salen como rgba() / hsla() / hex de 8 dígitos / hwb(... / α).

Formatos de salida — haz clic en un chip para copiar

Formatos de color CSS — referencia rápida
  • Hex — #RGB (3 dígitos), #RGBA (4 dígitos), #RRGGBB (6 dígitos), #RRGGBBAA (8 dígitos). El # inicial es opcional.
  • rgb() — rgb(13, 110, 253) o rgba(13, 110, 253, 0.5). También CSS Color 4: rgb(13 110 253 / 0.5). Los canales pueden ser 0–255 o 0–100%.
  • hsl() — hsl(216, 98%, 52%) o hsla(216, 98%, 52%, 0.5). También hsl(216 98% 52% / 0.5). El tono acepta deg, rad, grad o turn.
  • hwb() — hwb(216 0% 0%). Solo CSS Color 4. Alfa opcional: hwb(216 0% 0% / 0.5).
  • Con nombre — rebeccapurple, tomato, cornflowerblue … 148 entradas. No distingue mayúsculas.
  • Cualquier cosa con alfa < 1 sale como rgba(), hsla(), hex de 8 dígitos y hwb(... / α).

About this tool

Color Converter translates a colour between hex, RGB, HSL, HSV, OKLCH, and CMYK in your browser. The conversion is round-trippable within the sRGB gamut, with a warning when the input is outside sRGB and the conversion involves a gamut clip. The page also reports the WCAG 2.1 contrast ratio against a chosen background and tells you whether the combination meets AA or AAA for normal or large text — useful when you are picking a foreground colour against an existing background. The OKLCH and hex values are produced using the CSS Color 4 algorithm (the same one Chrome and Safari use), so the output matches what your stylesheet will actually render.

When to use it

  • Translating a brand colour from a designer's hex value to HSL so you can describe it in prose
  • Checking the WCAG contrast ratio of a foreground/background pair before shipping a UI change
  • Converting an OKLCH colour from a modern stylesheet back to hex for a legacy tool that doesn't support OKLCH yet
  • Picking a tint or shade by adjusting the L channel in OKLCH while holding the chroma and hue constant

When not to use it

  • You need colour-managed output for print — the CMYK conversion is approximate, using a naive sRGB-to-CMYK mapping. For real print, use a colour-managed tool with a printer profile
  • You need a colour picker with a swatch library — this tool converts, it does not pick. Use the colour picker tool on the site for that
  • You are working with spot colours (Pantone, HKS) — those have no direct sRGB equivalent and require a separate lookup

Frequently asked questions

Is the OKLCH conversion accurate?

Yes for in-gamut sRGB colours. For out-of-gamut inputs (very saturated colours in wide-gamut displays), the conversion involves a gamut clip to sRGB, which slightly shifts the result. The page flags the clip so you know the conversion is approximate.

What contrast ratio meets WCAG AA?

4.5:1 for normal text, 3:1 for large text (18pt or 14pt bold). AAA is 7:1 and 4.5:1 respectively. The page reports the actual ratio and tells you which level the combination meets.

← Back to the homepage · More guides · More from the blog