Colors / General Actions (modal verbs)
The color of the icon should show its goal, i.e. what it’s going to do, generally speaking.
Each one of them must be available in two shades, for use on a light or dark background. They must be contrasting with the background and with the other colors, and be as distinguishable as possible to colorblind people.
This list is evolutive, but the general actions listed here must be very general, and the list has to be small enough to be able to differentiate the actions.
It may be possible to use shades of these main colors to introduce more nuances. These nuances may be listed here in the future.
Light
For use on dark backgrounds
Color | Hex Code | Name | Description |
---|---|---|---|
Neutral | Application specific color | ||
#8ad891 | Creation | Adds something new | |
#d8ff8c | Display | Shows, prints, plays a media | |
#d588f1 | Modification | Modifies existing objects | |
#f188ba | End | Ends, stops, closes, hides something | |
#f96969 | Deletion | Removes something | |
#83d3f6 | Settings | Changes further behavior | |
#8cffef | Connection | Connects/Sends/Receive data |
Dark
For use on light backgrounds
Color | Hex Code | Name | Description |
---|---|---|---|
Neutral | Application specific color | ||
#3e8b45 | Creation | Adds something new | |
#84b330 | Display | Shows, prints, plays a media | |
#8109ad | Modification | Modifies existing objects | |
#842c53 | End | Ends, stops, closes, hides something | |
#ac1010 | Deletion | Removes something | |
#10688e | Settings | Changes further behavior | |
#00a2a3 | Connection | Connects/Sends/Receive data |