Overview

This document describes how to achieve <input type=”color”> UI in ChromeOS/Ash.

Motivation

<input type=”color”> is a new input type introduced in HTML5.  It enables users to pick a color and returns a value of #hhhhhh format.  WebKit forms team has decided to use platform’s default color picker rather than implementing a new one.  It means that we need to implement our own color picker view for ChromeOS/Ash.

First Goal

• Implement simple color picker dialog working with <input type=”color>.
• Implement with views, not HTML.
• Features
  • Behave as Modal Dialog (see doc)
    • Appears in the topmost z-order
  • Pick up a color from HSV model
    • Has both a Hue bar and a Saturation-Value plane (see below mock).
  • Pick up a color from text
    • Allow copy/paste
    • Specify the color by …
      • rgb(xx ,yy, zz)
      • #RRGGBB
      • CSS well-known color name
      • … anything else?
  • Work on Chrome OS

• first mock
  
  • Confirmed that the upper box isn’t necessary, since the color will be shown in the page.
• Current screenshot:
  

Next plans (not confirmed yet)

• Global Color Picker: Picking a color from any point on the desktop.
  • Even from other tab, window or desktop.
• “Favorite Color” feature
  • Pick up the color easily from each user’s favorite color.
• Works on Windows and Chrome OS
  • Currently, Windows has native OS Color PIcker Dialog. This new Color Picker will replace it.

Not Goal

• Alpha value (transparency) support
  • HTML5 spec has not supported alpha value.

References

Input type=color spec: http://www.w3.org/TR/html-markup/input.color.html