Saltar al contenido principal

Convertidor de colores gratis

Convierte colores entre los formatos HEX, RGB, HSL, HSV y CMYK al instante. Incluye una escala de luminosidad y muestras predefinidas.

Funciona sin conexión una vez cargado

Convierte un color entre HEX, RGB, HSL, HSV y CMYK — con vista previa en directo y copia de un toque. Todo se ejecuta en tu navegador.

Acepta: HEX (#fff o #ffffff), RGB (255, 255, 255) o HSL (360, 100%, 50%)

100%
Ajustes predefinidos:
HEX#14B8A6
rgb() · heredadorgb(20, 184, 166)
rgb() · modernorgb(20 184 166)
hsl() · heredadohsl(173, 80%, 40%)
hsl() · modernohsl(173 80% 40%)
oklch()oklch(70.4% 0.123 182.5)
lab()lab(67.1% -42.9 -2.3)
lch()lch(67.1% 43.0 183.1)
hsv()hsv(173, 89%, 72%)
cmyk()cmyk(89%, 0%, 10%, 28%)
Valores RGB20, 184, 166

Contraste WCAG

Sobre fondo blanco

2,49:1

Falla

Sobre fondo negro

8,44:1

AAA
🖨️ Para imprimir: Estos valores CMYK (89%, 0%, 10%, 28%) son una aproximación estándar sRGB→CMYK para referencia. Para color de impresión preciso, usa el perfil ICC de tu impresora o una prueba impresa — CMYK en pantalla no puede coincidir con todas las tintas/papeles.

Escala de luminosidad

Haz clic en cualquier muestra para cambiar a ese tono

Usos habituales

  • Convierte colores para diseño webObtén valores HEX, RGB y HSL para cualquier color — listos para pegar en CSS o Tailwind.
  • Convierte colores para impresión (CMYK)Convierte colores de pantalla (HEX/RGB) a valores CMYK para usar en diseño de impresión e impresión profesional.
  • Construye paletas de colores para sistemas de diseñoConvierte colores de marca en todos los formatos y genera escalas de luminosidad consistentes para un sistema de diseño completo.
  • Verificar contraste de color para accesibilidadConvierte colores para obtener valores RGB para usar en herramientas de relación de contraste — cumplimiento WCAG para diseño accesible.
  • Convertir colores para FigmaObtén los valores HEX y RGB exactos para pegar en selectores de color Figma y sistemas de tokens de diseño.

Cómo funciona

Toda la lógica de conversión es JavaScript escrito a mano que se ejecuta enteramente en tu navegador; sin biblioteca, sin llamada al servidor. La herramienta analiza tu entrada, la enruta a través de una cadena de funciones matemáticas puras y produce simultáneamente once formatos de salida, incluidos los modernos espacios de CSS Color 4 oklch() y lab().

  1. 1
    Análisis flexible de entrada
    Un analizador personalizado acepta hexadecimal (3, 4, 6 u 8 dígitos), rgb()/rgba(), hsl()/hsla() tanto en sintaxis clásica de comas como en sintaxis moderna de espacios, y tríos numéricos sueltos. Los valores alfa como decimales o porcentajes se normalizan al rango 0–1 antes de que empiece cualquier conversión.
  2. 2
    RGB como eje de conversión
    Cada formato aceptado se resuelve primero a un trío RGB canónico. A partir de esa única representación, la herramienta se ramifica: HSL y HSV usan las fórmulas estándar de mín/máx/croma; el CMYK se deriva encontrando el canal clave; y la linealización sRGB (la curva gamma por tramos definida en IEC 61966-2-1) se aplica antes de los cálculos de espacio perceptual.
  3. 3
    Espacios de color perceptuales calculados desde cero
    oklch() se calcula usando las matrices de referencia 3×3 de Björn Ottosson (espacio de raíz cúbica LMS). lab() y lch() usan adaptación cromática de Bradford para convertir del punto blanco D65 a D50, que es como CSS Color 4 define lab(). Son las mismas fórmulas usadas en los motores de renderizado de los navegadores, implementadas aquí sin ninguna dependencia externa.
  4. 4
    Contraste WCAG y escala de luminosidad
    La luminancia relativa se calcula según la fórmula de WCAG 2.1 (R, G, B linealizados ponderados 0,2126/0,7152/0,0722) y la relación de contraste frente a blanco y negro se clasifica como AA-large, AA, AAA o Fail. Se genera una tira de nueve pasos de luminosidad recorriendo el canal de luminosidad HSL de 10% a 90%, dejándote hacer clic en cualquier muestra para convertir ese tono.

Herramientas relacionadas

Preguntas frecuentes