El Selector de colors proporciona una eina de comptagotes amb precisió de píxel per seleccionar colors de qualsevol element d'una pàgina web: text, fons, imatges, degradats o qualsevol píxel visible. Obté el valor exacte del color simultàniament en els formats HEX, RGB i HSL, amb una previsualització de píxel magnificada per a una selecció precisa. Els colors seleccionats anteriorment es desen en una franja d'historial per a un accés ràpid.
Extreure valors de color exactes d'una pàgina web és una tasca habitual: per fer coincidir un color de marca, fer referència a un disseny o comprovar una tonalitat utilitzada en un lloc web de la competència. Les DevTools del navegador mostren els colors al panell Estils, però només per a elements amb propietats de color CSS explícites, no per a imatges, degradats o colors heretats. El comptagotes del Selector de colors funciona a nivell de píxel: llegeix el color real renderitzat de qualsevol píxel que hi hagi sota el cursor, independentment de com s'hagi generat aquest color. Fes clic en un cel blau en una imatge principal, en un punt mitjà d'un degradat o en una superposició semitransparent, i obtindràs el valor de color compost exacte. El cercle de previsualització magnificat mostra una vista ampliada dels píxels dels voltants perquè puguis seleccionar el píxel exacte que vulguis. Es mostren els tres formats de sortida (HEX, RGB, HSL) simultàniament: fes clic a qualsevol format per copiar-lo. Els teus darrers colors seleccionats es desen en una franja d'historial a la part inferior, de manera que puguis tornar fàcilment a un color seleccionat anteriorment.
Una previsualització circular magnificada mostra els píxels ampliats al voltant del cursor, amb punter de mira per a una selecció de píxels exacta. Selecciona colors de text, fons, imatges, degradats, SVGs o qualsevol píxel visible de la pàgina.
Cada color seleccionat es mostra en els tres formats alhora: HEX (#7c3aed), RGB (rgb(124, 58, 237)) i HSL (hsl(262, 83%, 58%)). Sense haver de canviar ni convertir: tots els formats estan disponibles immediatament.
Fes clic a qualsevol fila de format (HEX, RGB o HSL) per copiar aquest valor específic al teu porta-retalls a l'instant. Una breu animació de "Copiat!" confirma l'acció. Enganxa directament al teu CSS, a una eina de disseny o a una especificació de color.
Els colors seleccionats recentment es guarden en una franja d'historial visual que mostra mostres de color. Fes clic a qualsevol mostra per tornar a seleccionar aquest color i tornar a veure els seus valors. L'historial persisteix durant la sessió: selecciona colors de diverses pàgines.
El color seleccionat es mostra com una mostra gran sobre els valors de format, cosa que facilita la visualització i verificació del color. La mostra és prou gran com per mostrar tonalitats subtils que podrien semblar idèntiques en mides més petites.
Selecciona colors de qualsevol píxel visible: colors CSS, degradats CSS, imatges (PNG, JPG, SVG), elements canvas, fotogrames de vídeo, superposicions semitransparents (seleccionant el color compost) i fins i tot iframes. Si ho pots veure, ho pots seleccionar.
Selecciona el color de marca exacte del lloc web d'una empresa per assegurar-te que el teu disseny o contingut utilitzi la tonalitat correcta. Obté el valor HEX exacte en lloc de fer-ho a l'ull o cercant a les guies d'estil de la marca.
Selecciona colors directament de les imatges principals, fotos de productes o il·lustracions. Extreu un color dominant d'una foto per utilitzar-lo com a fons complementari al teu disseny.
Si l'especificació de disseny diu que el botó ha de ser #7c3aed, selecciona el color del botó implementat per verificar si coincideix. Detecta diferències de color subtils que són invisibles a simple vista.
Navega per llocs d'inspiració de disseny i selecciona els colors que et cridin l'atenció. La franja d'historial crea una paleta de colors que has anat seleccionant durant la sessió; utilitza-la com a punt de partida per al teu propi esquema de colors.
Selecciona colors en diferents punts al llarg d'un degradat CSS per veure el color exacte en cada posició. Útil per replicar degradats o entendre com es barregen els punts d'aturada del degradat.
Obre el tauler flotant de DevSuite Pro i fes clic a la icona del Selector de colors. El cursor es converteix en un comptagotes amb un cercle de previsualització magnificat.
Mou el cursor per sobre de la pàgina. La previsualització magnificada mostra una vista ampliada dels píxels al voltant del cursor, amb un reticle que indica el píxel objectiu exacte.
Fes clic a qualsevol lloc de la pàgina per seleccionar el color d'aquell píxel. La mostra de color i els valors HEX, RGB i HSL s'actualitzen a l'instant.
Fes clic a la fila HEX, RGB o HSL per copiar el valor al porta-retalls. Apareixerà breument una confirmació de "Copiat!".
Continua fent clic per seleccionar més colors. Cada selecció s'afegeix a la franja d'historial. Fes clic a qualsevol mostra de l'historial per recordar aquell color.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 39 eines de desenvolupador per al teu navegador.
