Generador de paletas de colores
Pulsa la barra espaciadora para otra paleta; bloquea los colores que te gusten.
o pulsa la barra espaciadora
- rgb(237, 221, 187)hsl(41, 58%, 83%)
- Texto blanco
- 1.34:1AAAAA
- Texto negro
- 15.66:1AAAAA
- rgb(143, 173, 255)hsl(224, 100%, 78%)
- Texto blanco
- 2.19:1AAAAA
- Texto negro
- 9.59:1AAAAA
- rgb(92, 123, 230)hsl(227, 73%, 63%)
- Texto blanco
- 3.87:1AAAAA
- Texto negro
- 5.43:1AAAAA
- rgb(59, 91, 219)hsl(228, 69%, 55%)
- Texto blanco
- 5.67:1AAAAA
- Texto negro
- 3.71:1AAAAA
- rgb(60, 52, 31)hsl(43, 32%, 18%)
- Texto blanco
- 12.33:1AAAAA
- Texto negro
- 1.70:1AAAAA
Nada sale de tu dispositivo
Esta herramienta funciona por completo en tu navegador. Lo que escribes, tocas o grabas aquí se queda en tu dispositivo: no se sube ni se guarda nada en un servidor.
Cómo funciona
- Pulsa Generar o la barra espaciadora para una paleta nueva, o escribe un color base y elige un esquema, como complementarios o tríada.
- Bloquea los colores que te gusten: la siguiente paleta los conserva y crea el resto a su alrededor. Haz clic en un color para copiar su código hex.
- Mira las etiquetas de contraste, comprueba cómo la ve una persona daltónica y copia las variables CSS o descarga un PNG o un SVG.
Preguntas frecuentes
- ¿Qué esquemas de color hay?
- Reglas del círculo cromático: análogos usa colores vecinos (±30°); complementarios, el tono opuesto; complementarios divididos, los dos que rodean al opuesto; tríada, tres tonos a 120°; cuadrado, cuatro a 90°; monocromo, un solo tono en pasos de claro a oscuro, y pastel, colores suaves y claros de todo el círculo.
- ¿Por qué los colores se ven equilibrados?
- Se calculan en OKLCH, un espacio de color que sigue cómo percibe el ojo la luminosidad, así que los pasos de claro a oscuro parecen regulares; los colores que una pantalla no puede mostrar se suavizan hasta que sí puede.
- ¿Qué indican las etiquetas de contraste?
- La relación de contraste WCAG del texto blanco y del negro sobre cada color: el nivel AA exige 4,5 para texto normal y el AAA, 7. La etiqueta se escribe en el que se lee mejor.
- ¿Puedo sacar una paleta de una foto?
- Sí: la herramienta «Paleta de colores de una imagen» saca los colores principales de una foto. Esta crea combinaciones nuevas.
- ¿Se sube algo?
- No. Las paletas se crean en tu navegador; el enlace para compartir lleva los propios colores.
Herramientas relacionadas
◉ Paleta de colores de una imagen Los colores principales de la imagen, en códigos hex. ◒ Herramientas para desarrolladores Conversor de color HEX, RGB, HSL y CMYK, más la relación de contraste que decide la legibilidad. ◒ Herramientas para desarrolladores Generador de degradados CSS Colores por un lado, una declaración por el otro. ◐ Herramientas para desarrolladores Comprobador de contraste Si alguien puede leerlo de verdad.