• Reported by Nate

A couple of years ago, I made an extended review of all the web based color pickers I could find floating around. The information is old, but I think still somewhat valuable, so rather than trash it during the transfer to our new server, I'm copy/pasting it into this post. I'll provide a link to it's new home from the old URL, and now anyone can feel free to add to this list via comments. It will also be easier to remove outdated links in this form, but alas, I still have major layout quirks to iron out with the new design of this site, and little time available. Oof, it's funny how old this markup seems, I gotta clean this up.

A Review of Web Based Color Pickers

Date: September 3rd, 2001
Author: Nathan Steiner
Updated: August 22st 2002

Brief Summary:
This is not an article about the long and interesting history of color, nor the psychology of color, nor color in differing cultures, nor the science of color, nor color and perception, nor color in commerce, nor color and religion, nor colors as keyword padding ;-)... you get the idea. Color is such an interesting and difficult topic to cover that many a great philosopher and thinker throughout history have waited to tackle it until their elder years; I'm certainly not going to challenge them here, this article is simply a listing of web based color pickers with some core information about how they work and some notes about their strong and weak points. This article is intended for web designers and coders who know what they are looking for in a web based color picking utility, but have yet to find their perfect match.

Criteria for review
To keep a manageable range of tools for review, I'm only discussing color selection and color comparing tools (not color charts), and only tools freely available via a web browser (not desktop applications). There are many fine tools which do not meet this criteria, however I was particularly interested in web based color pickers because of their accessibility to authors on multiple platforms.

Disclaimers

1. I've tried to be objective in my reviews, however sometimes a personal preference is reflected in my comments, please know that each note and observation should be taken with a grain of salt as different designers/developers have different needs (hence all of these color pickers).
   
2. I have not browser tested these resources, and for the purpose of writing this article, only viewed only in IE 5.5 on Win2k
   
3. Copyright for all of the tools/sites below remains with the original authors, please respect them.
4. This is a review of web based color pickers currently found on the web, I certainly didn't find all of them, so if you've made one or know of one that is not reviewed here, please contact me and I will (if it qualifies the criteria) add it as an update to this article.or - add notes via a comment
5. The color tools listed below are not in any particular order.

---

1)
Title: Colormix (method 1)
Notes:

• multiple color choosing methods
• interface does have slight beige color, but buttons are not 3D
• simple to use, quick to learn
• no method for copy/paste Hex
• no text/shape preview.

Authors: David Bird, Trevor Elliott
Tech: applet but with low-tech frame based alternative
Size: small
Input hue palette and value bar, rgb text input, rbg adjusters
Output: creates hybrid web-safe colors (using alternating websafe pixel colors) and provides them in gif form
URL: http://www.colormix.com/

---

2)
Title: Netscape Colorpicker 2
Notes:

• small footprint with tab navigation in popup window
• very buggy button behavior, slow interface response time
• no text/shape preview

Author: Michael Bostock
Tech: dhtml
Size: small
Input rgb, hls, and hsb sliders
Output: copy/paste hex
URL: http://home.netscape.com/computing/
webbuilding/studio/feature19981111-5.html

---

3)
Title: Visibone Colorlab
Notes:

• fantastic hue based arrangement of color
• multi-lingual
• Three sizes for clickable palette
• colors stack next to each other, up to 8 colors at a time, each color is closable
• color name abbreviations act as text color comparisons from color to color

Author: Bob Stein
Tech: JavaScript
Size: 3 size options
Input copy/paste multiple representations, hex, color names, rgb, and cmyk
Output:
URL: http://www.visibone.com/colorlab/

---

4)
Title: IDEO Web Color Visualizer
Notes:

• very quick and simple
• two color preview (bkrnd vs. text/shape) with only 1 click & rollover
• color arrangement is numeric
• hex on color squares interferes with color perception

Authors: Mark Chance, Leo Kopelow, Danny Stillion
Tech: dhtml
Size: larger format
Input click on color palette
Output: copy/paste 2 hex colors
Contest Entry URL: http://www.the5k.org/description.asp/entry_id=171
Direct URL http://entries.the5k.org/171/visualizer.html

---

5)
Title: Web Color Converter
Notes:

• quick, compact, simple and clean
• Mostly for rgb-hex conversion, however numbers can be tweaked to make adjustments
• copy/paste hex number at once but copy/paste rgb requires 3 operations (separate form fields)
• find nearest web-safe option

Author: Jeff Howard
Tech: dhtml
Size: small format
Input
Output: copy/paste hex or rgb
Contest Entry URL: http://www.the5k.org/description.asp/entry_id=432

Direct URL: http://entries.the5k.org/432/index.html

---

6)
Title: Color-sketcher
Notes:

• quick, clean, intuitive, but always requires specifying the item to be changed prior to selecting color.
• great for seeing a quick preview of simple color choices - 3 types of text, a background and foreground color.
• copy/paste nice string of all hex numbers, but preformatted to HTML specification rather than CSS type
• background color of black is fixed, so darker colors are somewhat visually lost.
• despite some of the above comments, the method used to choose colors, the preview, and the output result in a fantastic tool.

Author: Nadav Savio
Tech: dhtml
Size: small format, but uses space available to its advantage
Input click text, link, vlink, background, or foreground - then click color palette to set
Output: copy/paste hex or rgb
URL: http://giantant.com/resources/
color_sketcher/color_chooser.htm

---

7)
Title: Colormat 3001
Notes:

• fast response time and immediately see colors react to 3 (rgb) slidebars
• includes a dark/light adjustment bar
• two changeable items - background color of sample area and text in sample area.
• seems upside-down, increase a value by sliding bar down

Author: Yaro
Tech: dhtml
Size: small format
Input rgb + y sliders and hex text input for background and foreground
Output: copy/paste hex
URL: http://www.yaromat.com/colormat/main.htm

---

8)
Title: Netscape (6x6x6) Color Palette Map
Notes:

• simple and fast one color pick
• works in old browsers
• no previewing of colors
• colors displayed on black and white, organized by hue and value

Author: Victor S. Engel
Tech: javascript
Size: small format
Input click on imagemap
Output: copy/paste hex, decimal, percentages
URL: http://the-light.com/colclick.html

---

9)
Title: colorDavid
Notes:

• simple and fast one color pick
• works in old browsers
• single color preview only
• colors displayed on black and white, organized by hue and value

Author: Henk Stokhorst
Tech: imagemap
Size: 5 different palette sizes, each with high, med, low contrast variations
Input Click on imagemap
Output: page of color, hex in url
URL: http://www.mensinghe.nl/colorDavid

---

10)
Title: The Color Schemer
Notes:

• interface is quite compacted and contains permanent blue color
• provides 15 complimentary colors of related value
• darken all/Lighten all feature
• preview one color at a time, plus the preset complimentary colors
• can handle non-web-safe colors when custom numbers are plugged in

Author: Aaron Epstein
Tech: javascript
Size: small format
Input rgb, hex, websafe color palette, linked complementary colors
Output: copy/paste hex and rgb
URL: http://www.colorschemer.com/online/

---

11)
Title: Cyphen
Notes:

• clean non-intrusive interface
• black or white palette background options
• two versions, web safe and non-web-safe (both offer hex and rgb in/output
• brighter/darker color modifications (for non-web-safe version)
• web safe version offers one color preview area, non-web-safe offers 29 color variations per color choice
• multi-lingual

Author: Joshua Gregory Davis
Tech: javascript
Size: pop up window, small
Input rgb, hex, web safe color palette
Output: copy/paste hex and rgb
URL: http://www.cyphen.com/

---

12)
Title: Palette Man
Notes:

• interface includes fixed blue background, colorful buttons and logo
• color sets and preview include up to 4 shape colors and 1 text color
• darken all/lighten all feature
• color rotation feature
• convert entire color set from hex to rgb

Author: ClearInk
Tech: dhtml
Size: medium format
Input websafe color palette, text input (restricted to websafe colors), preset color sets
Output: copy/paste Hex and rgb, email color set
URL: http://www.paletteman.com/

---

13)
Title: Two4U's Color Compose Engine
Notes:

• color set includes bgcolor, text, link, vlink, and alink
• two clicks (with reload) to get other than primary colors
• colors chosen can make interface unreadable because preview includes interface area

Author: Mark Koenen
Tech: cgi
Size: medium format
Input clickable "slide bars" for hue, palette cube for value, text input of rgb and hex, load background image
Output: copy/paste hex, rgb, and body tag html for color set
URL: http://www.two4u.com/cgi-bin/color/compose

---

14)
Title: Web Colour Selection and Conversion Utility
Notes:

• allows non-web-safe colors
• previews color by setting background
• includes fixed blue and black in interface

Author: BuildingTheWeb
Tech: javascript
Size: Small width, but tall
Input hex number, color name, rgb number or rgb websafe radio button
Output: copy/paste exact hex or "web hex", rgb in 3 form fields
URL: http://www.buildingtheweb.com/html/colour/jvscolor.htm

---

15)
Title: ColorPicker
Notes:

• includes animated banner add in preview area
• lots of text on both control and preview pages
• non-web-safe for background color only
• change background, text, link, vlink, alink via radio button and swatch click

Authors: Joe Barta with thanks to Scott Yanoff
Tech: javascript
Size: large and framed
Input clickable web safe color palette, input background hex, background image, font name/size
Output: preview page in separate window with sample rendering and body tag HTML code
URL: http://www.pagetutor.com/pagetutor/makapage/picker/

---

16)
Title: Color Picker
Notes:

• simple one color pick, preview result on loaded page
• colorpick palette interface includes permanent greenish colors and white behind color swatches

Author: Web Templates
Tech: cgi
Size: large due to placement in surrounding page layout
Input click on imagemap palette
Output: page with solid color chosen and copy/paste hex
URL: http://www.webtemplates.com/colors/

---

17)
Title: WebSite Color Picker
Notes:

• interface includes permanent light yellow background color and green text/link colors
• color choices are limited to light range of web safe background colors and dark range of web safe text/link/vlink colors
• preview of colors appears in right hand frame

Author: John Holme
Tech: javascript
Size: large and framed
Input click on limited pre-set color swatches or type in hex
Output: copy/paste hex
URL: http://www.digitdesigns.com/colrPick/

---

18)
Title: WebTV Color Picker
Notes:

• being made for tv based internet development, a "snap to TV-friendly colors" option is available
• top frame includes fixed dark blue background
• the click-able browser safe palette is not shown by default, but can be used to make color selections
• background, text, link, vlink are previewed in bottom frame

Author: WebTV
Tech: javascript
Size: framed but sizes down quite small
Input rgb, hex, y, hue, sat, bright, very large websafe click-able palette
Output: copy paste any of the input fields, or copy/paste body tag code
URL: http://developer.webtv.net/design/tools/colorpick/Default.htm

---

19)
Title: LaMaia's Color Picker v1.0
Notes:

• palette of colors (some not websafe) with hex numbers and checkboxes
• pick multiple colors to get a grid of samples with each color chosen on top of each other color
• below initial sample grid is another similar grid but with hex numbers as well

Author: LaMaia Cramer
Tech: php
Size: large, results reload and appended to bottom of page
Input checkbox colors to compare
Output: reloading of page with foreground/background samples for each color combination picked, copy/paste hex
URL: http://ladb.unm.edu/~lamaia/colors/color_picker.php3

---

20)
Title: Palettizer css color contrast picker
Notes:

• colors chosen from multiple-select form fields
• palettes include 15 predefined, 140 named, 216 non-dithering, user preferences
• user preference colors are from the system user preferences palette as outlined in the w3c css2
• recommendation (based on client's machines)
• color choices effect entire page page colors

Author: Markup.co.nz
Tech: dhtml
Size: scalable but large
Input select palette, choose background and text color
Output: instant preview with copy/paste hex
URL: http://www.markup.co.nz/palettizer/palettizer.htm

---

21)
Title: The PDI Color Picker 2.0
Notes:

• This is a simple one click preview to get hex colors
• lots of logo, graphic, and text in and around feature
• palette is on fixed white background

Author: Precision Digital Images
Tech: javascript
Size: sizable down to medium, framed site
Input click on web safe palette, enter hex, rgb or cmyk color input fields
Output: border changes color, copy/paste hex
URL: http://www.precision-digital.com/calibrate/

---

22)
Title: EasyRGB
Notes:

• there are really 3 tools here - color matching for finding colors in color collections (such as paint manufacturing color palettes), a color harmonies tool, and a color calculator for factoring advanced attributes such as light source type and viewer angle.
• interface includes fixed blue and yellow elements
• color choices can be transferred from tool to tool
• this is a very data rich tool with lots of advances options. Since RGB number entry is required this might be a better choice for color manipulation and refinement of pre-existing color choices.

Author: EasyRGB
Tech: javascript
Size: small input, large output
Input rgb - decimal, hex, floating point, color matching collections, light source, observer angle
Output: rgb dec, hex, floating point, xyz, cmy, cie-l*ab, cie-l*ch, hunter-lab, yxy & l.r.v., cmyk, color collection numbers (for color matching), complimentary colors
URL: http://www.easyrgb.com/harmonies.php3

---

23)
Title: ColorServe Java
Notes:

• intuitive method for choosing colors
• background, text, link, vlink, alink color choices and preview area
• snap to websafe, upper/lower case code output
• non-intrusive gray background and interface

Author: Brian Hall
Tech: java
Size: small
Input color wheel with hues, slide bar for value, also includes hex text inputs
Output: body tag code, individual hex copy/paste fields
URL: http://www.ac.biola.edu/~brian/csapplet.html

---

24)
Title: NB-Safecolormatch
Notes:

• there are enough features here to create a rich color palette for an entire site design
• extensive features come with a price of complexity and crammed space
• interface includes some fixed colors, lots of text, and banner ad
• copy/paste css code is handy feature for writing an entire style sheet with the tool

Author: Kim Hjortholm
Tech: javascript
Size: large and framed
Input visbone color palette (with hex in each color square), background, color 1, color 2, text 1, text 2, link, vlink, hover, undo, swap, r, g, and b values, brighter, darker
Output: preview color choices in frame, copy/paste hex, copy/paste CSS code
URL: http://www.colors4webmasters.com/safecolor/index.htm

---

25)
Title: GIFWorks Advanced Color-Picker
Notes:

• quickly obtain one color with its hex value
• rgb slider bars work fast and smoothly
• no palette, must use sliders or text hex entry
• preview is small, includes word "sample" in black and white on top
• not limited to websafe colors
• gray and white backgrounds don't interfere with color selection

Author: GIFWorks
Tech: javascript
Size: small
Input rgb sliders, rgb entry form fields
Output: small sample area, copy/paste rgb or hex
URL: http://www.gifworks.com/cgi-bin/cpicker.pl?E5E5FF

---

26)
Title: ColorCalc v1.1
Notes:

• quick and fast method for picking foreground/background colors
• no palette, must use sliders or text hex entry
• sliders work smoothly and quickly but are a bit thin
• blue and cream fixed backgrounds to interface
• not limited to websafe colors
• the hex is not selectable or copy/paste-able

Author: P.J. LaBrocca
Tech: java
Size: small
Input rbg sliders, hex input field, choose foreground or background colors to set, swap colors
Output: small preview area with sample text, hex for both the current foreground and background (not copy/paste-able)
URL: http://labrocca.com/colorcalc/

---

27)
Title: Color Number Calculator
Notes:

• rgb slider buttons indicate red, green, and blue, which helps intuitiveness
• page and interface colors do not interfere with color selection process, page is gray with black text
• the hex is not selectable or copy/paste-able

Author: Pete Gray
Tech: java
Size: medium
Input two sets of rgb sliders, with black or white buttons, reset, flip and random
Output: large preview area with sample text and shape, hex for foreground and background (not copy/paste-able)
URL: http://www.houseof3d.com/pete/applets/
tools/colors/index.html

---

28)
Title: Color Code Converter
Notes:

• numbers can be adjusted outside of websafe color palette
• compact and clean but bright yellow page background is fixed
• this is a one color tool, small preview of color appears in preview square

Authors: CNET Builder.com/Poppy Reiffin
Tech: javascript
Size: small
Input click on websafe palette, enter rgb values, enter hex, plus/minus hex numbers
Output: copy/paste hex or rgb values
URL: http://builder.cnet.com/...

---

29)
Title: 4colors selector
Notes:

• interface is mostly fixed white background but does include some other colors and banner ad
• separation of values and preview helps color choosing process
• no adjustments of individual colors, limited to color palette choices

Author: S Ferreira
Tech: javascript
Size: large
Input color palette sets color, 4 color areas and 1 text area to place color, randomizer button, color cycling
Output: for each color choice: copy/paste hex values, rgb values, named colors
URL: http://www.stormloader.com/4colors/

---

30)
Title: 24
Notes:

• This is the "purest" form of color picker, limited to one color picking/previewing - but entire page is devoted to this task.
• simplicity makes this tool outstanding, no distracting interface elements, no complicated process to learn, simply move the mouse in the browser window.
• move mouse: left-right = hue, up-down = value, click for popup pre-selected hex number

Author: Milo Vermeulen
Tech: javascript
Size: as small or large as you'd like it
Input mouse movement, one button to toggle between 16 million/websafe color limitations
Output: click for popup of dec/hex code, or just view the values in the browser's status bar (copy/paste from popup)
URL: http://milov.nl/iambald/24.html

---

31)
Title: Web Color Theory
Notes:

• non-intrusive gray interface
• superior visibone color palette arrangement, but limited to websafe colors
• drag-n-drop interface makes for "hands on" feeling to the color picking process
• preview layouts are fantastic for comparing colors and viewing combination choices

Author: Mundi Design Studios
Tech: flash
Size: sizeable
Input drag-n-drop visibone palette into one of three preview styles (2 are three color previews, 1 is web layout template preview)
Output: view hex and rgb values (no copy/paste)
URL: http://www.mundidesign.com/webct/index.html

---

32)
Title: Colour Selector
Notes:

• not limited to web-safe colours
• find nearest web-safe option
• 4 main tools here: preview text, navigate colour, mix colours, make swatches
• this suite of tools has many options and offers extensive flexibility and control
• it takes a few moments to learn this tool set because of its advanced and innovative feature set, but its those extensive features and unique control sets that make it worthwhile
• 16 layouts of the web-safe palette and six expanded palettes
• non-intrusive layout
• backwards and cross browser compatible
• choices which are remembered from page to page (via a session)
  • current colour
  • units (hex or dec)
  • palette style
  • last shown palette style
  • palette background
  • navigation variation amount
  • mix variation amount
  • swatch HSL variation amounts
  • mix's number of variations
  • swatch's number of variations

Author: Paola Kathuria
Tech: LML (Limitless Markup Language)
Size: small to medium width, tall
Input input text hex numbers or decimal, click on one of 22 palettes, change rgb by percentage, nearest safe value, inverse value, percentage of hue, percentage of value, percentage of lightness, change the variation amounts (which effects previously listed percentage changing features), navigate + or - 3 percentages values of [red, green, blue, green/blue, red/blue, red/green, red/green/blue]
Output: copy/paste any hex, dec, or hsl value, nearest safe colour, preview black and white text on each swatch
URL: http://www.limitless.co.uk/colour/

---

33)
Title: HTML Color Picker
Notes:

• non-intrusive white interface
• color range extends past web safe colors
• preview block of color for one pick at a time

Author: Christopher Jason Wetherell
Tech: HTML
Size: medium
Input click on color in palatte or type in hex
Output: copy/paste hex
URL: http://www.massless.org/ColorPicker/
Alternate Version URL (configured differently): http://david.medovoy.com/code/color-picker+.html

---

34)
Title: moreCrayons - Slider
Notes:

• non-intrusive light gray interface
• Three sliders for red, green and blue values
• includes 4,096 "web smart" colors
• preview one color at a time
• easy to adjust through color combinations, simillar to sliders in graphics programs

Author: Kirk Franklin
Tech: PHP
Size: small but with side and top navigation
Input click on hex pair for each of three sliders
Output: arrows point to hex pairs chosen
URL: http://www.morecrayons.com/palettes/webSmart/slider.php

---

35)
Title: moreCrayons - Color Cube
Notes:

• non-intrusive light gray interface
• includes 4,096 "web smart" colors
• toggle visibility of vertical slices from 3D cube
• helpful for viewing colors comparatively, but not for referencing single colors

Author: Kirk Franklin
Tech: PHP
Size: medium
Input toggle visibility of vertical slices from 3D cube
Output: cross reference hex pairs from 3D cube verticies
URL: http://www.morecrayons.com/palettes/webSmart/colorcube.php

---

36)
Title: moreCrayons - Color Squares
Notes:

• great collection of copy/paste outputs, very handy for css coding
• non-intrusive light gray interface
• includes 4,096 "web smart" colors
• navigate from 48 color groupings via swatch thumbnails or pulldown menu
• detail view of color groupings includes clickable color squares for related data
• handy to choose color family or grouping and then refine individual color choices

Author: Kirk Franklin
Tech: PHP
Size: large
Input choose color grouping (swatch or pulldown), then choose individual color (clickable squares, with or without borders)
Output: copy/paste: 6 digit hex code, shorthand hex code, css ready rgb code (0-255), css ready rgb (percentages)
URL: http://www.morecrayons.com/palettes/webSmart/colorsquares.php

---

37) Added on 08.22.02
Title: Color Picker
Notes:

• pick 2 colors to get blend or tint/shade gradient matrix
• full screen color preview with either white or black preview text
• 3 levels of navigation, back button required
• web safe colors only

Author: Andrew Porter Glendinning
Tech: CGI
Size: Medium
Input pick two colors (radio buttons) from red, yellow, green, cyan, blue, and magenta. Blend or tint/shade pulldown option.
Output: copy/paste: 6 digit hex code on individual color preview pages
URL: http://www.serve.com/apg/cgi-bin/colorpicker.cgi

---