A color picker inspired by chrome's dev tools color picker (or spectrum color picker)
Always mention the relevant person with @username
apm install chrome-color-picker
chrome color picker in Atom Settings (
Settings > Install > Search).
You can use the entire picker using just the keyboard. Use these keys for navigating within the component:
Escape: To close the picker
Escape: To save the value to the editor
Tab: To move to the next part where action can be performed (e.g. button, slider, etc.)
Shift + Tab: To move to the previous part where action can be performed (e.g. button, slider, etc.)
Space: Do the action
There are more actions that are possible with keys and mouse
You can use the mouse wheel to scroll on the sliders and the main canvas to change the values. You can also do the following:
ctrl + wheelto increment more value.
shift + wheelto slide from left to right or vice-versa on the main slider (or canvas).
ctrl + shift + wheelto increment more value.
Note: ctrl also means cmd in Unix based operating systems like Linux or OS X
You can use the arrow keys to scroll on the sliders and the main canvas to change the values. You can also do the following:
ctrl + arrowKeyto increment more value.
When you have multiple cursors it inserts the color in each of their locations
You can now pick colors from anywhere on the screen
Note: Features marked [Beta] are not stable and might not work as expected so feel free to point out any issues with them
The plugin uses the following projects (or their sources) or technologies in some manner:
Feel free to use the source code of the converted files as long as you adhere to their respective licenses.
Open your keymap file and add this line to it:
Note: Your key binding can be e.g.
alt + ctrl + c and also make sure to disable the default key binding from the package's settings or resolve it using the key binding resolver
This implementation was built from ground up to:
Open the developer tools in atom (View > Developers > Toggle Developer Mode or Using
ctrl + alt + i)
Enter this command in the developer tools console
atom.config.unset('chrome-color-picker') and restart atom
Feel free to update the wiki with your findings.
Solution They are always welcome, even if they are present in the milestone
Try restarting atom or closing and opening atom or reloading atom (
View > Developer > Reload Window)
For transparency into our release cycle and in striving to maintain backward compatibility, package is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we'll adhere to those rules whenever possible.
The list of all 3rd party licenses along with the main License can be found here
Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.