FileFlipSelector de Color

Selector de Color

Elige y convierte colores entre HEX, RGB, HSL, CMYK. Genera armonías y comprueba el contraste WCAG.

Vista previa

sobre blanco 3.7:1AA Failsobre negro 5.7:1AA Pass

Contraste

#3b82f6
rgb(59, 130, 246)
rgba(59, 130, 246, 1)
hsl(217, 91%, 60%)
hsla(217, 91%, 60%, 1)
cmyk(76%, 47%, 0%, 4%)
--color-primary: #3b82f6

Armonías de color

Complementario

Análogos

Triádico

Complementario dividido

Tetrádico

Tintes y sombras

Cómo usar

  • Haz clic en el selector o escribe un valor HEX/RGB/HSL
  • Todos los formatos se actualizan automáticamente
  • Haz clic en un valor para copiarlo

tools.colorPicker.editorialTitle

tools.colorPicker.editorialBody

Herramientas relacionadas

Generador de favicon
Imagen a Texto (OCR)
Contador de Palabras

Preguntas frecuentes

¿Qué es un selector de color y cómo funciona?
Un selector de color permite elegir un color visualmente o por valores y verlo en distintos formatos (HEX, RGB, HSL, CMYK). Este sincroniza todos los campos en tiempo real, permite copiar cualquier formato, generar armonías y comprobar el contraste para accesibilidad.
¿Diferencia entre HEX, RGB y HSL?
HEX es una forma compacta de escribir RGB (ej. #ff0000 para rojo). RGB usa tres números 0-255. HSL usa Tono (0-360), Saturación y Luminosidad (0-100%). Este tool convierte entre ellos al instante.
¿Qué es CMYK y cuándo se usa?
CMYK son Cian, Magenta, Amarillo y Negro. Se usa sobre todo en impresión. Esta herramienta muestra el equivalente CMYK de cualquier color para unificar la marca entre web e impresión.
¿Qué es el ratio de contraste WCAG?
WCAG define ratios de contraste mínimos entre texto y fondo. AA requiere 4,5:1 para texto normal; AAA 7:1. La herramienta muestra el ratio sobre blanco y negro e indica si pasa AA o AAA.
¿Qué son las armonías de color?
Son conjuntos de colores que combinan bien: complementario, análogos, triádico, complementario dividido y tetrádico. Se generan a partir del color elegido. Haz clic en una muestra para usarla como principal.
¿Qué son tintes y sombras?
Los tintes son un color con más blanco; las sombras con más negro. La herramienta genera nueve pasos del 10% al 90%, similares a las escalas de Tailwind CSS.
¿Puedo usarlo para diseño web y CSS?
Sí. Obtienes HEX, RGB, RGBA, HSL, HSLA y una variable CSS. Copia cualquier valor en tu hoja de estilos. El contraste ayuda a elegir colores de texto accesibles.
¿Qué es una variable CSS (custom property) para colores?
Las custom properties CSS permiten definir un color una vez y reutilizarlo (ej. --color-primary: #1a2b3c; luego var(--color-primary)). La herramienta muestra la forma variable para :root.