Contrast Grid

– Visualization of All colours & their contrast. Do not use colour combinations that DNP

$base: #165788;

$black: #000000;

$white: #ffffff;

$gray0: #f8f8f8; /* orig #f9f9f9 */

$gray1: #ecedee;

$gray2: #dfe0e2;

$gray3: #d0d3d5;

$gray4: #c0c4c7;

$gray5: #aeb3b7;

$gray6: #9aa0a5;

$gray7: #828a90;

$gray8: #6e757c; /* orig #646d74 */

$gray9: #374047;

$blue0: #f1f6fa; /*orig #e7eef3; */

$blue1: #cddbe5;

$blue2: #afc6d6;

$blue3: #6A9AB4;/* orig: #8bacc4; */

$blue4: #5e8cac;

$blue5: #165988;

$blue6: #134f7a;

$blue7: #114569;

$blue8: #0d3856;

$blue9: #09263b;

$indigo0: #eaebf4;

$indigo1: #d3d5e8;

$indigo2: #b9bcdb;

$indigo3: #999dcb;

$indigo4: #6e73b5;

$indigo5: #161f88;

$indigo6: #131b79;

$indigo7: #101767;

$indigo8: #0d1252;

$indigo9: #080c35;

$violet0: #eeeaf4;

$violet1: #dcd3e8;

$violet2: #c6b8db;

$violet3: #ad98ca;

$violet4: #8a6cb4;

$violet5: #451688;

$violet6: #3d1379;

$violet7: #351068;

$violet8: #2a0d53;

$violet9: #1c0837;

$fuschia0: #f3e9f4;

$fuschia1: #e6d2e8;

$fuschia2: #d7b6da;

$fuschia3: #c495c9;

$fuschia4: #ac69b2;

$fuschia5: #7e1688;

$fuschia6: #71137a;

$fuschia7: #62116a;

$fuschia8: #500e56;

$fuschia9: #37093b;

$pink0: #f4eaf0;

$pink1: #e8d2df;

$pink2: #dab7cb;

$pink3: #c996b4;

$pink4: #b36a94;

$pink5: #881659;

$pink6: #7a134f;

$pink7: #6a1145;

$pink8: #560e38;

$pink9: #3b0927;

$red0: #f4eaeb;

$red1: #e8d3d4;

$red2: #dab8ba;

$red3: #ca979b;

$red4: #b36b71;

$red5: #88161f;

$red6: #7a131b;

$red7: #6a1118;

$red8: #560d13;

$red9: #3b090d;

$orange0: #f2ece7;

$orange1: #e5d7cc;

$orange2: #d6bfae;

$orange3: #c3a38b;

$orange4: #ac7e5d;

$orange5: #884616;

$orange6: #7a3e13;

$orange7: #6a3611;

$orange8: #562c0d;

$orange9: #3b1e09;

$yellow0: #f1f0e3;

$yellow1: #e2dfc6;

$yellow2: #d1cda5;

$yellow3: #bdb87e;

$yellow4: #a69f51;

$yellow5: #887f16;

$yellow6: #7a7213;

$yellow7: #6b6311;

$yellow8: #58520e;

$yellow9: #3e3a0a;

$lime0: #ecf1e4;

$lime1: #d7e2c7;

$lime2: #bfd1a6;

$lime3: #a4be80;

$lime4: #84a652;

$lime5: #598816;

$lime6: #507a13;

$lime7: #466b11;

$lime8: #39580e;

$lime9: #283e0a;

$green0: #e7f2e5;

$green1: #cce4ca;

$green2: #aed3aa;

$green3: #8ac085;

$green4: #5ea957;

$green5: #208816;

$green6: #1c7a13;

$green7: #196b11;

$green8: #14580e;

$green9: #0e3e0a;

$teal0: #e5f2ea;

$teal1: #c9e3d4;

$teal2: #aad3bb;

$teal3: #85c09e;

$teal4: #56a979;

$teal5: #168846;

$teal6: #137a3f;

$teal7: #116b37;

$teal8: #0e582d;

$teal9: #0a3e20;

$cyan0: #e5f1f0;

$cyan1: #c9e3e1;

$cyan2: #a9d3cf;

$cyan3: #83c0bb;

$cyan4: #55a8a1;

$cyan5: #16887f;

$cyan6: #137a72;

$cyan7: #116b64;

$cyan8: #0e5852;

$cyan9: #0a3e3a

Browser not supported