Open Color defines specified usage of each color. This post describes supposed usage of colors. Open Color will help you easily decide what color to use for your product. You might want to call it a manual. If you aren't quite sure about the colors you choose, this manual can help you figure out. Open Color is not a rule set. It only suggests you affordable options. Issue reports and Pull requests are always welcome.
When gray is used for a UI element, the brightness itself can imply specific significance. When an element turns dark as you hover your mouse, this indicates that the element is clickable. A distinctively bright gray one indicates that the element has been disabled or expired. Other colors in Open Color have a constant difference in brightness separated into ten different levels. However, gray colors of Open Color don't vary in the same degree because specific brightness holds implications as mentioned.
Let's find out how each color is used.
Gray 7 or Gray 8 is recommended for body text. The soft color of Gray 7 naturally matches with a background. Therefore it is appropriate for a UI element with concrete function such as menu labels or buttons. If a content itself is emphasized as in blog posts, SNS or headline, Gray 8 can make a clearly readable text.
Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.
Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.
Text is often written in gray as well as black. Text in gray can be categorized into two usages. Gray is useful for text which isn’t as important as others. For example, additional explanations below headlines or metadata. Gray 6 is handy because it is a brighter color compared to the body text yet read as disabled. On the other hand, gray is also appropriate to indicate disabled forms, buttons and links. In this case, Gray 5 is recommended.
Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.
Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.
In many products, we can see the background in white, but if you want to switch modes or separate spaces, light gray such as Gray 0 or Gray 1 can be chosen. Until recently, Gray 0 (#f8f9fa) which is fairly close to white wasn’t used. However, as display technology in digital devices advance and extremely simple designs come in trend, a very bright gray color started to appear in UI. For that reason, Gray 1 can seem a bit old-fashioned, but it is affordable for low-end devices and users who don’t have clear eyesight.When separating spaces with color over Gray 0 background, Gray 1 is useful.
You can use darker background color to represent status change such as active, hover for elements like buttons. In this case, 2 levels darker than normal buttons are suggested.
Stroke elements use Gray 3 and Gray 4. Gray 3 is affordable for strokes which divide compartments such as <hr>. Gray 4 is appropriate for strokes implying boundary of forms or buttons can be operated.
Use Gray 2 when hinting a disabled status.
Although Open Color is based on UI style of a white background with elements in strokes, the black background is often chosen along with the white text. At this point, the Gray 9 for background, Gray 7 for strokes and text can be in Gray 0, Gray 5, Gray 6.