19 Firefox Add-ons For Designers

Are you a web designer who wishes you could do more in one handy spot instead of having multiple programs open?  Well, thanks to the enormous Firefox add-on development community, your web browser can do almost everything for you.

We already covered Firefox add-ons for developers, but we couldn’t leave out the people that sit there and actually design what the developers have to build.  These 19 add-ons will allow you to choose colors, measure dimensions, save screenshots and a whole lot more.  Be warned that you should be selective in what add-ons you add to your browser due to the fact that the more you add, the slower it goes, but can you really resist very many of these?

Color Tools

ColorSuckr: ColorSuckr will pick the 12 most common colors out of an image and allow you to build a palette out of them.

ColorZilla: ColorZilla allows you to get a color reading from any point in your browser (not just the page), and you can adjust the color and paste it into other programs.  Besides identifying colors, this add-on will also allow you to measure the distance between any two points, choose colors from pre-defined sets, get information on DOM elements and more.

FirePalette: FirePalette adds a color selection tool to Firebug’s CSS panel so you can easily pick CSS-compatible colors.

Palette Grabber: Palette Grabber allows you to make a color palette from any page you visit and then export it to Photoshop, Flash, PaintShop Pro, GIMP, Adobe Fireworks and Mac OS X Color Picker palette formats.

Measurement Tools

GridFox: You can draw a grid on top of any page and measure the column widths and other items.

MeasureIt: A quick and easy way to draw a ruler around a page element to see how big it is in pixels.

Pixel Perfect: Pixel Perfect allows designers to overlay their composition on top of the developer’s progress to see how far off elements are and what adjustments need to be made.

Miscellaneous Tools

Firebug: Firebug is generally associated with developers, but the layout and CSS inspectors can be quite handy.

Font Finder: This add-on will allow you to highlight any element in a page and see the CSS information for it. It’s especially handy if you want to identify a font.

View Dependencies: View Dependencies adds a tab to the “page info” so you can see a break down of all of the files associated with the page you just loaded along with their sizes. This can be a handy tool for determining what may be slowing down the load time.

Web Developer: Despite the name, Web Developer has many useful features for designers such as inspect, edit and disable CSS, as well as graphics.  You can also use it to measure elements, re-size the browser, display CSS by media type and more.

Window Resizer:  Allows you to quickly view a page at different screen resolutions.  With just a click you can switch between 640×480, 800×600, 1024×768, 1280×800, 1280×1024 and 1600×1200.

Screenshot Tools

Abduction!: Abduction! allows you to save a portion of a page or save the entire page so you can show potential bugs to other people.  You can also print or copy any images you saved.

FireShot: FireShot gives you numerous options for how to shoot your desired images of a partial or full page, which you can then email, save or upload to a free host.

Image Zoom: Choose the size you want to re-size an image to or reset auto scroll so you can use the scroll wheel on your mouse to zoom in and out on an image to check quality.

Picnik: This add-on will allow you to save an image of the page you are on and send it directly to the online image editor, Picnik.

Pixlr: You can edit and open images or screengrabs you’ve taken directly in the Pixlr online image editor.

Screengrab: You can grab the entire scrollable document, just the visible bit, or a draggable selection. Screengrab will even save just the contents of an individual frame as well as taking images of Flash and JavaScript elements.

Talon: Talon is an add-on by the popular Aviary.com that allows you to take screenshots that can be saved to your system, opened directly in the online Phoenix image editor, hosted on their site or copied it to the clipboard.

76 Comments to “19 Firefox Add-ons For Designers”

  • white man October 10, 2013 at 10:04 am

    I need to create color palettes for a filming project. One character (and her accompanying scenes) should make you feel at home, comfortable, and friendly. The other character (and her scenes) should feel a bit off, making the viewer feel uneasy. What sorts of colors make you feel happy, and which colors make you feel uneasy?

  • Miguel M October 11, 2013 at 1:28 am

    when i do still lifes or work from photgraphs, i just look at the color i see and try to replicate it. most my paintings end up turning out very nice. why is it essential to work with a color palette and understand color theory?

  • Krazy Bob October 13, 2013 at 6:26 am

    i’ve got an eyeshadow color palette that has 88 different colors (whoa, right?!) and i was looking for some different ways to wear it. maybe with a couple different colors blended together? youtube videos or pictures would be appreciated(:

    thank you!

  • Scott Bull October 13, 2013 at 9:18 pm

    I recently had my bedroom redone and I have navy blue carpet and curtains with parlor gold walls. I wanted to know what other colors would harmonize well with my color palette. I would greatly appreciate any suggestions.

  • everydayGuitarist October 14, 2013 at 9:24 am

    I don’t know what I did but my colour palette has now gone from all the colours to greys, white and black and I don’t know how to get it back to the way it was before. Every time I choose a new colour, it just gives me a grey. Anyone have any ideas on how to change it back?

  • sick_mick_101 October 14, 2013 at 11:00 am

    How do I change the color of the goalie mask for a custom created goalie? It offers several mask styles but no color palette afterwards, like when you create a jersey or anything else. I also can’t change the color of the goalie helmet for my custom teams goalie, the option is only available for skaters. What’s going on?

  • BRUTE October 19, 2013 at 9:41 am

    What’s a color palette, what is it used for and how do I make one?

  • lildevilgurl152004 October 20, 2013 at 5:18 am

    Not much detail. Just, how do you make firefox add-ons?

  • mrankinmatt October 20, 2013 at 7:14 am

    Im trying to wire a Jensen cd player to my 98 plymouth voyager but I have seemed to miss place the color palette that tells me which wires go to what I don’t know where on the internet to look and typing all this in google isn’t seeming to help… so someone with the know how PLEASE HELP!
    its a jensen cd-510k

  • Jack Bauer October 23, 2013 at 9:18 pm

    I am very light skinned. I have freckles on my arms and on my cheeks and nose. I have hazel eyes that tend to change from a light green with a tint of gold and a light brown. I have light brunette hair even though I was born with natural blond hair. What color palette am I?

  • nick s October 24, 2013 at 4:20 am

    I do love the atmosphere of Starbucks and other local coffee shops with the rich colors they use. I would love to create this feeling in my kitchen. Does anybody know where I could find a great color palette to follow? I have paint chip books with a zillion colors but I’d love something that is more tailored to this theme. Thanks for any help/suggestions! 🙂

  • evil chevy October 25, 2013 at 3:44 am

    does anyone know how to work out your colour palette (colours that look good on you) or a website that can work it out thanks!

  • Stevalicious October 25, 2013 at 4:47 pm

    I’m moving into an apartment with 3 other people and we’re trying to decide on a color palette to use for the living areas. Our furniture comes with the apartment and its dark chocolate brown, almost black. I’m also bringing in smaller furniture that’s in a mid range royal blue color. We’re trying to find colors that will match nicely with those pieces.

  • Thomas Lopez October 28, 2013 at 11:42 pm

    Like every time I click on the pen tool, the color palette thing ALWAYS pops up. How do I make this stop? Because it gets very annoying.

  • JOHN KAISER PHD October 30, 2013 at 8:37 am

    The two main colors are chocolate brown and sage green with accents of champagne and blush pink.

    It’s a late summer/early fall wedding. What type of flowers would go best with this color palette?

  • Praveen November 1, 2013 at 10:04 pm

    I have dark cherry wood furniture and sparkly gold bedding. My walls are that ugly off-yellow color that most new homes come with. What would be a good color palette to decorate and paint my room with? Can’t stand looking at it.

  • clntvrrt November 1, 2013 at 10:04 pm

    Bit of a useless question, but I’ve always been curious as to the reasoning behind printing the color palette of an item on packaged foods, like milk cartons, etc. Why do companies do that?

  • janki soni November 3, 2013 at 7:45 am

    In the Hindu color palette, why is the color white associated with creation and unity

    White embodies the snow-capped Himalaya Mountains, which the Hindu revered as a symbol of strength and protection.

    White holds the potential for all colors, and thus, symbolizes the potential for all things.

    Brahma, the Creator, blossomed from a white lotus which grew out of Visnu’s navel.

    White symbolizes blankness and the empty canvas, ready to be filled.

  • callofduty5123412 November 4, 2013 at 6:00 am

    You know sites have in their content section “color palettes”
    its just like three different colors but whats the point of putting them up to myspace? Where do you use them?

  • everydayGuitarist November 4, 2013 at 11:54 am

    I just re-installed GIMP and the only modules there are the layers one and the brushes one. I can’t seem to figure out how to make the color palette thing appear. Does anyone know?

  • Melanie November 5, 2013 at 3:36 pm

    1. Champagne
    2. Latte
    3. Cappuccino
    4. Taupe

    I need to know it because I’m trying to make a wedding color palette. I know the color I want but I just don’t know what name is the right one.

  • Le Pwner November 19, 2013 at 10:56 am

    I bought Adobe CS4 yesterday and just installed Adobe Illustrator CS4 onto my mac and moved it from the finder to the desktop. When I opened the Illustrator, the toolbar and color palette were missing and were not available underneath the tab “Window”. Why and what can I do to get the toolbar and color palette back?

  • Roar me R November 24, 2013 at 4:17 am

    I just got the NYX Butt Naked Eyes Palette. I’m super excited. I really love smokey eyes, day and night, and want to know how to do my makeup. I see a lot of girls with their darker shadow kind of winging out, sort of like these if you can see them very well. One has a darker color palette it looks and the second girl seems to do more gray colors. How would I do these style of shadow with this palette, try to explain which colors I use as an example maybe? That’s mainly what I need. Or tell me the name of the look so I can look up tutorials.


    Girl 1. http://i6.photobucket.com/albums/y225/crazycassie/stuff/aa04c151-914a-4fb5-9bcc-86e75be3b45d.jpg

    Girl 2: http://i6.photobucket.com/albums/y225/crazycassie/stuff/478e4456-7f57-4e76-af4f-7fe520c6b546.jpg

  • Cliffy N November 26, 2013 at 4:28 pm

    I share our computer so it has several different user accounts and I am the only one that uses firefox so I want to be able to have all of my add-ons, bookmarks, etc. exactly the same on all accounts. Is there some kind of auto sync thing I can use?

  • ademuth93 November 28, 2013 at 10:56 pm

    Trying to see if there’s any add-ons for the Firefox browser that will enable video gameplay. I’ve tried installing and reinstalling a variety of different browsers; tried installing, removing, and then reinstalling Adobe Flash adobe player about 5 times with each browser then trying to play videos on the web including YouTube and nothing has worked. If any help possible, appreciated much, thanks.

  • Moore, Ron November 29, 2013 at 7:42 am

    I want to browse the internet using firefox instead of IE, What add-ons should I choose if any, How do I get started browsing the internet through firefox? sorry but I am new to firefox any info would be appreciated, Had too many problems with IE…Thanks so much.