Empieza con un color y genera armonías complementarias, análogas, triádicas y más; luego exporta como CSS, Tailwind v4, SVG o PNG.
Guía de teoría del color
La rueda ordena los tonos en un círculo para que las relaciones se vuelvan espaciales. La distancia significa contraste y la cercanía, calma. Todo lo siguiente es interactivo: cambia la rueda y estas ideas encajan más rápido.
Consejo: comparte cualquier resultado — la URL siempre guarda tu color base, la armonía y la luminosidad.
Un solo tono nunca basta para interfaces. Mézclalo con negro para sombras (encabezados, hovers), con blanco para tintes (fondos, modales) y con gris para tonos (texto atenuado, bordes).
Índigo de sombra a tinte. La misma lógica mueve cada paleta de arriba.
En la rueda RYB clásica, el rojo, el amarillo y el azul son primarios; al mezclarlos nacen el naranja, el verde y el violeta. En pantalla mezclamos luz (RGB), así que esta herramienta calcula en HSL/HSV: el mismo círculo, afinado para píxeles.
Twelve stops around the disc; every other color contains a trace of a primary.
Ease Colors es una rueda de color online y gratis para diseñadores y desarrolladores que necesitan color fiable sin salir del navegador. Elige un color base en el selector de rueda de color interactivo, previsualiza seis armonías a la vez y copia códigos HEX, RGB, HSL u OKLCH listos para producción. Nada se sube a ningún servidor, no hay que crear ninguna cuenta y cada resultado recibe una URL compartible que restaura tu color base, tu armonía y tu luminosidad exactos. Una rampa de sombras integrada estira cada color base del tinte a la sombra, y toda la página se maneja con teclado, con foco visible en cada paso.
La rueda de color es un diagrama circular de color donde los tonos se ordenan para que las relaciones se vuelvan espaciales: los colores vecinos transmiten calma y los opuestos crean tensión. La clásica rueda de primarios de las clases de arte mezcla pintura roja, amarilla y azul, mientras la rueda RGB de tu pantalla mezcla luz. Esta herramienta calcula cada armonía en el espacio HSV/HSL, afinado para píxeles en lugar de pigmento. Arrastra un punto por el disco para fijar el tono, acércalo al borde para la saturación y gira el anillo exterior de luminosidad para llevar un mismo tono del fondo claro al texto oscuro. Como el disco siempre se dibuja con viveza total, los marcadores se mantienen repartidos y arrastrables incluso con paletas casi negras o casi blancas — la geometría nunca colapsa en los extremos.
Esta rueda de color online es también un selector de color online y una herramienta de color completa:
¿Explorando rumbos? Pulsa Shuffle en la galería de paletas de colores para un giro aleatorio entre más de 400 conjuntos seleccionados.
Antes de publicar, ejecuta la simulación de daltonismo para previsualizar protanopía, deuteranopía, tritanopía y acromatopsia, y mantén el texto legible con etiquetas de contraste automático en cada tira.
Cada selector de color de esta página habla cuatro formatos. El campo hexadecimal acepta cualquier código como #EDEA37, el selector RGB lee tripletas como rgb(99, 102, 241), y HSL más OKLCH cubren la uniformidad perceptual que RGB por sí solo no alcanza. Los equipos front-end reciben un flujo de selector HTML y selector CSS listo: exporta variables CSS, tokens de tema Tailwind v4, objeto de configuración Tailwind v3, JSON de Figma o solo los códigos. El cuentagotas de pantalla integrado (EyeDropper) muestrea cualquier píxel de tu monitor, y los puntos de la rueda selectora se siguen arrastrando con cualquier luminosidad. Este selector de color online es gratis, con exportaciones con alfa que cubren cada caso de uso RGBA. El modo personalizado congela cualquier conjunto generado en una lista editable a mano: aclara u oscurece una muestra, arrastra para reordenar, inserta un punto medio mezclado o extiende cualquier extremo — cada cambio reflejado al instante en la URL compartible.
Fotógrafos y diseñadores de marca recurren al selector de color de imagen para tomar prestadas paletas del mundo real. Sube una foto — o pega la URL de una imagen — y el selector desde imagen muestra una lupa con rejilla de píxeles y cruz, para leer el píxel exacto que apuntas, incluso al 800% de zoom. Fija el color, cópialo como HEX, RGB, HSL u OKLCH y envíalo a la rueda con un clic. Ajusta la paleta extraída de dos a diez colores, descarga la tira como PNG o guárdala en la caja del navegador para reabrirla luego. Cada imagen que abres se queda en tu dispositivo — nada se sube a ningún lado.
Cuando una muestra no basta, el generador de paletas de colores construye una paleta lista desde una imagen en segundos. Puntúa los píxeles por frecuencia y saturación, filtra casi-duplicados y ordena los ganadores por tono — de dos a diez colores que puedes reordenar, ampliar y eliminar. Quienes retocan retratos apreciarán los conjuntos de tonos de piel, junto a las colecciones pastel, azules y verdes. Guarda favoritos en la caja del navegador, descarga cualquier paleta de colores como PNG o SVG y exporta tokens para la entrega. Los tiradores arrastrables viajan sobre la imagen en sus puntos de muestreo, así que repetir un color es arrastrar, no adivinar.
Una rueda complementaria empareja tonos a 180° para la máxima tensión — naranja contra azul, violeta contra amarillo. La tira de complementarios marca tu color base con un punto negro, para ver exactamente qué muestra reservar a botones y enlaces mientras el tono dominante gobierna el diseño. Las rotaciones divididas, triádicas, tetrádicas y cuadradas la acompañan en el panel de armonías como alternativas más suaves o audaces.
Doce sistemas de análisis estacional viven en la galería — diecisiete paletas cada uno. Los encargos cálidos y apagados empiezan con la paleta otoño suave, y los fríos y apagados recurren a la paleta verano suave. Los conjuntos de paleta otoño de alta calidez sirven a campañas otoñales y marcas de comida, y la paleta invierno profundo entrega brillos joya sobre casi-negro para lujo y noche. Los diseños claros y cálidos tiran de la paleta primavera clara, el minimalismo aireado de la paleta verano frío y el trabajo oscuro opulento de la paleta otoño profundo. El contraste helado pertenece a la paleta invierno frío, la calidez brillante a la paleta primavera cálida, los medios suaves a la paleta verano verdadero y el lujo silencioso a la paleta neutra. Ambientes más amplios de verano, invierno, primavera y otoño completan más de 400 conjuntos, cada uno con copia HEX, RGB, HSL y OKLCH en un clic.
Si llegaste buscando Adobe color wheel, Adobe color picker, Canva color wheel o Google color picker, ya conoces la tarea: convertir un color de marca en un conjunto equilibrado. Ease Colors cubre el mismo terreno — armonías, códigos HEX/RGB/HSL/OKLCH, muestreo de imágenes y exportación de paletas — gratis en el navegador, con URLs compartibles y sin cuentas de por medio. Controles de teclado primero, etiquetas para lectores de pantalla y modo de movimiento reducido incluidos.
Abre la rueda de color, prueba el selector desde imagen o explora más de 400 paletas de colores. Tu próxima paleta está a un arrastre.
Haz clic en cualquier muestra. Cambia el formato a HEX, RGB, HSL u OKLCH antes de copiar.
Pulsa «Copiar enlace». La URL guarda tu color base, la armonía y la luminosidad.
Sí. Cada HEX, token y exportación es tuyo — sin atribución.
La rueda de color es un diagrama circular que ordena los tonos para que sus relaciones se vuelvan espaciales: los colores vecinos transmiten calma y los opuestos crean tensión. En arte se enseña una rueda rojo-amarillo-azul para mezclar pintura; las pantallas usan una rueda RGB que mezcla luz. Los diseñadores la usan para elegir colores base, construir armonías y revisar el contraste antes de que una paleta llegue al diseño.
Empieza con un color base — escribe un código HEX, abre el selector del sistema o muestrea tu pantalla. Elige una armonía como análoga, complementaria o triádica y ajusta la luminosidad con el anillo exterior hasta tener tonos de fondo, texto y acento. Copia cada muestra como HEX, RGB, HSL u OKLCH y pega los códigos en CSS, Tailwind o Figma.
Su propósito principal es eliminar la adivinanza al combinar colores. En lugar de emparejar a ojo, lees la geometría: la distancia significa contraste y la cercanía significa calma. Eso da a cada interfaz una jerarquía clara — un tono dominante, unos pocos de apoyo y un acento reservado — para que botones, enlaces y títulos caigan donde el ojo los espera.
La literatura de diseño suele listar ocho: monocromático (un tono, varias luminosidades), análogo (vecinos), complementario (opuestos), complementario dividido (una base más dos vecinos de su opuesto), triádico (triángulo), tetrádico o rectangular (dos pares complementarios), cuadrado (cuatro esquinas) y acromático o neutro (negros, blancos y grises). Esta herramienta cubre seis directamente, más un modo personalizado para listas de dos a ocho colores.
Arrastra un punto por el disco: el ángulo fija el tono y la distancia al centro fija la saturación. Arrastra el anillo exterior para fijar la luminosidad sin tocar tono ni saturación. También puedes escribir un valor HEX exacto, abrir la caja de color del sistema o elegir cualquier píxel de tu monitor con el selector de pantalla — todos los métodos llegan al mismo color base compartible.
Un selector de color convierte una elección visual en un valor exacto y reutilizable. Lee cualquier color como códigos HEX, RGB, HSL u OKLCH para que diseñadores y desarrolladores hablen el mismo idioma: lo que haces clic es idéntico al bit que llega a CSS, tokens Tailwind o estilos Figma — sin aproximar tonos a ojo.
Los tipos principales son selectores de rueda o disco (tono más saturación de un vistazo), selectores de deslizadores (canales RGB o HSL), campos HEX (valores directos), cuentagotas o selectores de pantalla (muestrean tu monitor), selectores desde imagen (lupa sobre una foto) y bibliotecas de paletas (conjuntos seleccionados como la galería de más de 400 aquí). Este sitio combina los seis en un solo flujo.
Un código de color es un valor de texto que describe un color exacto. HEX lo escribe como seis dígitos hexadecimales (#EDEA37); RGB lista los canales rojo, verde y azul; HSL lista tono, saturación y luminosidad; OKLCH es un formato perceptual más nuevo donde pasos numéricos iguales se ven igual de distintos. Los cuatro describen la misma muestra — el formato solo cambia cómo la lees y editas.
Elige un color con la rueda, un deslizador, el campo HEX o el selector de pantalla, y cópialo en el formato que tu proyecto necesite — HEX para la web, RGB o RGBA para código de apps, HSL para ajustes rápidos, OKLCH para uniformidad perceptual. Pega el valor en tu hoja de estilos, config de Tailwind o herramienta de diseño, y guarda el enlace para tener el color exacto a un clic más tarde.
Una paleta de colores mantiene todas las superficies de un producto hablando el mismo lenguaje visual. Asigna roles — fondo, texto, acentos, estados — para que las interfaces se sientan coherentes en lugar de armadas con muestras al azar. Una buena paleta además integra contraste y jerarquía desde el inicio, lo que significa menos correcciones de legibilidad y una marca más fuerte y reconocible.
Los tipos comunes incluyen paletas monocromáticas, análogas y complementarias construidas con geometría de rueda; paletas pastel y neón definidas por energía; paletas estacionales según subtonos de piel (de otoño suave a neutro); paletas de marca fijadas a colores corporativos; y paletas extraídas muestreadas de fotografías. La galería aquí reúne todas — más de 400 conjuntos en más de 60 categorías.
Parte de un color base que encaje con el ambiente — cálido y apagado, frío y aireado, u oscuro y dramático. Amplíalo con una armonía y revísalo como lo verán los usuarios: contraste del texto, acentos de botones y simulación de daltonismo para protanopía, deuteranopía y tritanopía. Si sobrevive a las tres, comparte el enlace y publícala.