Colours
In order to remain consistent in our user interfaces and to help achieve a better user experience, we have set guidelines on colour usage for DOAJ.org as we as all DOAJ-related digital platforms and print media. We are continuing to improve on better guidance regarding meaningful colour usage.
No colours used on any DOAJ page should deviate from this palette.
If using our SCSS stylesheets, as on the website, make sure to use the variable (e.g. $grapefruit) exclusively, and never the HSL or HEX codes.
| Name | HSL (preferred) | HEX |
|---|---|---|
| Greyscale | ||
$white |
hsl(0, 0%, 100%) |
#FFFFFF |
$light-grey |
hsl(0, 10%, 96%) |
#F6F4F4 |
$dark-grey |
hsl(30, 3%, 35%) |
#5C5956 |
$warm-black |
hsl(30, 5%, 15%) |
#282624 |
| Primary colours | ||
$sanguine |
hsl(15, 88%, 32%) |
#982E0A |
$grapefruit |
hsl(10, 98%, 61%) |
#FD5A3B |
$salmon |
hsl(10, 98%, 61%) |
#FA9A87 |
| Secondary colours | ||
$dark-green |
hsl(180, 21%, 29%) |
#3A5959 |
$mid-green |
hsl(153, 39%, 45%) |
#47A178 |
$light-green |
hsl(91, 34%, 65%) |
#A3C386 |
$yellow |
hsl(49, 93%, 65%) |
#F9D950 |
Accessible combinations
Not all colours can be mixed together if we want content to be accessible for users with colour vision deficiencies (CVDs). Graphical and non-essential page elements (i.e. not required to understand the content) are not bound by these combinations.
The following are the acceptable (WCAG AA-compliant) combinations of colours for text and background.