Font Color Picker

Color picker manual test

This manual test contains 3 editors:

the first one has the default color picker config;
the second one has the output colors set to rgb for font color and hex for background color;
the last one has color picker disabled.

To test the feature, ensure that:

The "Color picker" button is visible by default.
Clicking the "Color picker" button toggles the dropdown view to color picker.
Upon color picker opening, the current selection color is set in the palette and color input (converted to the hex format).
Colors set through the color picker are applied in the model and data in the right formats.
Font and font background color configs are independent.
"Save" button applies changes and hides the dropdown.
"Cancel" button cancels the changes done through the color picker.
Color input only accepts colors in hex format (both with or without # at the beginning).
Multiple color changes through the color picker are batched in one undo step.
Keyboard navigation (with tab and arrows) works (all items in color picker view are accessible).
Focus is clearly indicated on all focusable items.

01. no-color; no-color

02. color:hsl(0, 0%, 100%);background-color:hsl(0, 0%, 0%);

03. color:hsl(0, 75%, 60%); no-color;

04. no-color; background-color:hsl(90, 75%, 60%);

05. color:hsl(30, 75%, 60%); background-color:hsl(0, 0%, 30%);

06. color:#00FFFF;background-color:rgb(255, 0, 0);

07. color:hsla( 0, 0%, 0%, .7); background-color:gold;

08. color:;background-color:hsla(270, 100%, 50%, 0.3);

09. color:#ddd;background-color:hsl(150, 75%, 60%);

10. color:hsl(270, 75%, 60%);background-color:#d82;

01. no-color; no-color

02. color:hsl(0, 0%, 100%);background-color:hsl(0, 0%, 0%);

03. color:hsl(0, 75%, 60%); no-color;

04. no-color; background-color:hsl(90, 75%, 60%);

05. color:hsl(30, 75%, 60%); background-color:hsl(0, 0%, 30%);

06. color:#00FFFF;background-color:rgb(255, 0, 0);

07. color:hsla( 0, 0%, 0%, .7); background-color:gold;

08. color:;background-color:hsla(270, 100%, 50%, 0.3);

09. color:#ddd;background-color:hsl(150, 75%, 60%);

10. color:hsl(270, 75%, 60%);background-color:#d82;

01. no-color; no-color

02. color:hsl(0, 0%, 100%);background-color:hsl(0, 0%, 0%);

03. color:hsl(0, 75%, 60%); no-color;

04. no-color; background-color:hsl(90, 75%, 60%);

05. color:hsl(30, 75%, 60%); background-color:hsl(0, 0%, 30%);

06. color:#00FFFF;background-color:rgb(255, 0, 0);

07. color:hsla( 0, 0%, 0%, .7); background-color:gold;

08. color:;background-color:hsla(270, 100%, 50%, 0.3);

09. color:#ddd;background-color:hsl(150, 75%, 60%);

10. color:hsl(270, 75%, 60%);background-color:#d82;

You can use this helper to generate text with a particular color / background applied. Change inputs and accept it with enter key.

Color: Background Color:

Text for copying.