15 Replies Latest reply on Jul 11, 2013 6:00 AM by Jacob Bugge

    Easiest Way to Create Hex Color Swatch Chart for Web?

    jethrodesign Level 1

      Hi, we have a website concept in Illustrator CS3, with named swatches for all colors. I'm wondering if there is an easy or 'semi-automated' way to generate a chart of the swatches we are using, showing there hex values?

       

      I know I could draw out a bunch of boxes, fill them with the swatch colors, and manually look up and type in the hex values for each. But this would take a LONG time, as there are a number of color variations.

       

      - Any automated solution for this? Actions? Scripts? Plugins?

       

      THANKS!

        • 1. Re: Easiest Way to Create Hex Color Swatch Chart for Web?
          JETalmage Level 6

          This page describes an AI Javascript named JET_X_SwatchesLegend.jsx. It creaes a series of labeled squares at the bottom left of Artboard, each filled with one Swatch in the Swatches Palette.

           

          JET

          1 person found this helpful
          • 2. Re: Easiest Way to Create Hex Color Swatch Chart for Web?
            jethrodesign Level 1

            Wow, this is really close to what I was looking for, and generally works pretty well. Thanks!

             

            But of course, it displays the swatch names, which are the RGB values as you would expect. I need the HEX values to display (and/or be output by the script).

             

            - Know of any way to convert the RGB values that the swatches use and display to their HEX alternates?

             

            I know in Illustrator, the swatches don't give you the option to use a HEX value by default. You have to double-click on a color in the Color Palette to see a more complete dialog with the HEX value listed.

             

            So close...

             

            THANKS! This might be pretty helpful to web designers who use Illustrator for comps like us.

            • 3. Re: Easiest Way to Create Hex Color Swatch Chart for Web?
              jay fresno Level 1

              JET,

               

              Your script is very cool!

               

              On a related note, a script that would be extremely useful for my work (and probably others as well) is one that would create squares for all the colors, gradients, and patterns used on the artboard in an Illustrator file.

               

              As you know, Illustrator can create swatches for all colors in a file, but that only works for solid colors -- gradients and patterns show up as multiple solid swatches.

               

              If anyone knows of such a script that can grab solid, gradients and patterns from a file and create squares on the page (or put them into the Swatches panel), that would be great.

              • 4. Re: Easiest Way to Create Hex Color Swatch Chart for Web?
                JETalmage Level 6

                Have been playing around with this.

                 

                The same page now lists and describes an additional script which has been added to the .zip archive: JET_X_RenameRGBSwatchesToHex.jsx. It does what its name implies. Run it first to rename your Swatches; then run the JET_SwatchesLegend.jsx script:

                 

                 

                If you notice a slight color shift between the Swatch Palettes pictured above, it's due merely to the left one being a screenshot of the palette pasted into a non-color managed file. The swatch colors are not altered by the script; only their names are. You can check the conversions by selecting a swatch, doubleClicking the Fill icon in the main toolbar to invoke the system color picker, and comparing the hex value against the new Swatch name.

                 

                JET

                • 5. Re: Easiest Way to Create Hex Color Swatch Chart for Web?
                  jethrodesign Level 1

                  Wow, this looks really cool! Thanks.

                   

                  The only thing I noticed when trying it, though, is that it doesn't seem to convert global swatches, which all of ours always are (never understood why this isn't default or why one would want colors to NOT be global). If it could be tweaked to also convert global swatches, I think this would be a very cool resource for web developers (at least those who use Illustrator).

                   

                  Good work!

                  • 6. Re: Easiest Way to Create Hex Color Swatch Chart for Web?
                    JETalmage Level 6
                    ...never understood why this isn't default or why one would want colors to NOT be global...

                     

                    I quite agree. Have, in fact, argued that for years.

                     

                    It gets worse: Illustrator's Javascript model stupidly thinks Global swatches are Spot Color swatches. This alert is from a simple script which checks the Swatch's color property:

                     

                     

                     

                    Download the script again and try it now. Be aware there is a glitch or two which you may or may not encounter. If you run the script and get an error saying something to the effect that "name" can't be found do this: Dismiss the alert. DoubleClick one of the swatches as if you are going to edit it. Then just close the Edit Swatch dialog. The Hex names will probably then appear.

                     

                    I haven't yet found the cause of that. It doesn't always occur. I'm not yet confident it isn't a bug having to do with the Swatch Palette failing to update. (There are other manifestations of that problem in Illustrator.)

                     

                    JET

                    • 7. Re: Easiest Way to Create Hex Color Swatch Chart for Web?
                      jethrodesign Level 1

                      Wow, excellent! Does everything we could hope for I suppose. Now you just need to let all the Illustrator web designers know it's out there! Very helpful.

                       

                      Of course, Illustrator giving you the option of choosing hex values in the swatches palette itself would really be the way to go, but for now this is a good workaround. I'm wondering if Illustrator is trying not to compete too much with their much-forgotten step-brother Fireworks. But Fireworks has some serious limitations as well - ESPECIALLY in the only marginally useful thing it calls a 'color palette'. What value is that tiny dot of a color?????

                       

                      Thanks again!

                      • 8. Re: Easiest Way to Create Hex Color Swatch Chart for Web?
                        bdkennedy1

                        Anyone know where else I can download this?  That web site no longer exists.

                        • 9. Re: Easiest Way to Create Hex Color Swatch Chart for Web?
                          jethrodesign Level 1

                          Hi,

                          If it's helpful, I uploaded the file that I had downloaded a while back. I haven't used it in a while, so not sure of it's compatibility with newer versions of Illustrator, but it's worth a shot. It's one of a few scripts that are included.

                           

                          Hope this helps. Good luck!

                           

                          https://rapidshare.com/files/1864607883/JET_LabelScripts.zip

                          • 10. Re: Easiest Way to Create Hex Color Swatch Chart for Web?
                            Adam Wilbert Level 1

                            This is way old, but found it super useful, and it still works in Illustrator CC. Here's a current link to many of the JET scripts:

                             

                            [link redacted]

                             

                            There was a slight bug though, but I found a workaround:

                            Using the RenameRGBSwatchestoHEX.jsx also renamed the [Registration] swatch to 000000. Then when you run SwatchesLegend.jsx it throws an error that it cant find the [Registration] swatch. Since you can't normally rename the [Registration] swatch, there doesn't seem to be an easy way to revert just that one name, but if you reimport your newly renamed swatches into a new document, it should work.

                            • 11. Re: Easiest Way to Create Hex Color Swatch Chart for Web?
                              Jacob Bugge MVP & Adobe Community Professional

                              Adam,

                               

                              A helpful post is always welcome, but there is an issue here:

                               

                              I believe this is an unauthorized publishing of some of the scripts that James had made available a long time ago.

                               

                              They are no longer publicly available, so I think any link to access them should be removed, both here and on that website.

                               

                              I have avoided replying to your post so you may edit it.

                              • 12. Re: Easiest Way to Create Hex Color Swatch Chart for Web?
                                JETalmage Level 6

                                I think any link to access them should be removed, both here and on that website.

                                Correct. (And thank you, Jacob.)

                                 

                                No one has any business presuming to redistribute someone else's work without permission. Graphics people (of all people) should know better.

                                 

                                JET

                                • 13. Re: Easiest Way to Create Hex Color Swatch Chart for Web?
                                  Adam Wilbert Level 1

                                  Apologies all around. I removed the link earlier, but the source site is not mine. James, I appreciate your generous contribution of time and talent and in no way intended to infringe on your rights.

                                  • 14. Re: Easiest Way to Create Hex Color Swatch Chart for Web?
                                    JETalmage Level 6

                                    No problem, Adam.

                                     

                                    For the record, I have never granted anyone permission to even post a link to my content, much less blatently copy it and duplicate it to add value to their own self-serving so-called "tutorial" sites. Professionals have the common courtesy to ask, but far more others evidently think anything accessible anywhere on the web is automatically their "property." As a result, I am far less inclined to share such things in this forum than I once was.

                                     

                                    JET

                                    • 15. Re: Easiest Way to Create Hex Color Swatch Chart for Web?
                                      Jacob Bugge MVP & Adobe Community Professional

                                      James,

                                       

                                      The source is still here, under Illustrator-scripts. It seems to have been posted 6 months ago.

                                       

                                      https://github.com/nvkelso