Color
Color follows the brand guidelines of The World Bank. Additional colors were created for the digital platform and accessibility.
World Bank Brand
-
$lp-color-blue-13; #002244;
brand dark blue used only in main navigation and WB logo, may also be used in some charts and graphs
-
$lp-color-blue-61; #009FDA;
brand blue used sparingly in graphs, charts, main navigation and can be used as a background in rows
-
$lp-color-neutral-100; #ffffff;
white used in backgrounds, text/links on dark/color backgrounds, button background
-
$lp-color-neutral-0; #000000;
Container Backgrounds
Grayscale
| Backgrounds color | #ffffff | #fafafa | #F2F2F2 | #e6e6e6 | #CCCCCC | #666666 | #4D4D4D | #262626 | #1A1A1A | #000000 | #0071bc |
|---|---|---|---|---|---|---|---|---|---|---|---|
|
$lp-color-neutral-0: #000000;
|
Aa | Aa | Aa | Aa | Aa | NA | NA | NA | NA | NA | NA |
|
$lp-color-neutral-9: #1A1A1A;
|
Aa | Aa | Aa | Aa | Aa | NA | NA | NA | NA | NA | NA |
|
$lp-color-neutral-15: #262626;
|
Aa | Aa | Aa | Aa | Aa | NA | NA | NA | NA | NA | NA |
|
$lp-color-neutral-33: #4D4D4D;
|
Aa | Aa | Aa | Aa | Aa | NA | NA | NA | NA | NA | NA |
|
$lp-color-neutral-43: #666666;
|
Aa | Aa | Aa | Aa | NA | NA | NA | NA | NA | NA | NA |
|
$lp-color-neutral-82: #CCCCCC;
|
NA | NA | NA | NA | NA | NA | Aa | Aa | Aa | Aa | NA |
|
$lp-color-neutral-91: #e6e6e6;
|
NA | NA | NA | NA | NA | Aa | Aa | Aa | Aa | Aa | NA |
|
$lp-color-neutral-95: #F2F2F2;
|
NA | NA | NA | NA | NA | Aa | Aa | Aa | Aa | Aa | Aa |
|
$lp-color-neutral-98: #fafafa;
|
NA | NA | NA | NA | NA | Aa | Aa | Aa | Aa | Aa | Aa |
|
$lp-color-neutral-100: #ffffff;
|
NA | NA | NA | NA | NA | Aa | Aa | Aa | Aa | Aa | Aa |
Accent Blue
| Backgrounds color | #ffffff | #F6FCFF | #E9F7FD | #CDE7F9 | #A3DAFF | #0071bc | #00538A | #004370 | #053657 |
|---|---|---|---|---|---|---|---|---|---|
|
$lp-color-blue-21: #053657;
|
Aa | Aa | Aa | Aa | Aa | NA | NA | NA | NA |
|
$lp-color-blue-27: #004370;
|
Aa | Aa | Aa | Aa | Aa | NA | NA | NA | NA |
|
$lp-color-blue-33: #00538A;
|
Aa | Aa | Aa | Aa | Aa | NA | NA | NA | NA |
|
$lp-color-blue-45: #0071bc;
|
Aa | Aa | Aa | NA | NA | NA | NA | NA | NA |
|
$lp-color-blue-84: #A3DAFF;
|
NA | NA | NA | NA | NA | NA | Aa | Aa | Aa |
|
$lp-color-blue-90: #CDE7F9;
|
NA | NA | NA | NA | NA | NA | Aa | Aa | Aa |
|
$lp-color-blue-96: #E9F7FD;
|
NA | NA | NA | NA | NA | Aa | Aa | Aa | Aa |
|
$lp-color-blue-99: #F6FCFF;
|
NA | NA | NA | NA | NA | Aa | Aa | Aa | Aa |
Notifications Colors
-
#0071bc$lp-color-blue-45; #0071bc;
-
#3A8604$lp-color-green-50; #3A8604;
-
#C52816$lp-color-red-44: #C52816;
-
#CC8500$lp-color-yellow-62: #CC8500;
Accent Colors Base
-
#169AF3$lp-Accent-blue-61 :#169AF3;
-
#4CBB88$lp-Accent-green-69: #4CBB88;
-
#FD1CAA$lp-Accent-magenta-57: #FD1CAA;
-
#EC553A$lp-Accent-orange-57: #EC553A;
-
#B25DFE$lp-Accent-purple-56: #B25DFE;
-
#0298AC$lp-Accent-teal-57: #0298AC;
-
#FDB714$lp-Accent-yellow-80: #FDB714;
Accessible Colors
Blue
02
03
04
05
06
07
08
09
Green
02
03
04
05
06
07
08
09
Magenta
02
03
04
05
06
07
08
09
Orange
02
03
04
05
06
07
08
09
Teal
02
03
04
05
06
07
08
09
Yellow
02
03
04
05
08
09