Skip to main content
ToolsFree.io🇬🇧en

Selector de Colores

Selector de colores gratuito: convierte entre HEX, RGB, HSL y CMYK al instante. Genera paletas de colores, verifica contraste WCAG y copia códigos CSS. 100% en tu navegador.

Procesamiento: local en tu navegador

Selector de Colores y Conversor Online Gratuito

Nuestro selector de colores te permite trabajar con cualquier formato de color utilizado en diseño web y gráfico. Convierte colores entre HEX, RGB, HSL y CMYK al instante, genera paletas de colores armónicas basadas en teoría del color, verifica ratios de contraste WCAG para accesibilidad y copia códigos CSS listos para usar en tus proyectos.

Modelos de Color Explicados

HEX usa notación hexadecimal (#FF5733), el formato más común en CSS y diseño web. RGB define colores con valores de Rojo, Verde y Azul (0-255), el modelo nativo de las pantallas digitales. HSL describe colores por Tono (0-360), Saturación y Luminosidad (0-100%), un modelo más intuitivo para ajustes de color. CMYK se usa en impresión profesional, definiendo colores con Cian, Magenta, Amarillo y Negro.

Generación de Paletas

Genera paletas de colores armónicas automáticamente: complementarios, análogos, triádicos y más. Cada paleta se basa en principios de teoría del color para asegurar combinaciones visualmente agradables. Ideal para diseñar interfaces, branding y material de marketing.

Accesibilidad y Contraste WCAG

Las directrices WCAG 2.1 requieren un ratio de contraste mínimo de 4.5:1 para texto normal y 3:1 para texto grande. Nuestra herramienta calcula estos ratios automáticamente y muestra si tu combinación de colores cumple los niveles AA y AAA. Crear diseños accesibles no es solo una buena práctica, es un requisito legal en muchos países.

HEX, RGB o HSL: Cuál Usar en CSS

Los tres formatos describen el mismo color en pantalla, así que la elección depende de la comodidad. HEX es compacto y habitual para colores de marca fijos. RGB, y sobre todo RGBA, es útil cuando necesitas controlar la transparencia con el canal alfa. HSL es el más intuitivo para ajustar un color a mano: cambiar solo la luminosidad o la saturación permite generar variantes más claras u oscuras de un mismo tono sin recalcular todo. Nuestra herramienta te da los tres para que copies el que mejor encaje en tu hoja de estilos.

Del Diseño a la Impresión: RGB y CMYK

Las pantallas mezclan luz con RGB, mientras que la impresión combina tintas con CMYK, y cada modelo puede representar colores que el otro no alcanza. Por eso un color muy saturado que brilla en pantalla puede verse más apagado al imprimirlo. Los valores CMYK que muestra esta herramienta son una aproximación orientativa: para un trabajo de imprenta exacto, el perfil de color y las pruebas del proveedor mandan sobre cualquier conversión automática.

Un ejemplo resuelto

El selector de color con el valor #7C3AED elegido, listado como rgb(124, 58, 237), hsl(262, 83%, 58%) y cmyk(48%, 76%, 0%, 7%), cada uno con su botón de copiado.
Un violeta, #7C3AED, escrito de cuatro formas. HSL es la notación a la que acudir cuando buscas una variación y no un valor: el tono 262 se queda quieto mientras mueves la luminosidad, y así una paleta conserva su aire de familia. La línea CMYK es una conversión, no una promesa: la tinta que deposita una imprenta depende del perfil con el que imprime.

Preguntas Frecuentes

¿Cómo convierto HEX a RGB?
Introduce tu código HEX (ej. #FF5733) en el selector de colores y automáticamente verás los valores RGB, HSL y CMYK equivalentes. También puedes copiar el código CSS directamente.
¿Qué es el contraste WCAG?
WCAG (Web Content Accessibility Guidelines) define ratios de contraste mínimos entre texto y fondo para garantizar legibilidad. Un ratio de 4.5:1 es el mínimo para texto normal (nivel AA) y 7:1 para AAA.
¿Es gratuito el selector de colores?
Sí, el selector de colores es 100% gratuito. Todo el procesamiento se realiza en tu navegador sin enviar datos a ningún servidor.
¿Puedo generar paletas de colores?
Sí, puedes generar paletas complementarias, análogas, triádicas y más a partir de cualquier color base.

Artículos relacionados

Aprende más con nuestras guías detalladas y tutoriales relacionados.