WebColorPicker User Manual
Contents
1. S BEEBE ge Bed Pg 3 Color Cube The color cube is a web designers version of the continuous color wheel It is a cube visualization of the discrete 256x256x256 color space use for html CSS and various programming languages The number of colors shown is adjustable from a ring size of 8 colors up to a ring size of 16 colors As described with the other two views full bi directional support to and from text editors or graphic design applications is supported Applications Color Pickers are used to select colors for graphic and text objects in OS X Normally they are used in a direct fashion the target object is selected a color well is enabled and a color indicated on the color picker Then this color is communicated to the primary application and the the target object assumes the defined color In some instances the color picker is used as detailed inspector but normally inspection consists of a simple visualization of the color in the primary color swatch WebColorPicker may be used in this same manner the user interface is fully consistent with the functionality and use of color picker plugins on OS X WebColorPicker provides added capability in the inspection and application of colors defined in the precise numerical coded fashion used to specify colors in HTML and Cascading Style Sheet CSS source text documents The added alpha numeric input fields found on the WebColorPic2. A Code Snippet is used to automatically create a line of software code that can be used as a color specification or instantiation statement in a particular programming language If this is not making any sense to the reader just skip the section as this capability likely does not apply If on the other hand you make a living writing software you probably have already figured it out and can skip this section as well For completeness we shall continue The Code popup menu accessed by clicking Settings determines the format of the Code Snippet There are selections for different programming languages and different forms for each language Inspection is the best way to determine the meanings of each selection changes are reflected immediately in the Code Snippet text box Formats for code snippets may be modified or new ones added using a text editor or the OS X utility application Property List Editor Each entry in the Code popup menu is defined by a dictionary with three strings located in the WebColorPicker Settings file found in the Applications Pg 12 Ves sim sg 800000 RGB 128 0 0 0 OI NSColor colorWwithCalibratedRed 0 50196 green 0 00000 blue 0 00000 alpha 1 00000 C55 Keyword He EE marcon KA Ki SS Opacity 100 d wl eil O 4 E a E H Ch 03 Color Panel Support folder Library Application Support WebColorPicker Settings plist See chapter 06 for detailed specifi
3. User Manual Version 1 0 Documentation for WebColorPicker WebColorPicker for Mac OS X OS X color picker plugin for HTML CSS and other programming languages with hexadecimal support Dekorra Optics LLC Creators of EazyDraw for Mac This manual designed and created with EazyDraw Dekorra Optics LLC N5040 Beach Garden Road Poynette Wisconsin U S 53955 Phone 1 608 444 5245 Fax 1 608 635 2124 Web http www eazydraw com 2008 EazyDraw a Dekorra Optics LLC enterprise All rights reserved EazyDraw is a trademark of Dekorra Optics LLC registered in the U S Mac and Mac logo are trademarks of Apple COmputer Inc registered in the U S and other countries Dekorra Optics LLC is an authorized licensee of Mac and the Mac Logo PLEASE READ THIS LICENSE CAREFULLY BEFORE USING THIS SOFTWARE BY CLICKING THE ACCEPT BUTTON OR BY USING THIS SOFTWARE YOU AGREE TO BECOME BOUND BY THE TERMS OF THIS LICENSE IF YOU DO NOT AGREE TO THE TERMS OF THIS LICENSE CLICK THE DECLINE BUTTON DO NOT USE THIS SOFTWARE AND REMOVE FROM ALL OF YOUR COMPUTERS IF YOU LICENSED THIS SOFTWARE UNDER A VOLUME LICENSE AGREEMENT THEN THE TERMS OF SUCH AGREEMENT WILL SUPERSEDE THESE TERMS AND THESE TERMS DO NOT CONSTITUTE THE GRANTING OF AN ADDITIONAL LICENSE TO THE SOFTWARE The enclosed computer program s Software is licensed not sold to you by Dekorra Optics LLC referred to as DEKORRA for use only under the terms
4. Color Pickers folder then launching a hosting application that presents the system color panel Pg 8 Ch 02 Installing WebColorPicker Chapter Color Panel ACCESSING Web olorbcker ee 9 FIOSUAD DI CAUION ME 9 WebColorPicker Icon ee 9 Fixed Panel Elements ooo cccccccscccsssccssecssessssescsescssesssuccssucsseecssecssesessecesss 9 Hex Code Text BOX neice anus 10 Decimal Code BOX neusen 11 Hex Color Components se 11 Code Snippet Field oo ccccccccsssesccsssscsssescsseesessetsessesees 11 Color LISTS sirrin 12 de 13 Drag assener E E EE 13 SE 13 Help Burton 13 Accessing WebColorPicker WebColorPicker is a plugin for your main system color panel In order to access or use H WebColorPicker you need to open the system color panel from a hosting application Hopefully your application s technology base is new enough and provides support for the OS X color panel If an application s base technology was ported from OS 9 or another operating system it might not integrate with the OS X color technology and you may need to use another application to host the color panel Host Application Text Edit is always available to act as a host It is based on the latest OS X technology With Text Edit the color panel is opened from the Format main menu Font submenu Show Colors command EazyDraw is another modern cocoa app which supports the OS X system color panel With EazyDraw open the color panel by clicking on any color well there is
5. Resetting Preferences neue 6 ee eg DEE 6 PUGLEY te Te EEN H UMS CAI ee E hs oe essai crete TE torino 7 Upgrading WebColorPicker ooo cccsescssseeccssesesssecscssssscsssesessnseessseses 8 Chapter 03 Color Panel ACCESSING WEDGCOIOFPICK ED ege EA 9 HOSE FAD CANON essences st ise ees ea anne nec nice adele 9 WebColorPicker COM NEEN 9 Fixed Panel Elements EE 9 HEX Code TEX CBO EE 10 Decimal GOOG BOX E 11 Hex Color Componentz cccccsccssseesssssssscsssetecssseeees 11 GOGE SMIDPEEFIEIO WEE 11 Color EE 12 de e 13 a ie en a 13 EE OO ee 13 Help Button EEN 13 Chapter 04 Color Selection View EE GEIER 15 DEE Eeer 15 Palette Color Lists EE 16 Web Color Palettes ooooiicccccccccccccssccssecssessessessesseesseesseesseen 16 Color Names ooo ccccsecscsssecsssssssssssssesscsssesscessssscesssesesssnessessners 17 Close reiege 17 COF E13 EE 17 Number of Kings et 17 Chapter 05 Color Wells COF EE 18 Active Color Well 18 Color Panel Toolbar s 19 le e Ae Oe EE 19 Color SPACES srogi aa A A 19 Color Swatches 20 DT Chapter 06 Settings File Se ULC soe iat hasta a at isaac eal aa atlanta eed 21 AE e On EEN 21 Create olort ste 22 CodeSnippets tee Aubart 22 Key INQMESMID DOU EE 22 Key FormatSnippet ooo icecssscsssesssesssssessseesseees 22 Key VarsSnippet 22 Cece cece cece cre rncccccccccccc eens eeeeeeeeesecccee esses eessssseeccceeeele Chapter Welcome To WebColorPicker Getting Started What is WebColorPicker Capabilities
6. 0 06275 alpha 1 00000 Color Panel Ch 03 Pg 13 Settings The Settings button replaces the color selection view with a small panel that manages a few preferences settings used by WebColorPicker The parameters are rather limited in keeping with the focused scope of WebColorPicker Selections here are automatically persistent They will apply for all color panels that use WebColorPicker and they will apply when applications are closed and restarted at a later time The values are saved in a Settings file in the Applications Support folder Library Applications Support WebColorPicker Settings plist see Chapter 6 for details The top check box identified by a pound sign is used to include a pound sign in the main Hex Code Box text When checked the pound sign is included This pound sign character is a key in HTML coding that signifies a hexadecimal number It is a user preference to include this in the text provided by WebColorPicker WebColorPicker can work with upper case or lower case hex alpha letters a b c d e f or A B C D E F The popup menu next to the pound sign checkbox controls this choice The Code Snippet and Code Popup menu were discussed above they control the presentation of a Code Snippet or the individual RGB hex codes below the color selection view Comp ent The Comp parameter determines what is shown in the text numeric field s just below the color selection view The possible values are Hex Int
7. Hex Slider View Palette View Color Cube Applications Getting Started Thank you for selecting WebColorPicker a color picker plugin designed especially for web designers and software developers using Mac OS X If you have used an earlier version of WebColorPicker we recommend that you read the README file provided with your downloaded disk image This documentation will highlight recent developments or contemporary installation instructions This printed manual is designed for assisting those new to WebColorPicker or the use of hexadecimal color specifications in HTML and CSS documents and those in need of detailed reference information What Is WebColorPicker WebColorPicker is a plugin addition for the Mac OS X operating system Once installed it is accessed from the main OS X color selection panel usually recognized on OS X by the colorful color wheel it is available for integrated use with any OS X application that uses the system wide color selection panel At the time of this writing circa Leopard Apple provides 5 color pickers the color wheel and 4 others The Apple standard color selection mechanisms are not particularly appropriate for those doing web design with HTML or Cascading Style Sheets CSS Software developers often need to programatically specify colors using declarative statements WebColorPicker provides several features to enhance the color selection specification and inspection process for these situation
8. by other applications and color interface elements available on the installed system These are installed in the Colors folder of the user s home Library folder Library Colors The color lists are created initiated and written to this folder at first launch of WebColorPicker Settings Ch Op Pg 21 They are re created if they are removed and WebColorPicker quits and is re started Since this is a public system folder there may be a rare instance where these color tables are not desired To turn off this behavior set the CreateColorLists string to NO This disabling option is only available by direct manipulation of the Settings plist file as described here there is no element for this in the user interface CodeSnippets This element is an array of dictionaries These are an available resource element that can allow an experienced user to add or modify the format of Code Snippets that are managed by WebColorPicker The description of the use of Code Snippets above should be read and understood before reading the following documentation Note that Code Snippets need to be enabled at least once in the WebColorPicker user interface to trigger creation of the CodeSnippets dictionary The dictionary should be created before additions are made this will provide a precise template to follow in the formatting of additions to the dictionary Each Code Snippet format has a dictionary entry of three elements each with a defined key To add a
9. colors In this situation WebColorPicker shows the actual color and the hex code closest to that color Normally you will not be able to distinguish the slight difference in shade between the actual exact hex color and the more precisely defined color But what happens to the two distinct colors in subsequent processing is difficult to predict So WebColorPicker indicates this small difference by showing the value of the corresponding hex pair in red The tool tip the pop up yellow note that appears when the mouse is hovered over a text field will indicate the Hex pair s decimal value and show the residual remainder if the hex pair does not exactly match the selected color Code Snippet Field D Colors o mmm 898000 RGB 128 128 0 128 0 Faa o SS a 5 Sliders Gierka oh belated Stl we Se TINSCol of Seu Wit KC ibr atedRed D 50196 green 0 50196 blue 0 00000 alpha 1 00000 C55 Keyword ERR olive HH The Hex Colors fields may be replaced with a Code Snippet field The change is made by clicking Settings and checking the Code Snippet checkbox The panel to the right shows Settings Settings Opacity e 100 BR GSRRRRSRRRRR GO ab Colors CH selecting the Code Snippet mode It is a two step process the check box will cause Hex Codes to be replaced with Code Snippet Then the actual format for the code snippet is selected from the popup menu named Code
10. input When a new hex code is entered WebColorPicker will select the corresponding color and display it in some fashion in the color viewing area And the entered color is sent to the hosting application Note a color that is entered either by clicking on a color or entering a hex code is not actually placed in the Main Color Swatch at least not by the WebColorPicker The color is sent to the hosting application the main intent of your actions are to apply a color to something in the hosting application Then the hosting application will place a color in the Main Color Swatch Note that the hosting application may actually send back a different color there is no guarantee that it will accept the color selected without modification Having explained these operating details in most cases the operation is straight forward and a selected color is simply applied to the target object in the hosting application and ends up in the Main Color Swatch with the expected corresponding hex code shown in the Hex Code Box Entry errors for hex code values are handled intelligently while complying with the strict 6 hex digit format Missing values are not set to zero they are in general expanded by duplication of least significant digits For example a 3 hex digit short cut entry is allowed the 3 values entered are expanded to 6 by duplication For example enter 369 and the value is expanded to 336699 If there is no logical expansion for an otherwise erroneo
11. not relate specifically to WebColorPicker If you are experienced with inspection and specification of colors on OS X there will be no need to study this chapter The OS X system color panel which has been the topic of this manual is often used in conjunction with a color well see the figure on the next page to change and inspect a color attribute This chapter will discuss general behavior that a user can expect when using color wells on OS X We will use EazyDraw as an example host application but the actions described are common to several modern OS X applications that follow Apple s guidelines for color selection A single host application may have more than one color well Typically a single application will have several color wells For example one color well may select text color and another will specify document background color All of these color wells will abide with the same general principles A single color panel is used for all color changes and selections In summary the organization is a host application with several color wells working with one color panel that has a specific color picker in use All color wells and perhaps other attributes such as text font color may be used with the single color panel The panel shows the current color in the Main Color Swatch at the top of the panel use this visual clue to confirm the object of actions for the color panel Active Color Well For the palette shown below the Fill color
12. noticeable in any situation When a color is set from an action in WebColorPicker the color sent to the host application will always be an RGB color or RGBA color in the case of code snippet transfer If the host application s target attribute does not accept RGB colors results may become confusing and ill defined Color Swatches The small boxes at the bottom of the Color Picker panel are color receptacles or swatches You may drag and drop to and from these swatches They are convenient places to hold a set of colors being used in a drawing If you enlarge the width of the color panel more swatches are provided There is a small slider button that is used to enlarge or hide these color swatches Color swatches are saved in a normal color list clr file in the Colors folder The storage of these color lists was discussed in chapter 02 gee Ch 06 Settings Chapter Settings File al e 20 DISE Eu ne ZU IR e CN 20 CodeSnippets EE 21 Key Nameinpper ccccccsescsscsssscsseesssscssecssueceseeestees 21 Key FOrMatSnippet ooo cscssecsssscsseessesesseessesesnesseen 21 Key VarsSnippet telen 21 Settings File This chapter provides detailed description of the contents of the Settings property list dictionary for WebColorPicker The information in this chapter is not required for normal use of the WebColorPicker This would only be of interest for users needing to make advanced configuration changes for WebColorPicker The Settings
13. of colors available when working with Red Green Blue hex codes The 3 buttons to the right and immediately above the color selection view are used to switch between these three visualization modes Sliders Palette and Cube Hex Sliders The Hex Sliders provide basic inspection visualization and input of hex color codes There are 3 pairs of colored sliders one each for Red Green and Blue component values organized in order from left to right The left slider of each pair corresponds to the high order hex digit of the individual hex digit pair and the right slider corresponds to the least significant hex digit of the pair The actual hex digits are shown directly below the view when the Code Snippet mode is not in use see above for details on this topic Each hex slider has 16 discrete steps laid out vertically mapping to the 16 possible values for a hex digit Click on a slider to set the corresponding hex digit toa desired value Values may be specified by clicking on a slider or entering a hex code in the text fields found beneath each slider pair Color Selection View Ch 04 Color Selection View D CH del Colors O ki mel Rm o RE BB5D91 RGB 187 93 145 93 145 Sliders Palette Cube Cube a EE Se I ii CSS Keyword b No Match b Settings 7 Opacity BB 1 nf 1 100 E SEE EERE EI cl Pg 15 The cursor is live when move
14. of this License and DEKORRA reserves any rights not expressly granted to you Dekorra Optics LLC is a Wisconsin Limited Liability Corporation located at N5040 Beach Garden Rd Poynette WI 58955 You own the media on which the Software is recorded or fixed but DEKORRA and its licensers retain ownership of the Software itself This software may not be distributed by any third party without express consent of DEKORRA Unrelated parties may not distribute security or license enabling codes or instructions these may only be issued by DEKORRA 1 License This License allows you to a Use one copy of the Software on a single computer at a time To use the Software means that the Software is either loaded in the temporary memory i e RAM of a computer and or installed on the permanent memory of a computer i e hard disk etc b Make one copy of the Software in machine readable form solely for backup purposes Additionally the primary user of the computer on which the Software is installed may make a second copy for his or her exclusive use on either a home or portable computer As an express condition of this License you must reproduce on each copy any copyright notice or other proprietary notice that is on the original copy supplied by DEKORRA f With a Full Use License you may use the Software in conjunction with the Mac OS X system color selection panel in this mode you may use the Software with any other application operable on the
15. one on the Color and Style panel accessed from the top of the Tools main menu If your application does not directly support the system color panel you should still be able to drag and drop or copy and paste to your application s documents or drawings using WebColorPicker with one of these applications acting as an intermediate host WebColorPicker Icon WebColorPicker will be only one of the color pickers found on your system color panel WebColorPicker has a specific job to do it is not intended to be a complete color selection solution Each color panel is accessed by clicking on the corresponding icon in the System Color Panel s mini toolbar found at the top of the panel WebColorPicker s icon is Pg 9 Main Color Swatch Hex Code Box Tse pw tH J gem Decimal Code Box A ROB RGB 126 128 0 Sliders Palette Cube Colors View Hex Colors Ma 80 WT op Ces Keyword GB olive EZ Color Table r ETS Color Name KN Settings V shown and circled on color panel image above Click the WebColorPicker icon to explore the three views used for managing color codes with WebColorPicker Fixed Panel Elements There are three forms for the main Color Views area Immediately above and below this area are other elements of the WebColorPicker which are common for all three color viewing modes Refer to the figure above to associate names with user interface elements Hex Code Text Box A Hex Col
16. possible to drag a color as a color from the main color panel color swatch at the top of the panel it is not so interesting to also drag a color from the Color View When working on coding projects it is useful to drag a text color code from the color selection view to a text window where one is writing or editing source code Set the Drag selection to one of the code settings for this mode of operation Then the color panel will provide both useful forms of the drag operation Drag a color as a color from the top color swatch and drag a color as a code from the WebColorPicker color selection view Resize The Color Panel is a re sizable panel So it is possible that all the settings may not be visible if the panel is adjusted to a smaller format Rather than simply making the panel larger which can be annoying WebColorPicker omits the bottom most parameters and shows a red arrow indicator to signify that some parameters are not available for the current view size Resize the window if access is needed to one of these hidden parameters Help Button The small Question Mark button will bring up this manual Click it to access operation instructions for WebColorPicker Pg 14 Chapter Color Selection Hex Sliders Palette Color Lists Web Color Palettes Color Names Color Selection View WebColorPicker provides 3 views for inspecting and selecting colors Each provides a different viewing format for visualizing the finite set
17. projects will not require strict use of these standard colors Indeed their use is more a historical note at this time as modern web browsers and operating systems do not require limiting colors to a small defined set of acceptable colors But the color names used in a color list can be helpful and WebColorPicker provides autocompletion that keys off color names present in a color list The clr files created by WebColorPicker are available as OS X standard colors to any OS X application that uses the system color picker palette technology You will see these color lists and their colors with any color panel plugin that works with color lists Note normally one uses the color wheel for picking colors There is an Apple provided color picker for managing the color list mode There you will see the color lists created by WebColorPicker All standards are followed carefully for creating these publicly available clr files Problems can arise if other applications are not fully up to date with the standards In particular some older applications do not support transparency and problems can arise but these are rare now that OS X and most available applications have matured to support the modern standards including the support of transparency Check the documentation and support resources for the other application if problems arises Pg 6 Ch 02 Installing WebColorPicker Plugin Bundle The WebColorPicker bundle is represented in the Mac OS X finder wi
18. 3 through 16 green in bits 15 through 8 blue in bits 7 through 0 rgbaPackediInt The argument is a single integer of 32 bits containing red green blue and alpha channel information The rgb values on a scale of 0 to 255 are packed into the least significant 6 hex digits Red component stored in bits 23 through 16 green in bits 15 through 8 blue in bits 7 through O The Alpha channel value is stored in bits 31 through 24 Values are naturally unsigned This is the format used in the Java language Color function call Pg 23
19. E temporary right below the entry on the color selection view The a names are provided there as clues for continued typing Settings A If a complete color name one that matches a name in the Opacity ee selected color list is entered the RGB field is completed with the gt 100 corresponding RGB decimal code in CSS format The color is accepted by typing return Color Panel Ch 03 Pg 11 Hex Color Components Below the color inspection view there are 3 hex fields each providing inspection and input for a pair of hex digits They inspect and define the Red Green and Blue components in order from left to right Each field will accept hex values Error handling is as described above with single digit entry expanded by duplication This means that to enter a value such as FF it is sufficient to enter only F Explicit errors are flagged with a flash message and the previous entry is maintained The Hex Colors fields will indicate in Red when the color presenting in the Main Color Swatch has round off residuals for the associated color component The details provided above can explain how this can happen Keep in mind that there are many ways to specify a color and the number of possible colors is greater than the number of colors that the 3 pairs of hex digits can represent For example if you click on the Color Panel s Color Wheel the point clicked is not likely to match with one of the specific hex
20. EE H Upgrading Web olorbcker cccescssscssuecsseessseescsssecsseeesseeseseecs 8 Drag and Drop Install If you are familiar with the phrase drag and drop install and the OS X operating system the paragraph below will be all that is needed of this chapter If you are less experienced then the details will probably be interesting learning and will prove relevant for better understanding of your computer and the installation of plugins in the future Color Panel Plugin WebColorPicker is provided as a Bundle Plugin for the OS X system wide color panel Place the WebColorPicker bundle in the Color Pickers folder in either the System Library location Library ColorPickers or a specific local user library Library ColorPickers Apple does not want the third party plugin placed in their Color Pickers folder System Library ColorPickers but we have seen no problems in operating in this manner For an application to access the color picker you must quit and re start the application after placement of the WebColorPicker bundle There is no need to re boot the system only a quit and restart is needed To remove the bundle all applications using the color picker plugin must quit Entering License WebColorPicker is a share ware application It is not required to pay and obtain a license in order to use the plugin An unlicensed copy of WebColorPicker is not hindered or limited in any fashion all features and capabilities are available in
21. Mac OS X operating system A Full Use License may only be granted explicitly by DEKORRA with the issuance of a valid Security Code The Security Code may be used to enable Full Use License capability for only a single copy as defined by this license of the Software The Security Code may not be shared with or communicated to other individuals or corporations 2 Restrictions a The Software contains trade secrets and to protect them you may not REVERSE ENGINEER DECOMPILE DISASSEMBLE OR OTHERWISE REDUCE THE SOFTWARE TO ANY HUMAN PERCEIVABLE FORM EXCEPT AS PERMITTED UNDER APPLICABLE LAW YOU MAY NOT MODIFY ADAPT TRANSLATE RENT LEASE LOAN OR CREATE DERIVATIVE WORKS BASED UPON THE SOFTWARE OR ANY PART THEREOF b THE SOFTWARE IS NOT INTENDED FOR USE IN THE OPERATION OF NUCLEAR FACILITIES AIRCRAFT NAVIGATION AIR TRAFFIC CONTROL OR OTHER ENVIRONMENTS IN WHICH THE FAILURE OF THE SOFTWARE COULD LEAD TO DEATH PERSONAL INJURY OR SEVERE PHYSICAL OR ENVIRONMENTAL DAMAGE c YOU MAY NOT TRANSFER OR ASSIGN YOUR RIGHTS UNDER THIS LICENSE TO ANOTHER PARTY WITHOUT DEKORRA S PRIOR WRITTEN CONSENT d Notwithstanding any other terms in this License you may not use the Software with a client or guest which substantially duplicates the capabilities of WebColorPicker or in the reasonable opinion of DEKORRA competes with WebColorPicker 3 Termination This License is effective until terminated This License will terminate immediately without noti
22. SS RGB Decimal text field for identification and autocompletion Typing the name of a color present in n the selected color list will set the selected color accordingly een re SVG Keyword d lightsalmon Close Matches E lightsalmon C aliceblue i i if H EE i atniquewhite The color selection view shows exact matches to specific color list colors el e with a black outlining rectangle Close matches are indicated with red SR BEREE aquamarine outlines This provides a method to select a palette specific color that is a mes close to to a color selected from the continuum C bisque Notice that there is a different meaning for the red close match indicating rectangles shown on the color view and the red text used in the hex colors values The red text means that the selected color does not match any hex code and the red indicating rectangles indicate that a selected color which may be an exact hex code does not match a color in the selected color list Color Cube The third color selection view is a color cube arrangement It is selected by clicking the Cube button just above and to the right of the color selection view CH Colors OQFFO RGB 255 0 The Color Cube is a variation on the Color Wheel It is rotated to provide red to the left green in the center and blue to the right in keeping with the rgb convention of web color codes The color cube is quantized to show only the colors corresponding to exac
23. cations Lem Wl Ei The Code Snippet will reflect the current color The text field is selectable so the line of code may be copied from the text box and pasted directly into source code LC Be It is more likely that you will want to drag a code snippet directly from the color view to the code This is enabled on the settings E AE AFF RGB 234 234 255 panel by specifying Code Snippet for the Drag selection This can ee ae be important if your text editor is accepting colored text If you Sliders Palette Cube copy and paste is possible that the host application will paste colored text into your code normally an undesirable situation When a code snippet is dragged from the color view ral D Upper Case EF Til Code Snippet WebColorPicker momentarily resets the color panel s color back to Codd Aae V black during the drag operation so the pasted code snippet will ObjC decimal not be inadvertently colored Drag ObjC hex Carbon hex a Carbon decimal Color Lists lava float lava float A Below the Hex Colors Code Snippet area are the Color List popup were paua int rT and associated Color Name popup menus These allow green ES ha 1 00000 WebColorPicker to work with OS X Color Lists Color lists are saved Fes Jos jet in the user library hierarchy in a folder named Colors Library C Wei Colors WebColorPicker installs three color lists that are useful ETa i DEN s ettings f f
24. ce from DEKORRA or judicial resolution if you fail to comply with any provision of this License Upon such termination you must destroy the Software all accompanying written materials and all copies thereof and Sections 5 6 and 7 will survive any termination or cancellation of this License 4 Export Law Assurances You may not use or otherwise export or reexport the Software except as authorized by United States law and the laws of the jurisdiction in which the Software was obtained In particular but without limitation the Software may not be exported or re exported i into or to a national or resident of any U S embargoed country or ii to anyone on the U S Treasury Department s list of Specially Designated Nations or the U S Department of Commerce s Table of Denial Orders By using the Software you represent and warrant that you are not located in under control of or a national or resident of any such country or on any such list 5 Limited Warranty DEKORRA warrants for a period of ninety 90 days from your date of purchase that i the media provided by DEKORRA if any on which the Software is recorded will be free from defects in materials and workmanship under normal use and ii the Software as provided by DEKORRA will substantially conform to WebColorPicker s published specifications for the Software DEKORRA s entire liability and your sole and exclusive remedy for any breach of the foregoing limited warranty will be at DEKORRA s
25. d over the color view area When the cursor is over a color the resulting hex code is shown in the live cursor field found just above on the right side of the color selection view The live values are only shown in the cursor read out box it takes a click on the view to set a color If a color is selected in the host application the corresponding hex values are shown in the hex numeric fields and the slider indicators are moved to the corresponding hex digit positions A Shift Click of a high order hex digit slider will move both sliders of the pair to the clicked position this in keeping with the HTML and CSS shorthand notation The sliders colors interact with any and all settings showing the range applicable to each hex digit Notice that the least significant digits of each pair provide a very slight range of color variation Palette Color Lists The Palette view shows a color swatch for each color of a Color List Color Lists are special OS X files that contain a palette of distinct colors each identified by a unique to the list name These files have the system file name extension cr The color list files are found in the special folder named Colors in the user Library file hierarchy Library Colors i j j RGB 51 153 204 The operating system uses color lists is to manage Patterns which Faso are special kinds of Colors used by the OS X graphics and imaging Sliders Palette Cube technology This means there a
26. eger Fraction and Code Snippet The default and most common selection will be the Hex value this displays each component as a two digit hexadecimal number over the range 0 to FF Integer selection will display each component as a decimal number over the range of 0 to 255 Zero means none of the designated color and 255 means full maximum saturation of the corresponding color component Fraction selection will display each component on a scale of 0 00 to 1 00 For example a value of 0 33 red would be a dark red corresponding to a Hex value of 55 Code Snippet will replace the 3 component numeric fields with one large text field to hold the full code snippet as defined by the selection of the Code popup menu selection Each of the fields display values as defined by the Comp selection and each field will accept input in define format So for example entering FF when in the integer mode is an error input Drag The Drag setting determines what form a Drag operation from WebColorPicker s color selection view will take The possibilities are Color Hex Code RGB CSS code or Code Snippet It is possible to drag a color from the color view to other windows and objects that are visible on the desk top Normally a drag operation would start from the color view and proceed to another window of the host application For example with EazyDraw as a host application you can drag a color to a shape and apply it as a fill for a target shape Since it is
27. f WebColorPicker is to be able to input and visualize formatted color specification text fragments For example paste ffa500 into WebColorPicker and immediately see that it is orange Ina complimentary respect using the SVG color list click on a orange color swatch and paste the color code into a text based source code file To facilitate this basic operation WebColorPicker provides 3 different color selection views to conveniently visualize different defined color spaces available to source code developers and web designer on OS X These are Hex Sliders Palette and Cube Hex Slider View The Slider View provides six sliders that allow convenient no typing specification of the six hex digits that define a unique color code Each slider will respond to a click or a click and drag setting the corresponding hex numeric value The specified color is automatically computed and entered in multiple ways as a hex code as an rgb code rgb 255 165 0 a color swatch and optionally a code snippet Any of these the actual color or the text can then be dragged to any open document or drawing The color defined by the sliders is a precise hex color with no residual leakage into the full 32 bit millions of colors color space which may be important in some situations To use as an inspector select a color on a drawing or document and immediately see the three hex components The components are visualized by the quantized positions of the sliders and
28. file is found in the Applications Support folder in the user Library hierarchy Library Application Support WebColorPicker Settings plist The file is a plain text file and may be manipulated with a text editor or with the Property List Editor utility provided as part of the OS X developer tools If a text editor is used to make changes to the file care must be taken not to compromise the property list structure of the file Corruption could cause host applications to crash and fail to launch It is advised to use the Property List Editor to make changes to the Settings file If the Property List Editor is used the core integrity of the file structure will remain stable and errors in this case would not likely cause problems when read by WebColorPicker If corruption does happen and applications fail to launch remove the Settings file from the WebColorPicker folder and re launch corresponding applications If WebColorPicker is launched without a Settings file one is created with Factory Default conditions plist Elements The Settings file contains a dictionary of xml elements consisting of arrays strings and sub dictionaries These are accessed by keys The keys are descriptive and self documenting The corresponding elements should be clear as to their use and meaning A few of these elements are more complex for these documentation is provided below CreateColorLists WebColorPicker provides three color lists for use with WebColorPicker and
29. ker are designed to assist designers working with these source code documents The above application will be of primary interest to professional designers working in the field of web page design The compact numerical nature of the WebColorPicker interface is a useful compliment to the default Color Pickers provided with OS X Software developers working on iPhone applications will find the hex and rgb color code capabilities of WebColorPicker useful as well Inspect and select a proper browser compatible color with one of the visualization views and obtain a typo free text code snippet that is ready to paste directly into application source code There is specific support for several software languages including ObjectiveC and Java In a similar fashion WebColorPicker will prepare a defining color declaration statement for instantiating the target object in RGB color Space If some of the above jargon has no meaning to you don t worry these details are available for the professional in the appropriate fields but the added complexity is minimal and not in the way for normal occasional use Many will find this small utility useful because of the ease of use of the sliders or the aesthetic appeal of the color cube Pg 4 Ch 01 Welcome To WebColorPicker Chapter Installing WebColorPicker Diagand Drop Instali EE Color Panel Plugin 5 Glen e Rei e 5 Preferences EE 6 Resetting Preferences siessen 6 ee EE 6 Steeg Ee H Betteng UK
30. new Code Snippet format a new dictionary with the proper form of three elements with the required defined three keys These are now defined KEY NameSnippet The NameSnippet key identifies a string The string is the name that will appear in the Code popup menu on WebColorPicker s settings view The name should be descriptive and should be unique with respect to all other Code Snippet entries KEY FormatSnippet The FormatSnippet key identifies a string The string is a C unix or ObjectiveC format string that is used as a template into which a defined list see next key of argument values is substituted When WebColorPicker is running and a Code Snippet is generated this exact format string is used with the stringWithFormat Objective C function call Complete precise documentation can be accessed from Apple s web site a google of the function call will provide access to the documentation for those not familiar with the use of formatted strings and associated argument variables KEY VarsSnippet The VarsSnippet key identifies a string that is itself a key which will define one of a few forms of arguments that are provided as the arguments to compiled stringWithFormat statement The possible values are tabulated and defined below The entries defined below are the only allowed arrangement of color arguments available If another variation is needed please contact WebColorPicker support at WebColorPicker com and the addition can be integ
31. ntion WebColorPicker Bundle Library Preferences com dekorra EazyDraw plist Library Application Support com eazydraw webcolorpicker plist Library Colors SVG Keyword clr Library Colors Browser Safe clr Library Colors CSS Keyword clr Installing WebColorPicker Ch 02 Pg 7 Upgrading WebColorPicker The fact that this is a system wide plug in means that all applications that are using the plug in need to quit before the old plugin may be removed or replaced With this caveat upgrading is a simple process of replacing the old plugin with the new one The best way to determine if it is safe to remove the old plugin is to move it to the trash and execute the menu command Empty Trash If an application is using the plug in OS X will give warning and not allow the bundle to delete In this case you will need to investigate further and try to determine the locking application that is running and using the plugin In a worst case it may be necessary to re boot the system and then move the plugin to the trash immediately after booting up Note that an application may have access to the system color picker even if you are not actively using the color picker Many applications will load and access the color panel at launch time or soon thereafter In this case it may be in use even if it is not open and on the desktop Once the old bundle is successfully removed to the trash the new upgraded version is installed by simply placing it in the
32. option replacement of the media refund of the purchase price or repair or replacement of the Software THIS LIMITED WARRANTY IS THE ONLY WARRANTY PROVIDED BY DEKORRA AND DEKORRA AND ITS LICENSERS EXPRESSLY DISCLAIM ALL OTHER WARRANTIES CONDITIONS OR OTHER TERMS EITHER EXPRESS OR IMPLIED INCLUDING BUT NOT LIMITED TO IMPLIED WARRANTIES CONDITIONS OR OTHER TERMS OF MERCHANTABILITY SATISFACTORY QUALITY AND FITNESS FOR A PARTICULAR PURPOSE WITH REGARD TO THE SOFTWARE AND ACCOMPANYING WRITTEN MATERIALS FURTHERMORE THERE IS NO WARRANTY AGAINST INTERFERENCE WITH YOUR ENJOYMENT OF THE SOFTWARE OR AGAINST INFRINGEMENT OF THIRD PARTY PROPRIETARY RIGHTS BY THE SOFTWARE BECAUSE SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION OR LIMITATION OF IMPLIED WARRANTIES THE ABOVE LIMITATION MAY NOT APPLY TO YOU THE TERMS OF THIS DISCLAIMER AND THE LIMITED WARRANTY UNDER THIS SECTION 5 DO NOT AFFECT OR PREJUDICE THE STATUTORY RIGHTS OF A CONSUMER ACQUIRING THE SOFTWARE OTHERWISE THAN IN THE COURSE OF A BUSINESS NEITHER DO THEY LIMIT OR EXCLUDE ANY LIABILITY FOR DEATH OR PERSONAL INJURY CAUSED BY DEKORRA S NEGLIGENCE 6 Limitation of Remedies and Damages In no event will DEKORRA its parent or subsidiaries or any of the licensers directors officers employees or affiliates of any of the foregoing be liable to you for any consequential incidental indirect or special damages whatsoever including without limitation damages for loss of business profits business inte
33. or Code is a hexadecimal triplet representing the colors red green and blue A color is formed by adding the corresponding amounts of red green and blue Each color component is defined over an unsigned integer range of 0 to 255 decimal This range of integers can be represented by two hexadecimal numbers which we will call hexadecimal digits A single hexadecimal digit covers a range of 0 to 15 using decimal numbers for the range 0 through 9 and the letters A through F to represent the numbers 10 through 15 The most widely used capability of WebColorPicker is to specify and inspect the hex color codes used with HTML and CSS source files This value is shown top left of the WebColorPicker view right below the main panel color swatch The value shown in this field is a hexadecimal number 6 hex digits long The value may be preceded by a pound sign the setting for this is found on the Settings view The pound sign is a flag in html to indicate a hexadecimal number follows Pg 10 Ch 03 Color Panel If a color is selected in any fashion the hex code for the color is shown in the Hex Code Box In a nearly absolute sense the code will correspond exactly to the color showing right above it in the Main Color Swatch Naturally a color may be selected by clicking on a color in the WebColorPicker color selection view but the actual hosting application has primary control over which color is present in the Main Color Swatch The HexCodeBox accepts text
34. or web and software design activities Every color list has a name ee SE Sg Three provided with WebColorPicker are Browser Safe often Opacity called Web Safe CSS Keyword and SVG Keyword ee LU 7 The SVG Keyword list provides defined color names that are E T PSRRRRSBRRRRR supported by all major browsers Every color in a Color List has a unique name The two keyword color lists use names defined by published standards in use in web and browser design The Browser Safe list is named according to the hex codes which is a common practice among web designers Only one Color List is active for the WebColorPicker The colors in this active list are compared with a color selected in WebColorPickers color view or by an activity in the host application a match or close matches are shown in the Color Name popup menu Since a color list is a rather small set of colors it is common that there is no matching color in the color list In some cases there may be one or more colors that are close The Color Name menu will indicate these various states by showing a color or declaring no match If a color is similar but does not match the name of the color is shown and an asterisk mge Deg ENSE is used to indicate that it is not an exact match Sliders Palette Cube G Uppercase 1 Comp Code Snippet 2 Code GbjC fraction V 3 Drag Hex Code E INSColor colorWithCalibratedRed 0 06275 green 0 06275 blue
35. ore particularly as OS X property list Property Lists are made up of arrays and dictionaries The values are self documenting with descriptive English language names and values If you have installed OS X s development tools there is an application called Property List Editor that may be used to view or edit the contents of the file It is as you might expect not advisable to edit or change the contents of the preferences file It is very easy to damage the file with a simple text editor and this should be avoided If the Property List Editor is used the base file format is safe from damage and WebColorPicker would likely be able to work through any errors introduced in this fashion Full documentation for the Preferences File is covered in Chapter 06 Color Files WebColorPicker installs three color list files These are placed in Home Library Colors folder The files end with the extension clr The format is an OS X system defined format used for storing lists of colors These color lists are installed the first time WebColorPicker is accessed The actual WebColorPicker panel needs to be selected from the system color panel to cause the initial access The color lists created are used to provide three standard color lists that are useful for web design and software development The color lists installed are named CSS Keyword Browser Safe and SVG Keyword Named color lists are not required by the WebColorPicker and many web design
36. orical use of the colors have made them familiar to web designers and often found in existing web designs Their use today is primarily is concert with this familiarity This palette is a good general set of colors and shades spanning the rgb spectrum CSS Keyword The CSS Keyword palette is a smaller set of colors identified with standardized names It is handy when needed for CSS coding projects or for design projects that should be limited to a very few colors such as GIF graphic design SVG Keyword The SVG Keyword palette is not in wide use but does offer a good selection of defining color names It is handy for finding colors according to artistic names with quantized hex code specificity Pg 16 Ch 03 Color Selection View Color Names The Color Name popup menu provides a menu method for selecting a color It will also show a color name when a selected the color in the Main Color Swatch color matches a color in the current color list If a color does specifically match one of the palette colors the matching color is outlined in the color selection view and automatically selected and displayed with name in the Color Name popup menu If the selected color is close to a color in the color list the name is shown in the popup menu with an asterisk to indicate close but not exact match In this latter case the popup menu will have the matching color moved to the top of the menu for convenient selection These color names are used in the C
37. ra Optics LLC be liable for any incidental indirect special or consequential damages arising out of the purchaser s use of the program material Credits Author David R Mattson Publisher Dekorra Optics LLC N5040 Beach Garden Road Poynette WI 53955 U S Manufactured in the United States of America This manual created and designed entirely with EazyDraw Production included all text entry spell checking page layout graphics integration and electronic pdf pre press production All terms mentioned in the book that are known to be trademarks or service marks have been appropriately capitalized Dekorra optics LLC cannot attest to the accuracy of the information Use of aterm in this book should not be regarded as affecting the validity of any trademark or service mark WebColorPicker is a copyright trademark of Dekorra Optics LLC EazyDraw and the EazyDraw logo are registered trademarks of Dekorra Optics LLC Mac and the Mac logo are trademarks of Apple Computer Inc registered in the U S and other countries Chapter 01 Welcome To WebColorPicker Getting Started oo ccccccccsssesscssssescsssssscsssuseccsssevscssssssesssseecssnesessneeess 1 What iS WebCOlOrPiCKe roi cccceessssseescssssesssssseessssssesssssseeesssneeesen 1 AP Ee UE 2 Hex Slider E 2 EE 2 COF E TEE 3 lee e d Chapter 02 Installing WebColorPicker Drag and Drop E NEEN 5 COlOF Paner PLU QUA scence ose sccr paar ENAN 5 ENCENNO ICONS E 5 EEGENEN 6
38. rated into the next release rgbFixed The arguments are 3 integers 32 bits each They correspond to red green and blue components on a scale of 0 to 255 0 being dark 255 associated with full saturation of the corresponding color rgbFloats The arguments are 3 floating point numbers 32 bits not doubles They correspond to red green and blue components on a scale of 0 0 to 1 0 0 0 being dark 1 0 associated with full saturation of the corresponding color rgbFixedAlphaFloat The arguments are 3 integers 32 bits each and one floating point number 32 bits not double The integers correspond to red green and blue components on a scale of 0 to 255 0 being dark 255 associated with full Saturation of the corresponding color The floating point number corresponds to the value of the alpha channel Opacity value explained above Zero corresponds to fully transparent and 1 0 corresponds to fully opaque color Pg 22 rgbsFloats The arguments are 4 floating point numbers 32 bits each not doubles They correspond to red green blue and alpha components on a scale of 0 0 to 1 0 0 0 being dark 1 0 associated with full saturation of the corresponding color For the alpha value zero corresponds to fully transparent and 1 0 corresponds to fully opaque color rgbPackediInt The argument is a single integer of 32 bits The rgb values on a scale of 0 to 255 are packed into the low order 6 hex digits Red component stored in bits 2
39. re two distinct categories of color lists pattern colors and solid colors WebColorPicker works only with solid colors For this reason the only color lists shown and managed by this view are color lists which contain only solid colors A list with just a single pattern color is not shown The menu has commands for adding and removing color lists from the menu Initially WebColorPicker shows only the 3 color lists that ship with WebColorPicker Use these commands to use other color lists and customize the menu selections Web Color Palettes WebColorPicker creates and installs 3 color palettes that are Gelee sometimes useful for web design projects The names of these 3 Zeen SS Add v i S nner i are Browser Safe CSS Keyword and SVG Keyword These are BEE created the first time WebColorPicker is accessed The color Settings palettes are placed in the Colors folder as explained above They Opacity are then available for all applications and color tools on OS X ERS 100 Browser Safe The Browser Safe list sometimes called Web Safe Colors is a set of 216 colors that are commonly considered to be the web safe color palette These are a set of colors that are likely to be shown without dithering on systems using only 256 colors These were useful in the early days of computing The use of these web safe colors is no longer critical especially if the viewing audience is primarily Mac based The hist
40. riate fields of code snippets that accept or expect alpha channel specification Color Spaces Mac OS X and other modern computing systems support several methods for specifying colors WebColorPicker works with Reds Greens and Blues and alpha as described above These are called RGB colors RGBA when alpha channel is used Examples of two other color spaces are Cyan Magenta Yellow Black CMYK and pattern colors Pattern colors were mentioned earlier when discussing color lists We note that these other color spaces will not work with WebColorPicker as elements of this user interface are designed explicitly for reds greens and blues When non RGB colors are in use a small darkened triangle is shown in the upper right hand corner of any color well containing a non RGB color The presence of this mark indicates that the color is not RGB WebColorPicker will try to convert a non RGB color to corresponding rgb components Pg 19 Note that the RGB color space will not be able to represent all colors that may be possible in another color space Therefore a conversion may not be possible or the conversion may result in a noticeable change in shade and hue of a color This issue is different than the limitation of 6 digit hex codes when representing an rgb color The residual errors using hex code specifiers result in generally small hue and shade differences that are barely perceptible In contrast a CMYK color converted to RGB may be a different shade
41. ric entry field near the bottom of the color panel allows transparency to be applied to a color Transparency is applied to colored attribute by specifying a color with transparency When transparency is in effect the associated color well will draw both the master opaque color and the transparent color over white with a diagonal separator A Color Well Winding Stroke Outline B Zi width Lon des Join Miter W can Sere E Position Front i Miter Limit 10 Defaults Click to set Style for new items o L sed Current Default 909090 Sliders Palette Cube 90 90 90 SVG Keywo rd L i Settings Opacity There are several other terms for Opacity In some cases it is called Transparency A common nomenclature is to refer to Opacity or Transparency as the Alpha channel or colors with Alpha In Objective C the term used for opacity is Alpha Simple hex color codes used for HTML or CSS source code do not use opacity so the opacity or alpha value of any color has no impact on the primary hex code or RGB color specifiers found just above the WebColorPicker s color selection view Alpha values are used with several of the language constructs supported in the Code Snippet field see chapter 03 Opacity values generated on the color panel or inspected values from the host application s target attributes are sampled and provided in the approp
42. rruption loss of business information and the like whether foreseeable or unforeseeable arising out of the use of or inability to use the Software or accompanying written materials regardless of the basis of the claim and even if DEKORRA or a DEKORRA representative has been advised of the possibility of such damage DEKORRA s liability to you for direct damages for any cause whatsoever and regardless of the form of the action will be limited to the greater of 250 U S or the money paid for the Software that caused the damages The parties agree that this limitation of remedies and damages provision shall be enforced independently of and survive the failure of essential purpose of any warranty remedy THIS LIMITATION WILL NOT APPLY IN CASE OF PERSONAL INJURY CAUSED BY DEKORRA S NEGLIGENCE ONLY WHERE AND TO THE EXTENT THAT APPLICABLE LAW REQUIRES SUCH LIABILITY BECAUSE SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION OR LIMITATION OF LIABILITY FOR CONSEQUENTIAL OR INCIDENTAL DAMAGES THE ABOVE LIMITATION MAY NOT APPLY TO YOU 7 General This License shall be governed by the laws of the United States and the State of Wisconsin The parties agree that the United Nations Convention on Contracts for the International Sale of Goods 1980 as amended is specifically excluded from application to this License This License constitutes the entire agreement between you and DEKORRA concerning the subject matter and any proposals for additional or different term
43. s At the core WebColorPicker supports inspection and setting of colors as HTML color codes which use Hexadecimal doublets to specify Red Green and Blue additive color components Paste in a color code from a text editor to see the color Pick a color with a mouse click then paste a ready to use color code into the html or software source code In the extreme WebColorPicker has quite a few tricks that a professional web designer or software engineer can incorporate into a work flow to save keystrokes and improve productivity WebColorPicker understands CSS shortcuts 333 gt 333333 and manages defined scope color lists like web safe or SVG Keyword aoe Colors CH Opaci ty Pg 1 WebColorPicker was originally designed to be used with EazyDraw Web design professionals and amateurs requested the ability to input hex color codes something they need to do frequently The OS X color picker system Supports rgb color component specification but not in the hexadecimal form Hence EazyDraw users and the EazyDraw developer were required to have the calculator and various handwritten crib sheets when working with source code that presents colored graphic objects As the new color picker was implemented it immediately became n always open palette for graphic design and software development projects This led to the independent packaging as a general use color picker plugin Capabilities The fundamental capability o
44. s including but not limited to the terms set forth in any purchase order are hereby rejected Any waiver or amendment of any provision of this License shall be effective only if in writing and signed by both you and DEKORRA If any provision of this License shall be held by a court of competent jurisdiction to be contrary to law that provision will be enforced to the maximum extent permissible and the remaining provisions of this License will remain in full force and effect If the Software is supplied to the United States Government the Software is classified as restricted computer software as defined in clause 52 227 19 of the FAR The United States Government s rights to the Software are as provided in clause 52 227 19 of the FAR Copyright 2009 Dekorra Optics LLC All rights reserved No part of the publication may be reproduced or used in any form by any means without the prior written permission of Dekorra Optics LLC This information contained in this publication is believed to be accurate and reliable However Dekorra Optics LLC makes no representation or warrantees with respect to the program material described within and specifically disclaims any implied warrantees of merchantability or fitness for any particular purpose Further Dekorra Optics reserves the right to revise the program material and make changes therein from time to time without obligation to notify the purchaser of the revisions or changes In no event shall Dekor
45. t hex codes It is further quantized to allow selection from a reduced set of specific hex code colors And it is has a scheme to vary saturation brightness and darkness along the rings of the cube This allows the inner rings to display the more saturated colors that need fewer shades Sliders Palette Cube The colors presented in the cube are all computed they are not derived from the selected color table Only the Palette view derives the visualized color swatches directly from the color table op er Too Each color swatch of the color cube is a triangle A color is Ces Keyword b Mi lime selected by clicking on one of these triangles If a selected color a matches one of the color cube colors the corresponding triangle ii color swatch is indicated with a black border Opacity Ba san te Number of Rings H GSRRRRSRRRRR The number of colors presented by the cube may be changed by clicking the plus or minus buttons found near the top corners of the color selection view The cube may go down to 7 colors ona side and up to 15 colors per side The cube is always quantized to exact hex code colors Pg 17 Chapter Color Wells COLON Mee 18 ACTIVE COlOl WEI EE 18 Color Panel Toolbar s 19 ODAC EEN 19 Color Spaces tbe iaei 19 Color Swatches 20 DT Color Wells This chapter is a general discussion of the use of color wells with the Mac OS X operating system The topics discussed here do
46. th the icon shown to the right To activate and use WebColorPicker this Bundle is placed in the Color Pickers folder This is a magic folder and placement in this specific location is required OOFFFF Jo This design makes it easy to uninstall WebColorPicker simply remove the bundle from your system The actual binary image program and all the necessary associated files and resources are hidden from view and lumped into this single bundled entity If you are interested you can investigate the contents of the plugin bundle select the WebColorPicker bundle in the finder control click and access the provided popup menu select Show Contents Then you will see that the plugin bundle is actually just another folder If you investigate these hidden folders you ll find the actual binary module Uninstall Checklist Since WebColorPicker is a drag and drop bundled plugin uninstall is trivial just move the WebColorPicker bundle to the trash and empty trash There are a few other files created by WebColorPicker they are passive They should not interfere with your system or any other application on OS X The clr files are public and designed to be used by other OS X applications You may remove them if you wish or if they are causing problems for the color picking actions of another application Here is a full list of all files automatically created by WebColorPicker The sign means your home folder or directory a unix conve
47. the hex numeric values displayed If the color is not precisely a hex color the numeric values are shown in red with the residual accessible as a tool tip A shift click will tie the two sliders to work in unison creating the common shortcut color codes with doublet hex digits for example 333333 or cccccc This is a more conventional shorthand than completing with zeros for the least significant hex digits 666666 instead of 606060 Palette View CH O Colors The OS X operating system provides support for Color Lists These are eris iB HA Fe Si OS Se ee Bim defined tables of specific colors in comparison with a continuous spectrum of rgb colors specified as 3 floating point fractions The q mmm Palette mode displays color swatches for each color of an OS X color list Simply click on the swatch to see the exact hex components the affoga esso 0 0 name assigned to the color the color itself the hex and rgb html code E eee text and optionally a code snippet E Sliders Palette Cube A popup menu with color indicators is provided to inspect the color list and to select individual colors The WebColorPicker ships with 3 color lists that are useful for web r Less design they are Browser Safe sometimes called Web Safe SVG Keyword rz Til Lower Case v i Ca SVG Keyword Opacity an 100 BEE EE EK VERT EX CSS Keyword Pg 2 Ch 01 Welcome To WebColorPicker These are automaticall
48. the unlicensed mode Unlicensed copies will present a share ware notification panel with each initial launch This notification sequence is removed for licensed users A purchased license is a small alphanumeric code The code is case sensitive Enter the code by clicking the Settings button found at the lower section of the WebColorPicker section of the main system color selection panel See chapter 03 for instructions for accessing the WebColorPicker panel a host application is required as WebColorPicker is plugin not a standalone application Double clicking the WebColorPicker bundle in the Color Pickers folder will not launch WebColorPicker Pg 5 Preferences File When WebColorPicker is launched for the first time a preferences file is created to save persistent settings that are maintained when you quit and return to WebColorPicker This file is saved in your OS X Applications Support folder that is found in the Home Library folder This file is in a folder called webColorPicker Note that since WebColorPicker is a plug in and not a primary application the preferences and settings are located in the Applications Support folder rather than the primary Preferences folder Settings for WebColorPicker will be the same for all applications that use the color picker The name of the settings file is Settings plist The plist file is a text file it may be viewed with any text editor The text is formated according to XML design conventions and m
49. us input an error message is flashed over the color view and the previous value is retained Decimal Code Box The Decimal Code Box is found to the right of the Hex Code Box This field displays the same color Main Color Swatch Hex Code Box and color view as explained above in the CSS RGB color code format It is convenient when CSS codes are not needed because it shows the hex color pair values in decimal notation kind of an on the fly hex decimal crib sheet The Decimal Code box is available for copy to system pasteboard Soo Se This can be used to save typing CSS color specifiers Pick a color d select the Decimal Code text in the text box do Copy then paste into the source code file The Decimal Code box accepts CSS color specifiers as well The n fg parser is not elaborate but if the format is reasonably similar to GRO of j the CSS specifier format the decimal colors are located and fed into the host application Results are then re formatted to the _Sliders Palette strict CSS format i orange orangered Named Colors orchid The Decimal Code Box accepts input of named colors as well as rgb CSS color specification statements The names recognized in this field are names from the selected color list which is shown immediately below the color selection view The field provides auto completion for typed entries If matches are found in the color list the completed available colors are shown in a flash up Add B
50. well top one on the left palette is the active color well The Color Picker on the right is reflecting the state of the Fill color Notice that the active color well has a darker border The Outline color well has light border and is NOT active in the snap shot below The Stroke color is not shown on the Color Panel s main color swatch It is important to learn to notice the change in appearance of a Color Well when it is active and connected to the Color Panel and corresponding Color Picker Only one Color Well is active at any given time The active color well has a darker border to indicate its state Deactivate a color well by clicking it when it is active This means it is possible that no color well is active This can be confusing as changes to the color are not reflected anywhere in the host application This is useful for making up new colors or experimenting with colors without modifying your work in the host application P Ch 05 Color Wells There are many ways to choose colors the buttons at the top of the Color panel are used to select the color picker method Color Panel Toolbar Notice that these buttons are part of a normal OS X window toolbar Toolbars can be hidden or exposed the state is controlled by the OS X standard toolbar exposure button found at the very top right of the panel If no buttons are seen on your system color panel click this button to make them active Opacity The Opacity slider and nume
51. y generated and installed on OS X the first time the Color Picker panel is accessed Once installed they are available for use with any application any other color picker and naturally WebColorPicker s Palette view WebColorPicker s Palette view will support any color list installed on OS X more specifically any solid colors color list Pattern color lists are detected and prevented from access since they are not defined for the required rgb color space So you may easily incorporate specific color lists that might be defined for an individual web design project This is a valuable technique when it is desired to limit a design to a small set of standardized colors Autocompletion of text entry is supported for the rgb text entry field For example typing orange will select the color from the color list and define the color codes ready for copy and paste without typing any hex codes Naturally this has the added advantage of avoiding numeric typing errors CO Colors A eS es ee VE ee Si D CO Colors OS tae EST Sliders Palette Cube ST T0000 m Een Fe ff DU 00 ess Keyword 2 M rea E iM lowercase EI Opacity 100 ees LLL EN 0 emm Srtonon rgb 255 0 0 Sti Sliders ders Palette Cube ae SVG Keyword ES ee red he iW Lower Case E D Opacity 100 Welcome To WebColorPicker Ch 01
Download Pdf Manuals
Related Search