Colores y diseño

Elige, convierte y combina colores y genera CSS para tus diseños.

• Buscador de nombres de colores Descubre cómo se llama un color. Introduce un código HEX o RGB y obtén los 5 nombres más cercanos entre más de 30 000 colores, más el color CSS más próximo.
• Calculadora de relación de aspecto Calcula la relación de aspecto de cualquier ancho y alto, redimensiona sin deformar, compara 16:9, 4:3 o 21:9 y copia el código CSS aspect-ratio.
• Combinador de fuentes tipográficas Prueba combinaciones de fuentes para títulos y texto con 20 tipografías de licencia abierta, ajusta tamaño e interlineado y copia el font-family en CSS.
• Comprobador de contraste Comprobador de contraste WCAG gratis. Introduce el color del texto y del fondo y obtén la relación de contraste, el resultado AA/AAA y un color válido.
• Conversor de colores Convierte cualquier color entre HEX, RGB, HSL, HSV, HWB, CMYK, LAB, LCH y OKLCH. Pega un código, ve el color y copia cada formato con un clic.
• Conversor de PX a REM Convierte px a rem y em con cualquier tamaño de fuente raíz, crea una tabla de conversión y pasa a rem todos los px de un fragmento de CSS con un clic.
• Cuentagotas de color para imágenes Sube una imagen y haz clic en cualquier píxel para obtener su color en HEX, RGB, HSL, HSV y CMYK. Lupa, promedio y lista de colores, todo en tu navegador.
• Editor de cubic-bezier Diseña curvas de aceleración CSS con un editor cubic-bezier arrastrable, compáralas con linear en una animación y copia cubic-bezier() o su versión linear().
• Generador de border-radius Crea bordes redondeados en CSS arrastrando los puntos. Ajusta cada esquina en px o %, usa la sintaxis elíptica de 8 valores, crea blobs y copia el código.
• Generador de box-shadow Diseña sombras CSS por capas con vista previa en directo. Ajusta desplazamiento, desenfoque, expansión, color, opacidad e inset, y copia el código.
• Generador de clip-path Dibuja formas CSS clip-path arrastrando puntos. Edita polígonos, círculos, elipses e inset, parte de estrellas o flechas predefinidas y copia el código.
• Generador de degradados CSS Crea degradados CSS lineales, radiales y cónicos con vista previa en directo. Añade y arrastra paradas de color, ajusta el ángulo y copia el código CSS.
• Generador de paletas de colores Genera paletas de colores a partir de un color base con reglas de armonía: complementaria, análoga, triádica, tetrádica, cuadrada y monocromática.
• Generador de tonos claros y oscuros Genera tonos claros y oscuros de cualquier color en pasos del 5, 10, 20 o 25 %, mezclados en OKLCH o sRGB, y expórtalos como variables CSS o para Tailwind.
• Generador visual de Flexbox y Grid Crea diseños con flexbox y CSS grid de forma visual. Ajusta el contenedor y los elementos, nombra áreas de grid, mira el resultado y copia el CSS y el HTML.
• Paleta de colores desde imagen Extrae una paleta de colores de cualquier imagen. Sube una foto y obtén sus colores dominantes en HEX con su proporción, listos para copiar o exportar.
• Reductor de fuentes (subsetting) Reduce una fuente a los caracteres que necesitas con HarfBuzz, en tu navegador. Obtén un TTF/OTF y un WOFF más ligeros y una regla @font-face con unicode-range.
• Selector de colores Selector de colores online y gratuito. Elige cualquier color y copia al instante sus códigos HEX, RGB, HSL, HSV y CMYK, con su contraste sobre blanco y negro.
• Simulador de daltonismo Simulador de daltonismo gratuito. Ve cualquier imagen con protanopia, deuteranopia, tritanopia, sus formas leves o acromatopsia, lado a lado o con deslizador.