breadcrumbs: Aura > page_name: ash-color-chooser title: Ash Color Chooser

## 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

    image

    • Confirmed that the upper box isn’t necessary, since the color will be shown in the page.

  • Current screenshot:

    image

# 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