Color

Comprueba el contraste texto/fondo según los niveles WCAG AA y AAA.

Elige un color base, obtén armonías clásicas de rueda de color — complementario, split-complementario, triádico, tetrádico, cuadrado, análogo, monocromático.

Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.

Convierte cualquier color entre HEX, RGB, HSL, HSV, OKLCH y una variable CSS.

Diseña box-shadow CSS visualmente con varias capas, vista previa en vivo y salida CSS / Tailwind lista para copiar.

Ve cómo se ve tu imagen para personas con cada uno de los 8 tipos de deficiencia visual cromática (CVD).

Suelta una imagen y la herramienta extrae una paleta de colores dominantes vía Canvas — copia HEX o llévate el set completo.

Compón visualmente blur, brightness, contrast, hue, sepia, invert y más — copia el filtro CSS o el valor arbitrario de Tailwind.

Construye un `font-size: clamp(...)` fluido que escala entre dos anchos de viewport — copia una línea.

Arrastra esquinas por separado, prueba radios elípticos, copia el CSS — con presets chat-bubble, pill, blob y tab.

Genera triángulos CSS puros en 8 direcciones — usando border o clip-path, copia la regla y úsala.

Arrastra los puntos de control para diseñar una curva de easing CSS — previsualiza el movimiento, copia cubic-bezier().

Interpola entre dos colores en RGB, HSL o CIELAB. Mira una franja de gradiente con pasos intermedios.

Genera tintes (más claros), sombras (más oscuros) y tonos (con gris) desde cualquier color base — 2 a 20 pasos, en HEX, RGB o HSL.

Los 147 colores nombrados CSS / X11 con HEX, RGB y muestra en vivo — buscables y agrupados por matiz.

Arrastra los sliders de matiz, saturación, luminosidad y alpha para elegir un color — copia HEX, RGB, HSL o valor arbitrario Tailwind.

La paleta por defecto completa de Tailwind CSS — 22 matices × 11 sombras, 50 a 950 — click para copiar como clase Tailwind, HEX o rgb().

Desliza un valor en Kelvin y mira el color de cuerpo negro pasar de ámbar cálido a blanco neutro y azul frío — más varios presets de fuentes de luz comunes.

Elige dos colores y mira qué tan perceptualmente diferentes son — CIE76 ΔE, CIEDE2000 ΔE y distancia RGB plana con un swatch lado a lado.

Pega una lista de colores hex y ordénalos por tono, saturación, claridad o brillo percibido — útil pra organizar una paleta de tokens de diseño.

Elige colores en el espacio OKLCH perceptualmente uniforme (luminosidad · croma · matiz) — y ve si cada elección cabe dentro del gamut de pantalla sRGB.

Elige dos colores hex, obtén N pasos intermedios discretos — en sRGB, linear RGB, OKLab o HSL — con easing opcional.

Define una paleta de colores una vez, exporta a CSS custom properties, configuración Tailwind, SCSS, LESS, JSON de design tokens, SwiftUI Color o `colors.xml` de Android. Vista previa de swatches en vivo.

Constructor visual para CSS `conic-gradient()` — rotar ángulo, posición del centro, paradas de color, vista previa de forma. Útil para gráficos circulares, gráficos de anillo, patrones de tablero de ajedrez, ruedas de color.

Encuentra el nombre de color CSS, Tailwind o XKCD más cercano a cualquier hex/RGB — ordenado por distancia perceptual en el espacio OKLab.

Genera una paleta tonal Material You / Material Design 3 (tonos 0–100) desde un color base, con contraste vs blanco/negro y exportación CSS/Tailwind/JSON/SCSS.

Convierte una longitud de onda en nanómetros (380–780 nm — el espectro visible) a un color sRGB aproximado, con una barra de gradiente arcoíris clicable y líneas de absorción de Fraunhofer del espectro solar real como referencia.

Convierte entre colores RGB/hex de pantalla y porcentajes CMYK para impresión, con estrategias de generación de negro Simple, GCR (Reemplazo de componente gris) y UCR (Eliminación de subcolor), vista previa de separación de canales y lectura de cobertura total de tinta.

Compara siete métricas de brillo distintas — Luminosidad HSL, Valor HSV, Luminancia Relativa WCAG (LRV), L* de CIE Lab (claridad perceptual), Luma Rec. 709, Brillo Percibido HSP y promedio ingenuo (R+G+B)/3 — para uno o dos colores en paralelo, con deltas que muestran por qué un color 'más claro' puede sentirse más oscuro.

Aplica los 16 modos de mezcla del W3C (multiply, screen, overlay, soft-light, hue, color, luminosity…) a dos colores y obtén el hex resultante y un snippet CSS mix-blend-mode listo para copiar.

Compara cómo la función moderna CSS color-mix() mezcla dos colores en distintos espacios de interpolación (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) — muestras en vivo, hex calculado, tira de gradiente completa por espacio y CSS copiable.

Generador visual de la propiedad CSS `clip-path` — elige una forma (círculo, elipse, inset o polígono), ajusta números con sliders o haz clic en la vista previa para añadir puntos del polígono, y copia una declaración CSS lista para pegar. Incluye 10 presets (triángulo, hexágono, estrella, flecha, bocadillo, plus, …).

Apila tantas capas de text-shadow como quieras — neón, 3D, contorno, long-shadow — preview en vivo y CSS listo para copiar.