Encuentra el color exacto
Ajusta tono, saturación y brillo, o pega un código, y copia el valor en HEX, RGB, HSL, OKLCH o CMYK con un clic.
Probar ahoraHerramientas de color online
Selector de color, paletas y códigos de color en un solo sitio
Elige cualquier color y copia su código HEX, RGB, HSL u OKLCH, crea paletas con armonías, saca los colores de una foto y comprueba el contraste WCAG.
Gratis y sin registro. Todo funciona en tu navegador: tus imágenes nunca salen de tu dispositivo.
Todo lo que necesitas para trabajar con color
Crea paletas que combinan
Parte de un color y aplica armonías del círculo cromático: análoga, complementaria, triádica o tetrádica. Exporta a CSS, Tailwind o Figma.
Probar ahoraSaca los colores de una foto
Sube una imagen y obtén su paleta dominante, o toma cualquier píxel con el cuentagotas. La imagen se procesa en tu navegador.
Probar ahoraComprueba que se lee bien
Mide el contraste entre texto y fondo según WCAG 2.2 y descubre al momento si cumple AA y AAA.
Probar ahoraMás de 900 paletas listas para usar
Filtra por color o por estilo (pastel, vintage, neón…), guarda tus favoritas y abre cualquier paleta en el círculo cromático para ajustarla.
Explorar paletasDel primer color al código final
- HEX
- #E4572E
- RGB
- rgb(228, 87, 46)
- HSL
- hsl(14, 77%, 54%)
- OKLCH
- oklch(0.6372 0.1838 36.48)
- CMYK
- C0 M62 Y80 K11
1. Códigos de color en todos los formatos
El mismo color se escribe distinto según dónde lo uses. Prueba cualquier color aquí mismo y copia el formato que necesitas.
HEX para la web
El formato más habitual en CSS y en herramientas de diseño: seis dígitos después de la almohadilla.
RGB y HSL para ajustar
RGB separa rojo, verde y azul de 0 a 255. HSL trabaja con tono, saturación y luminosidad, así que crear variantes es muy fácil.
OKLCH para escalas modernas
El formato más reciente de CSS: los cambios de luminosidad se perciben uniformes, ideal para escalas de color.
2. Combinaciones que funcionan
Una buena paleta no es cuestión de suerte: se apoya en las relaciones entre tonos del círculo cromático.
Armonías de color
Análoga para resultados tranquilos, complementaria para dar contraste y triádica para diseños con mucha vida.
Mezclas y degradados
Mezcla dos colores para encontrar el tono intermedio o crea degradados CSS lineales, radiales y cónicos.
Colores de Tailwind y Material
Consulta las escalas oficiales y pruébalas en componentes de interfaz reales.
3. Diseña para todo el mundo
Alrededor de un 8 % de los hombres tiene algún tipo de daltonismo, y muchas pantallas se ven con reflejos. Comprobar el color también es diseñar.
Contraste WCAG
Calcula el ratio entre texto y fondo y comprueba los niveles AA y AAA para texto normal y grande.
Simulador de daltonismo
Mira tu paleta como la ven las personas con protanopia, deuteranopia, tritanopia o acromatopsia.
Todas las herramientas de Matizly
12 herramientas gratuitas que funcionan en tu navegador y te dan el código listo para pegar.
- Selector de colorElige cualquier color y copia Hex, RGB, HSL u OKLCH con sombras, matices y armonías.
- Círculo cromáticoExplora armonías en un círculo interactivo y crea paletas equilibradas desde un color base.
- Colores de imagenExtrae colores de cualquier imagen y construye paletas a partir de una foto.
- Mezclador de colorMezcla dos colores y obtén el resultado intermedio listo para copiar.
- Degradados CSSCrea degradados CSS lineales, radiales o cónicos con vista previa en vivo.
- Paletas de coloresExplora paletas listas para usar y guarda tus favoritas en este dispositivo.
- Nombres de colorConsulta los colores con nombre HTML/CSS y copia Hex, RGB y HSL al instante.
- Colores TailwindExplora las tablas de colores de Tailwind CSS y Material Design.
- Colores UIPrueba familias de color Tailwind en componentes UI reales.
- Contraste WCAGComprueba el contraste WCAG entre texto y fondo para una UI más accesible.
- DaltonismoSimula cómo se ven tus colores con distintos tipos de daltonismo.
- Hex ↔ RGBConvierte códigos Hex a RGB al momento para CSS, diseño y handoff.
Códigos de color por familia
El código de un tono representativo de cada color y cientos de paletas construidas a partir de él.
- Rojo#E63946rgb(230, 57, 70)Paletas en rojo →
- Naranja#F4A261rgb(244, 162, 97)Paletas en naranja →
- Marrón#8B5E3Crgb(139, 94, 60)Paletas en marrón →
- Amarillo#FFD166rgb(255, 209, 102)Paletas en amarillo →
- Verde#2A9D8Frgb(42, 157, 143)Paletas en verde →
- Turquesa#06D6A0rgb(6, 214, 160)Paletas en turquesa →
- Azul#118AB2rgb(17, 138, 178)Paletas en azul →
- Violeta#7209B7rgb(114, 9, 183)Paletas en violeta →
- Rosa#FFAFCCrgb(255, 175, 204)Paletas en rosa →
- Gris#6C757Drgb(108, 117, 125)Paletas en gris →
- Negro#000000rgb(0, 0, 0)Paletas en negro →
- Blanco#FFFFFFrgb(255, 255, 255)Paletas en blanco →
Preguntas frecuentes
Abre el selector de color, o escribe el color en el campo «Prueba un color» de esta página (por ejemplo #E4572E, rgb(228, 87, 46) o tomato), y verás su código HEX, RGB, HSL, OKLCH y CMYK. Si el color está en una foto, usa el selector de color de imagen.
Describen el mismo color. HEX usa seis dígitos hexadecimales (#E4572E) y RGB tres números de 0 a 255 (rgb(228, 87, 46)). Puedes convertir de uno a otro sin perder nada.
Parte de un color base y usa el círculo cromático para aplicar una armonía: análoga, complementaria, triádica… También puedes explorar paletas ya hechas o sacarla de una foto.
No. Todas las herramientas de Matizly funcionan directamente en tu navegador, sin registro.
No. Todo el procesamiento, incluido el análisis de imágenes, ocurre en tu navegador. No enviamos ni guardamos nada.
Sí. Desde el círculo cromático y el selector de color puedes exportar variables CSS de Tailwind y objetos de Figma, o simplemente copiar los códigos.
Sí. El verificador de contraste calcula el ratio WCAG entre dos colores y te dice si cumple AA y AAA.
Empieza a trabajar con color
Todas las herramientas son gratis y funcionan en tu navegador.