Colors
When in need for a new color, several factors have to be considered.
- What is the semantic of this color? Is it supposed to have a meaning? (Users expect blue water and green forest)
- Can it lead to confusion? May it be misunderstood? (Gray map areas may be either unaccessible or just non-important)
- Is it accessible?
- Does it have good enough contrast to its surroundings? (Text needs maximum contrast, map colors can blend)
- Would it work for color-blind users? (Outlines, shapes, and contrast tweaks may be helpful)
- Does it play nice with existing palette? (Yellow POIs would not be seen on a yellow beach)
- Is introducing a new color needed after all? (Different shades of red in UI don't help differentiate destructive actions and just look dirty)
Help needed! @organicmaps/styles and @organicmaps/designers — for clear and night styles we should extract
- map colors from
colors.mapcss - icons colors from SVG files
- UI colors from Android app
- UI colors from iOS app
Some old Figma files could be found in the wild, but they are outdated. Recent developments in both apps made them obsolete. Android Studio and Xcode should be used for understanding current state of things.
| Greens | Grays |
|---|---|
#e5f0eb Green-1 (Background) |
#ffffff Gray-1 (Background) |
#cce1d7 Green-2 (Background) |
#f5f5f5 Gray-2 |
#99c4af Green-3 |
#e5e7e6 Gray-3 |
#66a686 Green-4 |
#d9dbda Gray-4 (Background) |
#33895e Green-5 (Visual Elements) |
#bfc2c1 Gray-5 |
#006b36 Green-6 (Primary Color) |
#808683 Gray-6 |
#006031 Green-7 (Text on Green-1) |
#4c5651 Gray-7 |
#00562b Green-8 |
#26312c Gray-8 (Secondary Text) |
#004020 Green-9 |
#000d07 Gray-9 (Primary Text) |
#00351b Green-10 |
#000503 Gray-10 |
Convenient palette for copy-pasting
Green
#e5f0eb
#cce1d7
#99c4af
#66a686
#33895e
#006b36
#006031
#00562b
#004020
#00351b
Gray
#ffffff
#f5f5f5
#e5e7e6
#d9dbda
#bfc2c1
#808683
#4c5651
#26312c
#000d07
#000503
-
OKLCH color picker: https://oklch.com/
-
APCA contrast checker: https://www.myndex.com/APCA/
-
WCAG contrast checker: https://coolors.co/contrast-checker/
-
WCAG contrast grid: https://contrast-grid.eightshapes.com/