Generador de paletas de colores
Parte de un color y obtén paletas que combinan, cada muestra con sus valores HEX y RGB y su contraste con blanco y negro.
Funciona completamente en tu navegador
Paleta aleatoria
Cinco colores del generador de números aleatorios de tu navegador. Bloquea los que quieras conservar y vuelve a generar. Presiona la barra espaciadora para generar cuando ningún campo de texto tenga el foco.
Exportar
Las paletas se construyen en el espacio de color OKLCH y se muestran como HEX sRGB, así que a los colores demasiado vivos para una pantalla se les reduce el croma. Las cifras de contraste usan la fórmula de WCAG 2, que solo mide el contraste de luminosidad.
Cómo crear una paleta de colores
- Elige un color base con el selector, o escribe un valor como
#1636a3of60en el campo HEX. - Revisa las paletas de armonía que aparecen debajo. Cada muestra indica su HEX, su RGB y si un texto negro o blanco cumple WCAG AA o AAA sobre ella.
- Elige una paleta en Exportar y cópiala o descárgala como propiedades personalizadas de CSS, un arreglo JSON o una lista simple. Usa Paleta aleatoria y los botones de bloqueo para explorar.
Cómo se construyen las armonías
Un generador de paletas de colores se basa en las armonías de color: conjuntos de colores cuyos tonos están a ángulos fijos en el círculo cromático. Los colores análogos son vecinos, separados por 30 grados. Un color complementario está a 180 grados, un par de complementarios divididos está a 150 y 210 grados, una tríada está separada por 120 grados y una tétrada usa cuatro tonos separados por 90 grados. La paleta monocromática mantiene el tono y escalona la luminosidad desde tintes pálidos hasta sombras oscuras.
El círculo que se usa aquí es OKLCH, la forma cilíndrica del espacio OKLab de Björn Ottosson. La conversión va de sRGB a luz lineal, luego pasa por las matrices de OKLab y vuelve, con una comprobación de gama. Si un color girado queda fuera de lo que sRGB puede mostrar, su croma se reduce en pasos pequeños hasta que cabe, así se conservan la luminosidad y el tono que elegiste.
El contraste se indica para cada muestra frente al blanco y al negro, porque la primera pregunta sobre un color de una paleta suele ser qué texto puede ir encima. La relación y la indicación AA o AAA siempre se escriben, para que la información no dependa de ver el color.
Consejos
- ¿Necesitas el mismo color en HSL, CMYK o con su nombre CSS? Usa el Convertidor de colores y contraste.
- Convierte dos colores de la paleta en un fondo con el Generador de degradados CSS.
- ¿Quieres un color sacado de una foto en lugar de un círculo? Prueba el Selector de color de imagen.
Preguntas frecuentes
¿Por qué OKLCH y no HSL?
En HSL, un amarillo y un azul con el mismo valor de luminosidad se ven muy distintos en brillo. OKLCH está hecho para que pasos iguales de luminosidad se vean iguales, lo que mantiene parejo el peso de las muestras de una paleta. El tono es el ángulo que se usa para las armonías, así que un color complementario está a 180 grados de tu color base en OKLCH, no en HSL.
¿Qué pasa cuando un color no se puede mostrar en pantalla?
Al girar un tono manteniendo la luminosidad y el croma, a veces el resultado queda fuera del rango sRGB que puede mostrar una pantalla normal. Entonces la herramienta baja el croma, manteniendo la luminosidad y el tono, hasta que el color cabe. Por eso una muestra girada puede verse un poco menos viva que la base.
¿Qué significan las etiquetas AA y AAA?
Indican la relación de contraste WCAG 2 de un texto blanco o negro sobre esa muestra. Una relación de 4,5 o más es AA para texto normal, 7 o más es AAA, y de 3 a 4,5 cumple AA solo para texto grande. Una muestra que no cumple ni con negro ni con blanco es un mal fondo para texto.
¿Cómo funciona la paleta aleatoria?
Se eligen cinco colores con el generador seguro de números aleatorios del navegador: tonos repartidos por el círculo, con luminosidad y croma aleatorios dentro de un rango que evita los casi negros y los casi blancos. Bloquea una muestra para conservarla y luego presiona Paleta aleatoria o la barra espaciadora para reemplazar las demás.
¿Qué formato de exportación debo usar?
Las propiedades personalizadas de CSS se pegan directamente en el bloque :root de una hoja de estilos. El arreglo JSON sirve para design tokens o scripts, y la lista simple tiene un HEX por línea para las herramientas que aceptan colores pegados. Los tres usan los valores HEX que se muestran.
¿Acepta HEX abreviado y mayúsculas?
Sí. Se leen #abc, abc, #AABBCC y aabbcc. Los valores con un par alfa, como los de ocho dígitos, no se aceptan aquí; usa el Convertidor de colores y contraste para quitar primero el alfa.