|
/* Paul Tol's Diverging Color Palettes |
|
Source: https://personal.sron.nl/~pault/ */ |
|
|
|
:root { |
|
/* Sunset Palette */ |
|
--sunset-1: #364B9A; |
|
--sunset-2: #4A7BB7; |
|
--sunset-3: #6EA6CD; |
|
--sunset-4: #98CAE1; |
|
--sunset-5: #C2E4EF; |
|
--sunset-6: #EAECCC; |
|
--sunset-7: #FEDA8B; |
|
--sunset-8: #FDB366; |
|
--sunset-9: #F67E4B; |
|
--sunset-10: #DD3D2D; |
|
--sunset-11: #A50026; |
|
--sunset-bad: #FFFFFF; /* For missing/invalid data */ |
|
|
|
/* Nightfall Palette */ |
|
--nightfall-1: #125A56; |
|
--nightfall-2: #00767B; |
|
--nightfall-3: #238F9D; |
|
--nightfall-4: #42A7C6; |
|
--nightfall-5: #60BCE9; |
|
--nightfall-6: #9DCCEF; |
|
--nightfall-7: #C6DBED; |
|
--nightfall-8: #DEE6E7; |
|
--nightfall-9: #ECEADA; |
|
--nightfall-10: #F0E6B2; |
|
--nightfall-11: #F9D576; |
|
--nightfall-12: #FFB954; |
|
--nightfall-13: #FD9A44; |
|
--nightfall-14: #F57634; |
|
--nightfall-15: #E94C1F; |
|
--nightfall-16: #D11807; |
|
--nightfall-17: #A01813; |
|
--nightfall-bad: #FFFFFF; /* For missing/invalid data */ |
|
|
|
/* BuRd Palette */ |
|
--burd-1: #2166AC; |
|
--burd-2: #4393C3; |
|
--burd-3: #92C5DE; |
|
--burd-4: #D1E5F0; |
|
--burd-5: #F7F7F7; |
|
--burd-6: #FDDBC7; |
|
--burd-7: #F4A582; |
|
--burd-8: #D6604D; |
|
--burd-9: #B2182B; |
|
--burd-bad: #FFEE99; /* For missing/invalid data */ |
|
|
|
/* PRGn Palette */ |
|
--prgn-1: #762A83; |
|
--prgn-2: #9970AB; |
|
--prgn-3: #C2A5CF; |
|
--prgn-4: #E7D4E8; |
|
--prgn-5: #F7F7F7; |
|
--prgn-6: #D9F0D3; |
|
--prgn-7: #ACD39E; |
|
--prgn-8: #5AAE61; |
|
--prgn-9: #1B7837; |
|
--prgn-bad: #FFEE99; /* For missing/invalid data */ |
|
} |
|
|
|
/* Background Color Utility Classes */ |
|
/* Sunset */ |
|
.bg-sunset-1 { background-color: var(--sunset-1); } |
|
.bg-sunset-2 { background-color: var(--sunset-2); } |
|
.bg-sunset-3 { background-color: var(--sunset-3); } |
|
.bg-sunset-4 { background-color: var(--sunset-4); } |
|
.bg-sunset-5 { background-color: var(--sunset-5); } |
|
.bg-sunset-6 { background-color: var(--sunset-6); } |
|
.bg-sunset-7 { background-color: var(--sunset-7); } |
|
.bg-sunset-8 { background-color: var(--sunset-8); } |
|
.bg-sunset-9 { background-color: var(--sunset-9); } |
|
.bg-sunset-10 { background-color: var(--sunset-10); } |
|
.bg-sunset-11 { background-color: var(--sunset-11); } |
|
.bg-sunset-bad { background-color: var(--sunset-bad); } |
|
|
|
/* Nightfall */ |
|
.bg-nightfall-1 { background-color: var(--nightfall-1); } |
|
.bg-nightfall-2 { background-color: var(--nightfall-2); } |
|
.bg-nightfall-3 { background-color: var(--nightfall-3); } |
|
.bg-nightfall-4 { background-color: var(--nightfall-4); } |
|
.bg-nightfall-5 { background-color: var(--nightfall-5); } |
|
.bg-nightfall-6 { background-color: var(--nightfall-6); } |
|
.bg-nightfall-7 { background-color: var(--nightfall-7); } |
|
.bg-nightfall-8 { background-color: var(--nightfall-8); } |
|
.bg-nightfall-9 { background-color: var(--nightfall-9); } |
|
.bg-nightfall-10 { background-color: var(--nightfall-10); } |
|
.bg-nightfall-11 { background-color: var(--nightfall-11); } |
|
.bg-nightfall-12 { background-color: var(--nightfall-12); } |
|
.bg-nightfall-13 { background-color: var(--nightfall-13); } |
|
.bg-nightfall-14 { background-color: var(--nightfall-14); } |
|
.bg-nightfall-15 { background-color: var(--nightfall-15); } |
|
.bg-nightfall-16 { background-color: var(--nightfall-16); } |
|
.bg-nightfall-17 { background-color: var(--nightfall-17); } |
|
.bg-nightfall-bad { background-color: var(--nightfall-bad); } |
|
|
|
/* BuRd */ |
|
.bg-burd-1 { background-color: var(--burd-1); } |
|
.bg-burd-2 { background-color: var(--burd-2); } |
|
.bg-burd-3 { background-color: var(--burd-3); } |
|
.bg-burd-4 { background-color: var(--burd-4); } |
|
.bg-burd-5 { background-color: var(--burd-5); } |
|
.bg-burd-6 { background-color: var(--burd-6); } |
|
.bg-burd-7 { background-color: var(--burd-7); } |
|
.bg-burd-8 { background-color: var(--burd-8); } |
|
.bg-burd-9 { background-color: var(--burd-9); } |
|
.bg-burd-bad { background-color: var(--burd-bad); } |
|
|
|
/* PRGn */ |
|
.bg-prgn-1 { background-color: var(--prgn-1); } |
|
.bg-prgn-2 { background-color: var(--prgn-2); } |
|
.bg-prgn-3 { background-color: var(--prgn-3); } |
|
.bg-prgn-4 { background-color: var(--prgn-4); } |
|
.bg-prgn-5 { background-color: var(--prgn-5); } |
|
.bg-prgn-6 { background-color: var(--prgn-6); } |
|
.bg-prgn-7 { background-color: var(--prgn-7); } |
|
.bg-prgn-8 { background-color: var(--prgn-8); } |
|
.bg-prgn-9 { background-color: var(--prgn-9); } |
|
.bg-prgn-bad { background-color: var(--prgn-bad); } |
|
|
|
/* Text Color Utility Classes */ |
|
/* Sunset */ |
|
.text-sunset-1 { color: var(--sunset-1); } |
|
.text-sunset-2 { color: var(--sunset-2); } |
|
.text-sunset-3 { color: var(--sunset-3); } |
|
.text-sunset-4 { color: var(--sunset-4); } |
|
.text-sunset-5 { color: var(--sunset-5); } |
|
.text-sunset-6 { color: var(--sunset-6); } |
|
.text-sunset-7 { color: var(--sunset-7); } |
|
.text-sunset-8 { color: var(--sunset-8); } |
|
.text-sunset-9 { color: var(--sunset-9); } |
|
.text-sunset-10 { color: var(--sunset-10); } |
|
.text-sunset-11 { color: var(--sunset-11); } |
|
.text-sunset-bad { color: var(--sunset-bad); } |
|
|
|
/* Nightfall */ |
|
.text-nightfall-1 { color: var(--nightfall-1); } |
|
.text-nightfall-2 { color: var(--nightfall-2); } |
|
.text-nightfall-3 { color: var(--nightfall-3); } |
|
.text-nightfall-4 { color: var(--nightfall-4); } |
|
.text-nightfall-5 { color: var(--nightfall-5); } |
|
.text-nightfall-6 { color: var(--nightfall-6); } |
|
.text-nightfall-7 { color: var(--nightfall-7); } |
|
.text-nightfall-8 { color: var(--nightfall-8); } |
|
.text-nightfall-9 { color: var(--nightfall-9); } |
|
.text-nightfall-10 { color: var(--nightfall-10); } |
|
.text-nightfall-11 { color: var(--nightfall-11); } |
|
.text-nightfall-12 { color: var(--nightfall-12); } |
|
.text-nightfall-13 { color: var(--nightfall-13); } |
|
.text-nightfall-14 { color: var(--nightfall-14); } |
|
.text-nightfall-15 { color: var(--nightfall-15); } |
|
.text-nightfall-16 { color: var(--nightfall-16); } |
|
.text-nightfall-17 { color: var(--nightfall-17); } |
|
.text-nightfall-bad { color: var(--nightfall-bad); } |
|
|
|
/* BuRd */ |
|
.text-burd-1 { color: var(--burd-1); } |
|
.text-burd-2 { color: var(--burd-2); } |
|
.text-burd-3 { color: var(--burd-3); } |
|
.text-burd-4 { color: var(--burd-4); } |
|
.text-burd-5 { color: var(--burd-5); } |
|
.text-burd-6 { color: var(--burd-6); } |
|
.text-burd-7 { color: var(--burd-7); } |
|
.text-burd-8 { color: var(--burd-8); } |
|
.text-burd-9 { color: var(--burd-9); } |
|
.text-burd-bad { color: var(--burd-bad); } |
|
|
|
/* PRGn */ |
|
.text-prgn-1 { color: var(--prgn-1); } |
|
.text-prgn-2 { color: var(--prgn-2); } |
|
.text-prgn-3 { color: var(--prgn-3); } |
|
.text-prgn-4 { color: var(--prgn-4); } |
|
.text-prgn-5 { color: var(--prgn-5); } |
|
.text-prgn-6 { color: var(--prgn-6); } |
|
.text-prgn-7 { color: var(--prgn-7); } |
|
.text-prgn-8 { color: var(--prgn-8); } |
|
.text-prgn-9 { color: var(--prgn-9); } |
|
.text-prgn-bad { color: var(--prgn-bad); } |
