Color

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

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.

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

Crea paletas armoniosas desde un color base con seis esquemas.

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

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.