Herramientas de color

Selector: el cuadro grande es un mapa de saturación y valor para el tono actual: de izquierda a derecha aumenta la saturación, y de arriba abajo disminuye el brillo. Haga clic en cualquier punto para elegir un color. La barra vertical fina de la derecha es el deslizador de tono (de 0° a 360°): desplácelo para cambiar el tono base y el cuadro se redibuja en consecuencia. El lado derecho muestra el color elegido en formatos HEX, RGB y HSL: haga clic en cualquier valor para copiarlo.

Paleta: el selector de color izquierdo y el cuadro de edición derecho guardan el mismo color base: están sincronizados en ambos sentidos (elija un color o escriba un valor hex, y ambos se actualizan). Las cinco filas de paleta de abajo se derivan de este color base girando su tono por la rueda de colores: Complementario (tono +180°, máximo contraste), Triádico (+120° / +240°, tríada equilibrada), Tetrádico (+90° / +180° / +270°, cuatro colores en rectángulo), Análogo (-30° / base / +30° / +60°, vecinos armónicos) y Complementario dividido (+150° / +210°, más suave que el complementario puro). La primera muestra de cada fila es siempre el propio color base, y el resto son sus variantes de tono giradas.

Convertir: introduzca cualquier color válido (HEX, #3b82f6; función CSS, rgb(59,130,246) / hsl(217,90%,60%); o un color con nombre, dodgerblue) y obtenga la conversión instantánea a todos los formatos principales. El desplegable de formato puede indicar al analizador el formato correcto si la detección automática se equivoca. La salida muestra HEX, RGB (0-255), HSL (grados, %, %), HSV y CMYK. Haga clic en cualquier valor para copiarlo.

Daltonismo: suba una imagen y seleccione un tipo de deficiencia de visión del color para simularla. La herramienta aplica una transformación matricial de la respuesta de los conos a cada píxel, reasignando los valores RGB para aproximar cómo perciben la imagen las personas con distintas formas de daltonismo. El lienzo izquierdo muestra la original y el derecho la vista simulada. El desplegable cubre tres tipos de dicromacia (falta un pigmento de cono: protanopia, deuteranopia, tritanopia), la acromatopsia completa (sin visión del color) y tres tipos de tricromacia anómala (respuesta débil de los conos). Las imágenes de menor resolución se cargan más rápido.

Degradado: es un constructor visual de degradados CSS. Elija lineal (direccional) o radial (desde el centro hacia fuera), ajuste el ángulo (0° = de abajo arriba, 90° = de izquierda a derecha) y defina las paradas de color. Cada parada tiene un selector de color y se distribuye de forma uniforme (0 %, 50 %, 100 % para tres paradas). Haga clic en + Parada para añadir puntos de color intermedios y degradados más complejos. La vista previa se actualiza en directo, y el CSS generado está listo para copiar debajo.

Contraste: calcula la razón de contraste WCAG 2.1 entre el texto de primer plano y el color de fondo, usando la fórmula de luminancia relativa a partir de los valores sRGB (con corrección gamma). La razón va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco). Los resultados muestran aprobado o suspendido en tres niveles de cumplimiento: AA texto normal (razón ≥ 4,5:1), AAA texto grande (razón ≥ 4,5:1 para texto ≥ 18 pt o negrita ≥ 14 pt) y AAA texto normal (razón ≥ 7:1). La vista previa del texto de ejemplo se actualiza en tiempo real al ajustar los colores.

Extraer: suba cualquier imagen y la herramienta identifica su paleta de colores dominantes mediante cuantización de color. La imagen se reduce a 100×100 px, y cada píxel se agrupa en un histograma de 4 bits por canal (16 niveles por R/G/B = 4096 bins). Los píxeles transparentes se omiten. Los bins más frecuentes se ordenan por número de píxeles, y el color central de cada bin se convierte en una muestra. Cada muestra muestra su valor HEX y el porcentaje de píxeles de la imagen que representa. Ajuste el deslizador de cantidad (2-12) para controlar cuántos colores dominantes se extraen.

Mezclador: mezcla dos colores en el espacio de color RGB por interpolación lineal. El deslizador de proporción determina la mezcla: 0 % es el Color 1 puro, 100 % es el Color 2 puro y 50 % es una mezcla uniforme. Cada canal R, G y B se interpola por separado (por ejemplo, rojo + azul al 50 % da púrpura). La vista previa del resultado y los valores HEX/RGB se actualizan en directo al arrastrar el deslizador o cambiar cualquiera de los colores.

Temperatura: convierte la temperatura de color del cuerpo negro en kelvin en el color visible correspondiente, usando el algoritmo de aproximación de Tanner Helland. Las temperaturas bajas (1000-3000 K) producen tonos cálidos anaranjados o rojizos, como la luz de una vela o de una bombilla incandescente; el rango medio (4000-6500 K) va del blanco neutro a la luz diurna; las temperaturas altas (8000-40000 K) se desplazan a un azul frío, como el cielo nublado o el agua profunda. La etiqueta de debajo identifica la fuente de luz real más cercana a cada temperatura.

Con nombre: explore una colección combinada de 80 colores tradicionales chinos (胭脂, 朱砂, 黛蓝, etc.: nombres tomados de la literatura, la pintura y las tradiciones de tinte chinas clásicas) y más de 140 colores con nombre CSS (la paleta web estándar). Use el cuadro de búsqueda para filtrar por nombre o por valor HEX, o cambie de categoría con el desplegable. Haga clic en cualquier muestra de color para ver una vista previa grande con el nombre y el código HEX; haga clic en el código para copiarlo.