Feature #43256
closedIntroduce Open Color to unify and standardize CSS colors
0%
Description
The attached patches update Redmine's CSS to replace hexadecimal color codes with CSS variables defined by Open Color, an MIT-licensed color scheme for UI design.
By introducing Open Color, it consolidates very similar colors that were scattered across the existing CSS (for example, three similar light grays: #f5f5f5, #f8f8f8, #f9fafb) and improves overall visual consistency in the UI. For future development, using Open Color's structured palette makes it easier to choose harmonious colors. It also replaces hex values like #f5f5f5 with clearer variable names such as --oc-gray-0, which contributes to more efficient development. In fact, colors from Open Color are already being used in Redmine 6.1.0 for the background colors of the built-in Initials Avatar (see #43227#note-4).
In this patch, the number of distinct colors used in the CSS has been reduced from over 100 to about 50. Because the replacement colors were chosen to be close to the originals, the overall look and feel remains largely unchanged while improving color consistency. However, some colors, such as the header color and the responsive flyout menu color, have intentionally been left as hexadecimal values. These distinctive colors are not part of Open Color, and forcing them into the Open Color palette would significantly change the current design's look and feel.
Files
Related issues
Updated by Go MAEDA 28 days ago
- File 0001-Add-Open-Color-CSS-for-consistent-UI-color-scheme.patch 0001-Add-Open-Color-CSS-for-consistent-UI-color-scheme.patch added
- File deleted (
0001-Add-Open-Color-CSS-for-consistent-UI-color-scheme.patch)
Fixed a wrong link in doc/README_FOR_APP.
Updated by Go MAEDA 28 days ago
This patch also fixes:
After applying the patch, the border color of the following UI elements will be oc-gray-4 (#ced4da).
- Table lists (list.table), Boxes (.box) and fieldsets (fieldset) border color is #e4e4e4
- Gantt (table.gantt-table) border color is #c0c0c0
- Calendar (table.cal) border color is #d7d7d7
- Separrator after tabs (#content .tabs ul), Footer (#footer) border color is #bbbbbb
- Sidebar (#sidebar), My page box (.mypage-box) border color is #dddddd
- Buttons, input fields, text areas current border color is #cccccc
Updated by Go MAEDA 28 days ago
- Related to Defect #32167: Inconsistent border coloring of UI elements? added
Updated by Go MAEDA 27 days ago
- File 0002-Replace-hex-color-codes-with-Open-Color-variables-in.patch 0002-Replace-hex-color-codes-with-Open-Color-variables-in.patch added
- File deleted (
0002-Replace-hex-color-codes-with-Open-Color-variables-in.patch)
Replaced "lavendar" (used for div.fileover) with oc-violet-0.
Updated by Marius BĂLTEANU 27 days ago
I like the ideea to standardize the color pallet and to switch to CSS variables.
Updated by Go MAEDA 26 days ago
- Status changed from New to Closed
- Assignee set to Go MAEDA
- Resolution set to Fixed
Committed the patches in r24021, r24022, and r24023.
The colors used in Redmine's CSS have been migrated from hexadecimal color codes to Open Color variables.
You can check the available colors and variable names at: https://github.com/yeun/open-color/



