Saltar al contenido principal
LibraTool logoLibraTool

Selector de color y generador de paletas gratis

Elige colores, convierte entre HEX/RGB/HSL y genera paletas armoniosas.

Funciona sin conexión una vez cargado
HEX
HSV
h217°
s76%
v96%
solo pantalla

RGB

r
g
b

HSL

H
S
L

Más formatos

HEX8#3b82f6ff
RGBrgb(59 130 246)
HWBhwb(217 23% 4%)
CMYKcmyk(76%, 47%, 0%, 4%)
OKLCHoklch(62.3% 0.188 259.8)
SwiftUIColor(red: 0.231, green: 0.510, blue: 0.965, alpha: 1)
Android0xFF3B82F6
FlutterColor(0xFF3B82F6)

Contraste WCAG

Color con nombre más cercano: dodgerblue · El texto negro se lee mejor aquí (5,71:1)

Texto sobre blanco3,68:1AA grande
Texto sobre negro5,71:1AA
Texto sobre #ffffff3,68:1AA grande

Tonos y matices (50–950)

Paleta de colores

Complementario

#3b82f6
#f6af3c

Triádico

#3b82f6
#f63c83
#83f63c

Análogo

#3ce0f6
#3b82f6
#523cf6

Monocromático

#073c92
#0a5adb
#3b82f6
#85b2f9
#cee0fd

Usos habituales

  • Selector de Colores para Diseño WebSelecciona y genera colores para tu sitio web — obtén valores HEX, RGB y HSL además de paletas armoniosas.
  • Selector de Colores para MarcaConstruye tu paleta de colores de marca — selecciona colores primarios, secundarios y de acento que funcionen juntos.
  • Selector de Colores para Redes SocialesCrea paletas de colores llamativas para publicaciones, historias y diseños de perfil en redes sociales.
  • Selector de Colores para Diseño de ImprentaSelecciona colores para materiales impresos — volantes, tarjetas de presentación, folletos — con vistas previas de color precisas.
  • Selector de Colores para PresentacionesDiseña esquemas de color de diapositivas — selecciona colores de texto legibles, paletas de gráficos y tonos de acento consistentes.

Cómo funciona

Todo se ejecuta directamente en tu navegador usando matemática de conversión escrita a mano: sin biblioteca de color, sin ida y vuelta al servidor. Eliges un color mediante la entrada de color nativa del navegador o la EyeDropper API, y la herramienta lo convierte al instante en seis formatos mientras también calcula relaciones de contraste WCAG y genera paletas de armonía.

  1. 1
    Entrada de color mediante API nativa
    Eliges un color mediante el widget integrado <input type="color"> del navegador, o —en navegadores basados en Chromium— la EyeDropper API te permite muestrear cualquier píxel de tu pantalla. Ambos caminos devuelven una cadena hexadecimal que se convierte en la única fuente de verdad.
  2. 2
    Conversiones de formato escritas a mano
    La herramienta convierte el valor hexadecimal a RGB, HSL, HSV, CMYK y OKLCH usando sus propias funciones matemáticas (sin biblioteca externa). La conversión OKLCH linealiza los canales sRGB, aplica la matriz de raíz cúbica OKLab, y luego deriva el croma y el ángulo de matiz, igualando la salida moderna de CSS Color Level 4.
  3. 3
    Cálculo de relación de contraste WCAG
    La luminancia relativa se calcula a partir de los canales RGB linealizados usando la fórmula de WCAG 2.x. Luego la herramienta calcula las relaciones de contraste frente al blanco puro y al negro puro y las etiqueta como AA-large, AA, AAA o Fail según los umbrales de WCAG (3:1, 4,5:1, 7:1).
  4. 4
    Generación de paletas de armonía y guardado local
    Las muestras complementarias, triádicas, análogas y monocromáticas se derivan rotando o desplazando matemáticamente los valores de matiz y luminosidad HSL. Las paletas guardadas se escriben en localStorage en tu navegador: nada sale de tu dispositivo.

Herramientas relacionadas

🎨

Generador de colores aleatorios

Genera colores aleatorios de uno en uno o como una paleta de cinco, bloquea los que te gusten, copia valores HEX, RGB o HSL y exporta la paleta como PNG o CSS.

Probar
🎨

Convertidor de colores

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

Probar
🎨

Extractor de paleta de colores de imagen

Extraiga los colores dominantes de cualquier imagen utilizando la cuantificación de color k-means. Obtenga códigos hexadecimales para los 2 a 16 colores principales de su foto o logotipo.

ProbarArchivos locales

Preguntas frecuentes