A method and system to provide a color palette which facilitates user selection of web-safe colors. In laying out the color palette, the extent of achromatic colors located within the color palette is determined. The achromatic colors are then arranged in one group on the palette, for instance in order of lightest to darkest. The non web-safe chromatic colors are then grouped together. From this grouping blends of the colors are created. Finally, the web-safe chromatic colors are grouped together. Blends with respect to the web-safe chromatic colors are created and then grouped on the color palette.
|
16. A computer implemented method for displaying colors in a color palette, comprising the steps of:
arranging colors associated with a given hue angle on one side of diagonal of the rectangular geometric area so that the colors are disposed horizontally in order of decreasing saturation towards said diagonal and vertically in order of decreasing value towards said diagonal, and arranging blends of colors in a range of hue angles associated with said given hue angle on the other side of the diagonal so that said blends horizontally decrease in value towards said diagonal and vertically decrease in saturation towards said diagonal.
15. A computer generated color palette for displaying in a graphical user interface of a computer, said color palette comprising one contiguous grouping of achromatic colors, a second contiguous grouping of non web-safe chromatic colors, and a third contiguous grouping of web-safe chromatic colors, including blends that are created from the web-safe chromatic colors wherein a subgroup of web-safe chromatic color blends are arranged within said third grouping to form a square wherein the colors are arranged on one side of a diagonal of the square horizontally in order of decreasing saturation towards said diagonal and vertically in order of decreasing value towards said diagonal, and the colors in the other side of the diagonal are arranged horizontally decreasing in value towards said diagonal and vertically decreasing in saturation towards said diagonal.
20. A computer generated color palette for display in a graphical user interface of a computer, said color palette comprising a first contiguous grouping of primary colors, and a second contiguous grouping of secondary colors within a rectangular area, wherein the colors in said first grouping are associated with a given hue angle and arranged on one side of a diagonal of said rectangular area such that they decrease in saturation along one dimension of said rectangular area in a direction towards said diagonal and decrease in value along the other dimension of said rectangular area in a direction towards said diagonal, and wherein the colors in said second grouping are within a range of hue angles associated with said given hue angle and arranged on the other side of said diagonal such that they decrease in saturation along said other dimension in a direction towards said diagonal and decrease in value along said one dimension toward said diagonal.
13. A computer readable medium containing a program which executes the following steps:
determining the achromatic colors to be located within a color palette; arranging all the achromatic colors in one contiguous grouping within the palette; placing blends of non web-safe chromatic colors in a second contiguous grouping within the palette; and placing all web-safe chromatic colors, including blends created from the web-safe chromatic colors, in a third contiguous grouping within the palette; wherein a subgroup of web-safe chromatic color blends are arranged within said third grouping to form a square wherein the colors are arranged on one side of a diagonal of the square horizontally in order of decreasing saturation towards said diagonal and vertically in order of decreasing value towards said diagonal, and the colors in the other side of the diagonal are arranged horizontally decreasing in value towards said diagonal and vertically decreasing in saturation towards said diagonal.
14. An apparatus which implements a color palette that facilitates user selection of web-safe colors, comprising:
a computer; a storage device that stores a color palette; and a display device that displays the color palette; wherein the color palette is organized into one contiguous grouping of achromatic colors, a second contiguous grouping of non web-safe chromatic colors, and a third contiguous grouping of web-safe chromatic colors, including blends that are created from the web-safe chromatic colors wherein a subgroup of web-safe chromatic color blends are arranged within said third grouping to form a square wherein the colors are arranged on one side of a diagonal of the square horizontally in order of decreasing saturation towards said diagonal and vertically in order of decreasing value towards said diagonal, and the colors in the other side of the diagonal are arranged horizontally decreasing in value towards said diagonal and vertically decreasing in saturation towards said diagonal.
1. A method for providing a color palette which facilitates user selection of colors having a consistent appearance across different platforms;
determining the achromatic colors to be located within a color palette; arranging all the achromatic colors in one contiguous grouping within the palette; placing blends of non-web safe chromatic colors in a second contiguous grouping within the palette; and placing all web-safe chromatic colors, including blends created from the web-safe chromatic colors, in a third contiguous grouping within the palette; wherein a subgroup of web-safe chromatic color blends are arranged within said third grouping to form a square wherein the colors are arranged on one side of a diagonal of the square horizontally in order of decreasing saturation towards said diagonal and vertically in order of decreasing value towards said diagonal, and the colors in the other side of the diagonal are arranged horizontally decreasing in value towards said diagonal and vertically decreasing in saturation towards said diagonal.
2. The method of
3. The method of
4. The method of
5. The method of
6. The method of
7. The method of
8. The method of
9. The method of
10. The method of
11. The method of
12. The method of
17. The method of
18. The method of
|
The present invention is related to color graphics for computers, and more particularly to the design and layout of a color palette that facilitates user selection of colors that have a consistent appearance across different platforms.
As technology has improved over the years, the once novel use of color in images and text has become prevalent in everyday situations. The use of color in documents, emails, web pages, etc. has enhanced the visual stimulation of information transferred between individuals and groups. Color use has grown partly due to the fact that many multimedia and image manipulation programs have provided users with the capability to employ colors, for example, in the design and creation of images. In creating these color images and/or text, a color palette is typically provided that enables users to select the colors they would like to employ. Typically, a color palette is comprised of primary colors and several shades formed by blends of the primary colors.
In recent years as the Internet has grown, the use of colors for images and text on the Internet has also expanded. The software programs that enable users to create web pages have become increasingly user friendly and therefore do not require a vast understanding of web-page development programming. As a result, these programs are widely used by consumers as well as professional designers. Many of these programs have a color palette with its own set of colors from which users may select. However, not all colors contained in a program's color palette may be considered to be "safe" for use in web pages. More particularly, some colors will not look the same as originally intended when viewing them on different computers or with different application programs. For example, the Macintosh® operating system distributed by Apple Computer, Inc. and the Windows® operating system distributed by Microsoft Corp. may cause the same document retrieved over the Internet to appear differently, because of the respective manners in which these two systems display certain colors. Colors which do not provide a consistent appearance across different platforms are considered to be "non web-safe".
Many programs have a color palette in which web-safe colors and non web-safe colors are separated, to make it easier for users to distinguish between the two. However, for non-professionals, specific colors may be difficult to find, and achromatic colors, such as black, white and shades of gray, may also be difficult to find.
Thus, it is an object of the present invention to provide a color palette which facilitates the selection of web-safe colors, while also making it easy for users to select specific colors and/or achromatic colors.
The present invention provides methods and systems for providing a color palette which facilitates user selection of web-safe colors. In laying out the color palette, the extent of achromatic colors located within the color palette is determined. The achromatic colors are arranged as a separate group, for example in order of lightest to darkest. The non web-safe chromatic colors are also grouped together. From this grouping blends of the colors are created. Similarly, the web-safe chromatic colors are grouped together according to their respective hues, and within groups they are arranged by degree of saturation. Blends of the web-safe chromatic colors are created and grouped on the color palette according to this arrangement.
In an exemplary embodiment of the invention, a 16×16 grid is used to provide a 256-color palette. The achromatic colors are arranged along one row or column of the grid e.g., from lightest in the upper left corner to the darkest in the lower left corner of the palette. Further, the non web-safe chromatic colors are arranged along two adjacent rows or columns at one edge of the grid, e.g. the top. The remaining positions are used for the web-safe chromatic colors. These colors are grouped into six areas each representing a 60°C section of the HSV color wheel. The chromatic colors are separated into primary and secondary colors, where the primary colors are the pure colors while the secondary colors are those formed from blends of the pure colors.
In another embodiment of the invention the achromatic colors are arranged on the first column so that the non web-safe and web-safe colors are separated from each other.
The file of this patent contains at least one drawing executed in color. Copies of this patent with color drawing(s) will be provided by the Patent and Trademark Office upon request and payment of the necessary fee.
Various exemplary embodiments of this invention will be described in detail, with references to the following figures, wherein:
Referring to
Various types of application programs can be loaded into the main memory 16 and executed by the CPU 14. One type of program to which the present invention is particularly directed comprises a color graphics program, via which a user can designate the colors of objects within a document, such as a web page. These objects can be text, geometric objects, images, and the like. To facilitate the user's ability to select a color for a given object, many such programs include a color palette that can be displayed on the display device. Using the pointing device 26 the keyboard 24, and/or other input device, the user can designate a particular color on the palette and then indicate the object or objects to which that color is to be applied.
The present invention is directed to a color palette that allows users to distinguish web-safe colors from non-web safe colors, while also providing a visually pleasing layout that makes it possible for users to easily select the color they want to use, including achromatic colors. Therefore, trial and error situations and guesswork are reduced. Web-safe colors are defined as those colors that are displayed in a consistent manner among common web browsers, operating systems, and computer platforms. Non web-safe colors include those colors whose appearance may vary when displayed by different web browsers, operating systems and/or computer platforms. While the terms "web-safe" and "non web-safe" connote documents that are accessed via the Internet, such as web pages, it will be appreciated that the applications of the invention are not limited to this situation. Rather, in the context of the invention, these terms are being employed in a generic sense to identify whether colors are displayed with a consistent appearance across multiple platforms and/or applications, regardless of the source of the documents in which they appear.
A specific example of the invention is described below in conjunction with an 8-bit, 256-color palette on a 16×16 grid. This particular type of palette provides a particularly illustrative example of the problem addressed by the invention since, by convention, the specific 256 colors of the palette are predefined. As a result, the designer is constrained to using those particular colors when laying out the palette. However, it should be noted that the methods described are not limited to either a square grid or a 256-color palette, and may be used on any size color palette and grid.
One embodiment of the method for arranging colors in a color palette in accordance with the present invention will now be described, with reference to the flow chart of FIG. 8. As an initial step, the colors that are to appear in the palette are determined at step 200. This is accomplished by determining the hue angle, saturation and value or "lightness" (HSV) parameters for each of the colors. The HSV values are best understood with reference to a color wheel 305, illustrated in FIG. 9. The hue angle (H) 310 is measured from 0°C to 360°C in a counterclockwise direction around the color wheel. Saturation (S) 315 and lightness values (V) 320 are expressed in a range between 0% and 100%.
Hue represents the attribute that is normally associated with the name of a color, for example, red, purple, blue, etc. Hue is more specifically defined by the wavelength associated with colors. Hue is also a term which describes a dimension of color that is readily experienced when looking at a color. Hue can be thought of as a dimension going around the color wheel, from 0°C to 360°C.
Color is also perceived along two other dimensions. One of the dimensions is lightness-darkness. The measurement of the lightness or darkness of a color is referred to either as a color's lightness or value 320. In terms of a spectral definition of color, value describes the overall intensity or strength of the light which produces that color, where pure white has a value of 100% and pure black is 0%. Value 320 can be envisioned as a linear axis running through the middle of the color wheel 305, normal to the plane of the figure.
Saturation 315 refers to the dominance of hue in the color. On the outer edge of the color wheel 305 are what is known as the `pure` hues. Moving toward the center of the wheel, the hue of a given pure color, such as red, blue etc, dominates less and less. At the center of the wheel, no hue dominates. The colors directly on the central axis are considered to be desaturated, or achromatic. The desaturated colors constitute the grayscale, running from white to black with all of the intermediate grays in between. Saturation 315, therefore, is the radial dimension running from the center of the hue wheel, fully desaturated, to the outer edge, fully saturated, perpendicular to the value axis. In terms of a spectral definition of color, saturation is the concentration of color at a given hue angle. Any given color corresponds to a single wavelength and therefore to a single hue angle. White light is fully desaturated because it contains an even balance of all wavelengths.
Once the colors of the palette have been identified, they are divided into three classes, namely achromatic colors, non web-safe chromatic colors, and web-safe chromatic colors, for further processing. These three classes can be processed in any order, since the colors in each group are exclusive of one another.
Once they have been identified, the achromatic colors are arranged as a contiguous grouping on the color palette grid at step 220. In one embodiment of the invention the achromatic colors are arranged from lightest, white, to darkest, black. These achromatic colors are arranged along one edge of a grid in the palette, i.e. a row or column. As shown in
In the embodiment of
The web-safe chromatic colors are grouped in a contiguous, logical manner at step 260. The web-safe colors are principally grouped by hue, and within each hue grouping by saturation and value, similar to the non web-safe colors and achromatic colors. The HSV color wheel 305 has 6 primary hues, each at 60°C intervals. The six hue angles comprise red at 0°C, yellow at 60°C, green at 120°C, cyan at 180°C, blue at 240°C and magenta at 300°C. Within each of these principal groups, the web-safe colors are arranged into sub-groups that correspond to V values of 100, 80, 60, 40 and 20. Once these sub-groups are defined, blends are created from each of the sub-groups at steps 270, thereby providing a full spectrum of primary web-safe chromatic colors. Once they have been chosen, these blends are arranged on the color palette at step 280.
Once the blends are created they are arranged on the color palette 360. The blends are arranged by placing each sub-group in a corresponding row of the palette grid. The first sub-group 515 is arranged on the first available row 540 of the color palette 360, in decreasing order of saturation from left to right. The second sub-group 520 is arranged in decreasing order of saturation on the row directly below the first sub-group 515. The third sub-group 525 is arranged directly below the second sub-group 525, again in order of decreasing saturation value 550. The fourth sub-group 530 is arranged below the third sub-group 525 in order of decreasing saturation. Finally, the fifth sub-group 535 containing only one color is arranged below the fourth sub-group 530.
Once all primary colors have been arranged on the color palette 360 grid in this manner, the next step in grouping the web-safe chromatic colors is to sort the remaining colors by hue angle. For example, all colors that are between 0°C and 60°C can be placed between red and yellow on the color palette grid. On the color wheel 305 there are various colors that range from red-orange, to orange, to orange-yellow that are located on the color wheel 305 between 0°C and 60°C, which correspond to colors in the range from 1°C to 59°C. These colors are formed by a combination of the primary colors red and yellow and are called secondary colors.
The secondary colors are arranged in a logical progression that is apparent to the viewer and coincides with the order in which the colors appear on the HSV wheel 305.
The first color (012/100/100) in the red-orange colors is the reddest and has the smallest hue angle. Therefore, it is closest to 0°C, which is red. This color is placed in the lower right corner of the square 1145 defined by the red blends. This square comprises two halves that are divided by a diagonal running from the lower left corner to the upper right corner. The upper half of the square contains the primary colors and the lower half contains the secondary colors. In arranging the primary colors in this square, the upper right corner of the diagonal is the least saturated and the lowest left corner is the lowest in value. The secondary colors in the lower half of the square are symmetrically arranged in a similar manner. The first blend comprising 4 colors at a 100% value flows from the bottom right of the square 1145 in an upward direction, decreasing in saturation. The second blend, 3 colors at 80% value, are placed left of the first blend, starting from the bottom of the square and going up in order of decreasing saturation. The third blend is placed directly left of the second blend. The third blend contains 2 colors of 60% value, the first color being placed at the bottom of the square and the second color immediately above it. The final blend is placed directly left of the third blend. It contains 1 color at 40% value. The square is now complete for all colors in the red/red-orange range.
However, there are 10 remaining colors from the orange and orange-yellow range. These colors are arranged in the 10 positions that form a rectangle 1150 directly below the square. The color having the most orange (024/100/100) is placed in the upper left position of the rectangle. The color having the most orange-yellow (048/100/100) is placed in the lower right position. The rest of the colors are placed in position by increasing the hue angle left to right, such that the colors with the lower saturation and/or value are located on the top row of the rectangle. The rectangle is now completed.
The remaining squares on the color palette 360 are completed in the same manner as described above. The colors which are represented at the different hue angles on the color wheel 305, are placed in corresponding positions on the color palette 360.
The foregoing example has been described in connection with a color palette that covers the full range of hue angles. The principles that are employed can also be applied to a smaller range of hue angles. For instance, the colors appearing in any one of the 5×5 squares associated with a given primary color, e.g., the red square 1145, can be expanded into their own 16×16 palette, to provide a finer resolution of colors. When they are arranged in the grid, the same order is followed, namely with decreasing saturation in one direction and decreasing value in the perpendicular direction.
While this invention has been described in conjunction with embodiments outlined above, it is evident that many alternatives, modifications and variations will be apparent to those skilled in the art. Accordingly, other embodiments of the invention may be made without departing from the spirit and scope of the invention.
Patent | Priority | Assignee | Title |
10217438, | May 30 2014 | Apple Inc. | User interface and method for directly setting display white point |
10220303, | Mar 15 2013 | HARMONIX MUSIC SYSTEMS, INC | Gesture-based music game |
10357714, | Oct 27 2009 | HARMONIX MUSIC SYSTEMS, INC | Gesture-based user interface for navigating a menu |
10421013, | Oct 27 2009 | Harmonix Music Systems, Inc. | Gesture-based user interface |
10950007, | Feb 08 2018 | Hasbro, Inc. | Color-based toy identification system |
7180524, | Sep 30 2002 | Artists' color display system | |
7446751, | Apr 15 2002 | RPX Corporation | Data input device, data input method, and data input program |
7502033, | Sep 30 2002 | Artists' color display system | |
7502864, | Jul 25 2002 | International Business Machines Corporation | Optimizing the transmission and storage of electronic documents in a communication network through the selective conversion of the color palettes of document images to palettes with a lower number of colors |
7643036, | Dec 23 2002 | Adobe Inc | Representing color gamuts in color charts |
8089482, | Sep 30 2002 | Artists' color display system | |
9280949, | Sep 13 2006 | Adobe Inc | Color selection interface |
9358456, | Jun 11 2010 | HARMONIX MUSIC SYSTEMS, INC | Dance competition game |
9361855, | May 14 2012 | Adobe Inc | Computer-implemented methods and systems for a color generator |
9981193, | Oct 27 2009 | HARMONIX MUSIC SYSTEMS, INC | Movement based recognition and evaluation |
D550234, | Nov 15 2005 | Microsoft Corporation | Portion of a display screen |
D562341, | May 23 2006 | Microsoft Corporation | User interface for a portion of a display screen |
D562342, | May 23 2006 | Microsoft Corporation | Transitional image for a portion of a display screen |
D562842, | May 23 2006 | Microsoft Corporation | Transitional image for a portion of a display screen |
D667842, | Apr 22 2010 | GOOGLE LLC | Electronic device with a graphical display element |
D689902, | Jun 10 2011 | HARMONIX MUSIC SYSTEMS, INC | Display screen or portion thereof with an icon for displaying dance moves |
D701868, | Jun 23 2007 | Apple Inc. | Display screen or portion thereof with a graphical user interface |
D711897, | Jun 23 2007 | Apple Inc. | Display screen or portion thereof with graphical user interface |
D725662, | Feb 02 2012 | Samsung Electronics Co., Ltd. | Display screen or portion thereof with graphical user interface on mobile device |
D790569, | Jun 10 2013 | Apple Inc. | Display screen or portion thereof with animated graphical user interface |
D800748, | Feb 04 2016 | Epic Tech, LLC | Display screen with graphical user interface for a penny auction |
D800749, | Feb 04 2016 | Epic Tech, LLC | Display screen with graphical user interface for a penny auction |
D801358, | Feb 04 2016 | Epic Tech, LLC | Display screen with graphical user interface for a penny auction |
D801359, | Feb 04 2016 | Epic Tech, LLC | Display screen with graphical user interface for a penny auction |
D803248, | Mar 04 2013 | TixTrack, Inc. | Display panel or portion thereof with graphical user interface |
D808414, | Feb 04 2016 | Epic Tech, LLC | Monitor display screen with penny auction graphical user interface |
D831676, | Dec 20 2016 | HANCOM, INC. | Display screen or portion thereof with icon |
D843389, | Apr 27 2015 | Lutron Technology Company LLC | Display screen or portion thereof with set of graphical user interfaces |
D845965, | Dec 20 2016 | HANCOM, INC. | Display screen or portion thereof with graphical user interface containing icon |
D854556, | Apr 27 2015 | Lutron Technology Company LLC | Display screen or portion thereof with graphical user interface |
D863321, | Dec 26 2014 | Sony Corporation | Portion of display panel or screen with graphical user interface |
D880503, | Apr 27 2015 | Lutron Technology Company LLC | Display screen or portion thereof with set of graphical user interfaces |
D898048, | Apr 27 2015 | Lutron Technology Company LLC | Display screen or portion thereof with set of graphical user interfaces |
D927512, | Apr 27 2015 | Lutron Technology Company LLC | Display screen or portion thereof with set of graphical user interfaces |
D940745, | Oct 31 2018 | Sony Corporation | Display panel or screen or a portion thereof with an animated graphical user interface |
D941835, | Jun 21 2019 | Sony Corporation | Portion of display panel or screen with graphical user interface |
D962256, | May 14 2020 | The Procter & Gamble Company | Display screen with graphical user interface |
D968441, | Apr 30 2020 | HUGE SG PTE LTD | Display screen with graphical user interface |
D982595, | May 14 2020 | The Procter & Gamble Company | Display screen with graphical user interface |
Patent | Priority | Assignee | Title |
5254978, | Mar 29 1991 | Xerox Corporation | Reference color selection system |
Executed on | Assignor | Assignee | Conveyance | Frame | Reel | Doc |
Mar 02 2001 | ROSE, BRIAN | Apple Computer, Inc | ASSIGNMENT OF ASSIGNORS INTEREST SEE DOCUMENT FOR DETAILS | 011611 | /0854 | |
Mar 15 2001 | Apple Computer, Inc. | (assignment on the face of the patent) | / | |||
Jan 09 2007 | Apple Computer, Inc | Apple Inc | CHANGE OF NAME SEE DOCUMENT FOR DETAILS | 019235 | /0583 |
Date | Maintenance Fee Events |
Jul 27 2007 | M1551: Payment of Maintenance Fee, 4th Year, Large Entity. |
Jul 27 2011 | M1552: Payment of Maintenance Fee, 8th Year, Large Entity. |
Aug 12 2015 | M1553: Payment of Maintenance Fee, 12th Year, Large Entity. |
Date | Maintenance Schedule |
Feb 24 2007 | 4 years fee payment window open |
Aug 24 2007 | 6 months grace period start (w surcharge) |
Feb 24 2008 | patent expiry (for year 4) |
Feb 24 2010 | 2 years to revive unintentionally abandoned end. (for year 4) |
Feb 24 2011 | 8 years fee payment window open |
Aug 24 2011 | 6 months grace period start (w surcharge) |
Feb 24 2012 | patent expiry (for year 8) |
Feb 24 2014 | 2 years to revive unintentionally abandoned end. (for year 8) |
Feb 24 2015 | 12 years fee payment window open |
Aug 24 2015 | 6 months grace period start (w surcharge) |
Feb 24 2016 | patent expiry (for year 12) |
Feb 24 2018 | 2 years to revive unintentionally abandoned end. (for year 12) |