Convertidor de Colores

Convierte colores entre diferentes formatos como HEX, RGB, HSL, CMYK. Soporta selección de colores con EyeDropper API, generación de paletas y análisis de esquemas de colores.

Selector de Colores

Usa el selector de colores para elegir colores

Herramientas de Color

Herramientas avanzadas de selección y gestión de colores

Formatos de Color

Color actual en varios formatos de representación

#
rgb(,,)
rgba(,,,)
hsl(,%,%)
hsv(,%,%)
cmyk(%,%,%,%)
oklch(%%)

Paleta de Tailwind CSS

Colores oficiales predeterminados de Tailwind CSS. Elige un formato, clic para copiar, doble clic para cargarlo en el selector.

50100200300400500600700800900950
slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose

Explicación de Formatos de Color

Aprende sobre las características y casos de uso de diferentes formatos de color

HEX Hexadecimal

Usa 6 dígitos hexadecimales para representar colores, como #FF5733. Este es el formato de color más comúnmente usado en desarrollo web, con la mejor compatibilidad, adecuado para usar en CSS y HTML.

Formato:#RRGGBB
Rango:00-FF (0-255)
Ventajas:Conciso, buena compatibilidad
Desventajas:No intuitivo

RGB Rojo Verde Azul

Usa los valores numéricos de los canales de color rojo, verde y azul para representar colores, como rgb(255, 87, 51). Este formato es intuitivo y fácil de entender, adecuado para que diseñadores y desarrolladores entiendan la composición del color.

Formato:rgb(R, G, B)
Rango:0-255
Ventajas:Intuitivo, fácil de entender
Desventajas:No representa intuitivamente el brillo

RGBA Rojo Verde Azul Alfa

Añade un canal alfa a RGB para la transparencia, por ejemplo rgba(255, 87, 51, 0.8). Ideal para superposiciones, sombras y otros efectos semitransparentes.

Formato:rgba(R, G, B, A)
Rango:R,G,B: 0-255, A: 0-1
Ventajas:Admite transparencia y efectos visuales ricos
Desventajas:Compatibilidad ligeramente inferior a RGB

HSL Tono Saturación Luminosidad

Usa tres atributos de tono, saturación y luminosidad para representar colores, como hsl(12, 100%, 60%). Este formato está más cerca de cómo los humanos perciben los colores, facilitando el ajuste del brillo y la vibración de los colores.

Formato:hsl(H, S%, L%)
Rango:H: 0-360°, S/L: 0-100%
Ventajas:Intuitivo, fácil de ajustar
Desventajas:No representa intuitivamente el brillo

HSV Tono Saturación Valor

Usa tres atributos de tono, saturación y valor para representar colores, como hsv(12, 100%, 100%). Este formato se usa comúnmente en software gráfico, donde el parámetro valor representa más intuitivamente el brillo del color.

Formato:hsv(H, S%, V%)
Rango:H: 0-360°, S/V: 0-100%
Ventajas:El valor es intuitivo, fácil de ajustar
Desventajas:Soporte limitado en navegadores web

CMYK Cian Magenta Amarillo Negro

Usa cuatro canales de color de cian, magenta, amarillo y negro para representar colores, como cmyk(0%, 66%, 80%, 0%). Este es el formato estándar en la industria de impresión, adecuado para obras de diseño que necesitan ser impresas.

Formato:cmyk(C%, M%, Y%, K%)
Rango:0-100%
Ventajas:Estándar de impresión, profesional
Desventajas:Visualización inexacta en web

OKLCH Espacio de Color Perceptivo

Usa tres atributos de luminosidad perceptiva, croma y tono para representar colores, como oklch(60% 50% 12). Este es un espacio de color moderno que coincide mejor con la percepción del ojo humano, soporta una gama de colores más amplia y es adecuado para dispositivos de visualización modernos.

Formato:oklch(L% C% H)
Rango:L: 0-100%, C: 0-150, H: 0-360°
Ventajas:Perceptualmente preciso, gama amplia
Desventajas:Compatibilidad limitada

Sugerencias de Uso

  • Desarrollo Web: Prioriza formatos HEX y RGB para mejor compatibilidad
  • Ajuste de Diseño: Usa formato HSL para fácil ajuste de tono y saturación
  • Impresión Profesional: Usa formato CMYK para asegurar calidad de impresión
  • Aplicaciones Modernas: Considera usar formato OKLCH para mejor rendimiento de color
  • Selección de Color: Usa deslizadores HSV para selección intuitiva de colores
  • Efectos de transparencia: use el formato RGBA para crear superposiciones semitransparentes