Share via

CSS Color Picker

  • Article

 

The CSS color picker lets you insert color values into CSS color properties. It includes a standard palette of colors and uses standard color names, hash codes, RGB, RGBA, HSL, and HSLA color values, and displays a list of the colors most recently used. By default, the color picker enters hexadecimal values. To change this setting, see Format, CSS, Text Editor, Options Dialog Box.

Choosing a Color

The color picker has a color bar and a color screen. The color bar is always accessed first.

To display the color bar

  • Type any CSS property that takes a color value (for example, color:, rgb(, rgba(, hsl(, hsla(, or**#**).

  • To access the color bar with the keyboard, place the cursor on an existing color in the style sheet and press Ctrl-J or Ctrl-Space.

In an empty style sheet, the color bar displays a default pallet. In a style sheet with existing colors, the color bar displays a list of the most recently used colors.

To choose a color from the color bar

  1. Click one of the colors in the color bar, or press the Down Arrow to enter the color bar, and then use the Left Arrow and Right Arrow keys to select a color.

    On the style sheet, the property values will change as you choose different colors.

  2. To see more colors, click the Left and Right Arrows on the color bar, or use the arrow keys to move left and right on the color bar.

  3. Press ENTER to assign the color you have chosen to the CSS color property.

To choose a custom color from the color screen

  1. To display the color screen, choose the plus sign (+) on the right end of the color bar, or press the down arrow key on the keyboard once or twice when the color bar is visible.

  2. Do one or more of the following.

    • Use the mouse to select a color from the screen.

    • Change the color by moving the slider on the right up or down.

    • Change the opacity by moving the slider on the bottom left or right. Values will be entered in RGBA or HSLA format.

    • Choose Pick to change the pointer to an eyedropper tool. The chosen color will be previewed as you move the pointer.

    As you change colors with any of these methods, the original color displays in the Original box, the chosen color appears in the New box, and the value for the CSS color property is previewed on the style sheet.

  3. Press ENTER to assign the color you have chosen to the CSS color property.

Note

The color you choose is displayed by using your monitor's display settings and can look different on another monitor.

UI Elements

UIElement List

  • New
    Displays the color that is selected in the dialog box, but which has not yet been assigned to the CSS rule.

  • Original
    Displays the color that is currently assigned to the CSS rule.

  • Opacity
    Slide the button to the right to increase the opacity of the color, or to the left to decrease it.

    Note

    Because there is no representation of opacity in the standard hexadecimal format, the color picker will enter RGBA or HSLA values when you adjust the opacity.

  • Pick
    Changes the pointer to an eyedropper tool that lets you select any color on the screen and then assign it to a CSS property. As you move the pointer over the screen, the color corresponding to the pointer location is previewed in the New box, and the value for the relevant CSS color property changes on the style sheet.

See Also

Format, CSS, Text Editor, Options Dialog Box