Generador de paletas
Palette Generator
Construye una paleta armónica a partir de un color base con reglas de complementarios, tríadas y análogos.
Toma un color y rota su tono según una regla de armonía, manteniendo la luminosidad y el croma OKLCH para que una tríada no vuelva con un miembro visiblemente más oscuro que los demás. La misma regla se dibuja en HSL debajo, que es la forma más rápida de ver por qué eso importa. Antes de exportar, comprueba si dos muestras cualesquiera se confunden entre sí bajo una deficiencia de visión del color y si cada una puede sostener texto.
Color base
Cualquier notación CSS. La armonía mantiene la luminosidad y el croma OKLCH de este color y gira el matiz.
Armonía
Vecinos, 30° a cada lado. Se lee como una sola familia de color; necesita una diferencia de contraste para marcar jerarquía, porque los matices no lo harán.
OKLCH
#0094c3L 62,3 C 0,188 H 230
#3b82f6L 62,3 C 0,188 H 260
#886ceeL 62,3 C 0,188 H 290
La misma regla en HSL, para comparar
#3be0f6L 83,3 C 0,132 H 209
#3b82f6L 62,3 C 0,188 H 260
#523bf6L 51,4 C 0,260 H 278
Las dos tiras giran el matiz los mismos ángulos. La fila OKLCH mantiene constante la luminosidad percibida: su amplitud es 0,0000, mientras que la de la fila HSL es 0,3191, porque la “luminosidad” de HSL no es perceptual. El amarillo puro y el azul puro dicen los dos 50 % y se separan por más de 65 puntos de L*. Esa diferencia no es un artefacto de renderizado; es una rampa de luminosidad que nadie pidió, incrustada en cada armonía HSL.
Amplitud de luminosidad
0,0000
Fuera de sRGB
1 de 3
1 muestra no pudo mantener el croma base dentro de sRGB y renunció a 0,064 de él. Los valores hex son las versiones mapeadas; los valores oklch() de la exportación son lo que una pantalla de gama amplia mostrará de verdad.
¿Aguantará?
La pareja más cercana bajo cada tipo de visión simulada, en ΔE OKLab
- Protanopía0,026— estos dos se confunden
- Deuteranopía0,021— estos dos se confunden
- Tritanopía0,012— estos dos se confunden
- Acromatopsia0,013— estos dos se confunden
Contraste WCAG sobre blanco y sobre negro
- sobre blanco 3,49·sobre negro 6,02sirve para texto sobre uno de los dos
- sobre blanco 3,68·sobre negro 5,71sirve para texto sobre uno de los dos
- sobre blanco 3,87·sobre negro 5,43sirve para texto sobre uno de los dos
Una pareja que se confunde bajo una simulación es una pareja que no puede ser la única diferencia entre dos cosas: añade una forma, una etiqueta o un escalón de luminosidad. El comprobador de contraste tiene el veredicto APCA completo para una pareja concreta.
Exportar
Las formas CSS y Tailwind emiten oklch() con el hex como comentario: tirar la precisión en la exportación desharía la razón misma de calcular en OKLCH, y un navegador al que le llega oklch() dibuja el color de gama amplia donde puede.
¿Quieres una rampa completa de 50 a 950 desde uno de estos en vez de un juego de matices? La escala de tonos y sombras construye una, anclada a una curva de luminosidad medida.
Cómo se usa
Introduce el color que ya tienes
Normalmente el color de marca, en cualquier notación CSS. Todo lo demás se deriva de su tono, luminosidad y croma, así que esta es la única decisión que da forma al conjunto entero.
Elige la regla y luego ajusta su apertura
Complementaria es un tono opuesto; análoga son vecinos; triádica son tres a 120°; complementaria dividida suaviza un par complementario. El deslizador de apertura escala esos desplazamientos: 1 es la separación de manual, y por debajo el conjunto se lee como una sola familia. Monocromática y sombras piden en cambio un número de pasos, porque varían la luminosidad y no el tono.
Compara las dos tiras
La dispersión de luminosidad bajo la fila OKLCH es casi cero por construcción. La fila HSL rota por los mismos ángulos y su dispersión no lo es, porque la luminosidad HSL no es perceptual: el amarillo puro y el azul puro reclaman los dos un 50 %. Si para este color base concreto las dos tiras te parecen iguales, lo son, y cualquiera de las dos vale.
Lee el panel «¿aguantará?» antes de exportar
Informa del par más cercano bajo cada tipo de visión simulado en ΔE OKLab, y del contraste WCAG de cada muestra contra blanco y negro. Un par marcado como que se confunde no debe ser lo único que distinga dos estados: añade una forma, una etiqueta o un paso de luminosidad.
Exporta con el prefijo que usa tu código
Variables CSS, un bloque `@theme` de Tailwind, SCSS, tokens JSON o una hoja de muestras SVG. Las formas CSS emiten `oklch()` con el hexadecimal al lado como comentario.
Preguntas frecuentes
El hexadecimal y el oklch() de la exportación son colores distintos. ¿Cuál es el correcto?
Los dos, para pantallas distintas. Cuando mantener el croma base pondría una muestra fuera de sRGB, el hexadecimal es la versión con mapeo de gama —croma cedido para caber— y el valor `oklch()` es el color que realmente se calculó, que una pantalla de gama amplia mostrará. El panel dice cuánto croma perdió cada muestra recortada.
¿Una regla de armonía significa que la paleta se verá bien?
No. Son ángulos en una rueda de tonos, y la geometría no es gusto. Lo que una regla te da es un conjunto inicial defendible con una razón detrás de cada tono, que vale más que tres colores elegidos de uno en uno. El juicio sobre la proporción —cuál es el área grande y cuál el acento del 5 %— no está aquí en absoluto.
¿Puedo pegar una paleta que ya tengo y comprobarla?
Aquí no: esta página parte de un color y deriva el resto. Para un par concreto, el comprobador de contraste toma los dos colores y da el veredicto completo. Para una rampa a partir de una de estas muestras, la escala de tonos y sombras la construye.
¿Qué cuenta como «estos dos se confunden»?
Un ΔE OKLab por debajo de 0,06 tras la simulación, que es más o menos donde dos rellenos dejan de distinguirse de un vistazo. La simulación en sí es el enfoque de matriz al estilo Brettel: un modelo de las deficiencias comunes, no una medición de ninguna persona concreta, y no dice nada sobre los tipos más raros ni sobre la pérdida de visión adquirida.
Puede recibir de
Extractor de paleta de una imagen
Palette Extractor
Saca una paleta de N colores de una imagen y la exporta en hexadecimal, como variables CSS o como muestrario ASE.
Simulador de daltonismo
Colour Blindness Simulator
Vuelve a dibujar una imagen tal como la vería alguien con protanopía, deuteranopía, tritanopía o visión en escala de grises.
Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.
Generador de degradados CSS
CSS Gradient Builder
Compone degradados lineales, radiales y cónicos con paradas que se arrastran, y emite el CSS en sRGB o en OKLCH.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Escala de tonos y sombras
Tint & Shade Scale
Genera una escala de luminosidad de 50 a 950 desde un solo color con pasos perceptualmente iguales, lista para usar como tokens de diseño.
Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.
Extractor de tokens de CSS
CSS Token Extractor
Saca los colores, espaciados, radios y tipografías de una hoja de estilos y propone un conjunto de propiedades personalizadas.
Extractor de paleta de una imagen
Palette Extractor
Saca una paleta de N colores de una imagen y la exporta en hexadecimal, como variables CSS o como muestrario ASE.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.