[{"data":1,"prerenderedAt":384},["ShallowReactive",2],{"page-color-published":3},{"id":4,"documentId":5,"title":6,"slug":7,"description":8,"seoTitle":9,"seoDescription":9,"seoKeywords":9,"createdAt":10,"updatedAt":11,"publishedAt":12,"blocks":13},157,"m6yhp9dp4obl02z6n3opsjj5","Color","color","Progressive Color Palette ",null,"2026-06-17T15:46:33.445Z","2026-06-25T17:37:42.079Z","2026-06-25T17:37:42.108Z",[14,24,376],{"id":15,"items":16,"__component":23},27,[17,21],{"id":18,"title":19,"link":20},53,"The Visuals","\u002Flogo",{"id":22,"title":6,"link":9},54,"page.breadcrumb-nav",{"id":25,"navAnchor":9,"title":6,"content":26,"buttons":27,"items":32,"__component":375},30,"",[28],{"id":25,"label":29,"icon":30,"url":31},"Minimum Contrast Checker","external","https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F",[33,69],{"id":22,"title":34,"content":35,"blocks":36},"Primary Palette","Progressive’s primary color palette is made up of Progressive blue and white. These colors portray stability, reliability, and trust—all very important things for an insurance company! It’s important to rely on our primary palette for brand recognition, consistency, and equity. When in the digital space, remember to always double-check you’re meeting WCAG AA accessibility standards (or above) by using a [minimum contrast checker](https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F).",[37],{"id":38,"navAnchor":39,"title":9,"content":9,"palettes":40,"__component":68},119,"primary-palette",[41,48,54,61],{"id":42,"title":43,"hex":44,"rgb":45,"cmyk":46,"pantone":47,"tint":9},559,"Progressive Blue","#0077B3","0, 119, 179","100, 47, 0, 0","2935 C",{"id":49,"title":50,"hex":51,"rgb":52,"cmyk":53,"pantone":9,"tint":9},560,"White","#ffffff","255, 255, 255","0, 0, 0, 0",{"id":55,"title":56,"hex":57,"rgb":58,"cmyk":59,"pantone":60,"tint":9},561,"Steel Blue 900","#0A3360","10, 51, 96","100, 78, 36, 29","2955 C",{"id":62,"title":63,"hex":64,"rgb":65,"cmyk":66,"pantone":67,"tint":9},562,"Gray 900","#2D2D2D","45, 45, 45","0, 0, 0, 85","Black C","page.color-palette",{"id":70,"title":71,"content":72,"blocks":73},55,"Full Palette","For our extended color palette, we wanted to incorporate a unique spectrum filled with fresh, vibrant colors that emulate our brand essence. Looking for innovative ways to define ourselves as a brand, we knew we could take our primary color palette of Progressive blue and white to the next level with modern and muted tones that create a calm, lighthearted feel—evoking feelings of credibility, trust, and openness. We also incorporated a unique spectrum of secondary and tertiary colors that are fresh and vibrant and speak to the individuality of our users.\n\nMany of these colors do not pass our accessibility standards for text or any other essential elements in a functioning digital experience. So—you guessed it—be sure to [check for proper contrast](https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F)!",[74,110,149,213,253,294,335],{"id":75,"navAnchor":76,"title":77,"content":78,"palettes":79,"__component":68},120,"full-palette","Grays","In the context of user interface (UI), use grays generally as borders, containers, and rule lines. They can also be used in icons and illustrations. **For body copy in print pieces, be sure to use 100% black to avoid dot gain.**",[80,82,89,96,103],{"id":81,"title":63,"hex":64,"rgb":65,"cmyk":66,"pantone":67,"tint":9},563,{"id":83,"title":84,"hex":85,"rgb":86,"cmyk":87,"pantone":67,"tint":88},564,"Gray 700","#707070","112, 112, 112","0, 0, 0, 65","65% tint",{"id":90,"title":91,"hex":92,"rgb":93,"cmyk":94,"pantone":67,"tint":95},565,"Gray 500","#A6A6A6","166, 166, 166","0, 0, 0, 40","40% tint",{"id":97,"title":98,"hex":99,"rgb":100,"cmyk":101,"pantone":67,"tint":102},566,"Gray 300","#CCCCCC","204, 204, 204"," 0, 0, 0, 20","20% tint",{"id":104,"title":105,"hex":106,"rgb":107,"cmyk":108,"pantone":67,"tint":109},567,"Gray 100","#F8F8F8","248, 248, 248","0, 0, 0, 5","5% tint",{"id":111,"navAnchor":112,"title":112,"content":113,"palettes":114,"__component":68},121,"Purples","In the context of UI, purples are generally utilized as an indication of help or clarification. Purple is our primary color in our Loyalty Rewards Program. They can also be utilized in icons and illustrations.",[115,122,129,136,143],{"id":116,"title":117,"hex":118,"rgb":119,"cmyk":120,"pantone":121,"tint":9},568,"Purple 900","#86318C","134, 49, 140","68, 100, 11, 2","2603",{"id":123,"title":124,"hex":125,"rgb":126,"cmyk":127,"pantone":128,"tint":9},569,"Purple 700","#BD4EC4","189, 78, 196","51, 89, 0, 0","2592 C",{"id":130,"title":131,"hex":132,"rgb":133,"cmyk":134,"pantone":128,"tint":135},570,"Purple 500","#C973C9","201, 115, 201","31, 64, 0, 0","70% tint",{"id":137,"title":138,"hex":139,"rgb":140,"cmyk":141,"pantone":128,"tint":142},571,"Purple 300","#E4B9E4","228, 185, 228","9, 27, 0, 0","30% tint",{"id":144,"title":145,"hex":146,"rgb":147,"cmyk":148,"pantone":128,"tint":109},572,"Purple 100","#F5F1F9","245, 241, 249","1, 4, 0, 0",{"id":150,"navAnchor":151,"title":151,"content":152,"palettes":153,"__component":68},122,"Blues","Blue is undeniably our brand color. It’s a color of trust. Use the blue palette generously in icons and illustrations. In the context of UI, use the blue palette generously for actionable items such as hyperlinks, CTA buttons, hover\u002Ffocus states, etc.",[154,156,163,170,176,182,189,193,200,207],{"id":155,"title":56,"hex":57,"rgb":58,"cmyk":59,"pantone":60,"tint":9},573,{"id":157,"title":158,"hex":159,"rgb":160,"cmyk":161,"pantone":162,"tint":9},574,"Steel Blue 700","#405E7C","64, 94, 124","74, 47, 33, 7","5405 C",{"id":164,"title":165,"hex":166,"rgb":167,"cmyk":168,"pantone":169,"tint":9},575,"Steel Blue 500","#91B0BF","145, 176, 191","45, 16, 15, 0","550 C",{"id":171,"title":172,"hex":173,"rgb":174,"cmyk":175,"pantone":169,"tint":142},576,"Steel Blue 300","#D1E2E5","209, 226, 229","13, 3, 4, 0",{"id":177,"title":178,"hex":179,"rgb":180,"cmyk":181,"pantone":169,"tint":109},577,"Steel Blue 100","#F4F9FA"," 244, 249, 250"," 2, 0, 0, 0",{"id":183,"title":184,"hex":185,"rgb":186,"cmyk":187,"pantone":188,"tint":9},578,"Blue 900","#2862A4","40, 98, 164","100, 65, 37, 21","3025 C",{"id":190,"title":191,"hex":44,"rgb":192,"cmyk":46,"pantone":47,"tint":9},579,"Blue 700"," 0, 119, 179",{"id":194,"title":195,"hex":196,"rgb":197,"cmyk":198,"pantone":199,"tint":9},580,"Blue 500","#4EBEE5","78, 190, 229","59, 4, 2, 0","2985 C",{"id":201,"title":202,"hex":203,"rgb":204,"cmyk":205,"pantone":206,"tint":9},581,"Blue 300","#8FD8F2","143, 216, 242","39, 2, 5, 0","2975 C",{"id":208,"title":209,"hex":210,"rgb":211,"cmyk":212,"pantone":206,"tint":109},582,"Blue 100","#F3F9FC"," 243, 249, 252","2, 0, 0, 0",{"id":214,"navAnchor":215,"title":216,"content":217,"palettes":218,"__component":68},123,"greens","Greens","In the context of UI, greens are generally used to indicate success, confirmation, or savings\u002Fdiscounts. They can also be used in icons and illustrations.\n\n",[219,226,233,241,247],{"id":220,"title":221,"hex":222,"rgb":223,"cmyk":224,"pantone":225,"tint":9},583,"Green 900","#067462","6, 116, 98","100, 36, 64, 23","329 C",{"id":227,"title":228,"hex":229,"rgb":230,"cmyk":231,"pantone":232,"tint":9},584,"Green 700","#08CAA9"," 8, 202, 169"," 83, 0, 42, 0","3265 C",{"id":234,"title":235,"hex":236,"rgb":237,"cmyk":238,"pantone":239,"tint":240},585,"Green 500","#7EE0CA"," 126, 224, 202"," 50, 0, 25, 0"," 3265 C","60% tint",{"id":242,"title":243,"hex":244,"rgb":245,"cmyk":246,"pantone":232,"tint":142},586,"Green 300","#BDEFE6","189, 239, 230","24, 0, 12, 0",{"id":248,"title":249,"hex":250,"rgb":251,"cmyk":252,"pantone":239,"tint":109},587,"Green 100","#EFFBF7","239, 251, 247","4, 0, 1, 0",{"id":254,"navAnchor":255,"title":256,"content":257,"palettes":258,"__component":68},124,"yellow","Yellows","Use yellows as accent colors primarily in icons and illustrations.",[259,266,273,280,287],{"id":260,"title":261,"hex":262,"rgb":263,"cmyk":264,"pantone":265,"tint":9},588,"Yellow 900","#A86800","168, 104, 0","32, 51, 100, 13","132 C",{"id":267,"title":268,"hex":269,"rgb":270,"cmyk":271,"pantone":272,"tint":9},589,"Yellow 700","#EFAB00","239, 171, 0"," 7, 35, 100, 0","124 C",{"id":274,"title":275,"hex":276,"rgb":277,"cmyk":278,"pantone":279,"tint":9},590,"Yellow 500","#FFD039"," 255, 208, 57","1, 18, 67, 0"," 134 C",{"id":281,"title":282,"hex":283,"rgb":284,"cmyk":285,"pantone":286,"tint":9},591,"Yellow 300","#FFE694"," 255, 230, 148"," 3, 10, 53, 0","1205 C",{"id":288,"title":289,"hex":290,"rgb":291,"cmyk":292,"pantone":293,"tint":102},592,"Yellow 100","#FFF8E5"," 255, 248, 229"," 0, 2, 9, 0"," 1205 C",{"id":295,"navAnchor":296,"title":296,"content":297,"palettes":298,"__component":68},125,"Oranges","Use oranges as accent colors primarily in icons and illustrations.\n\n",[299,306,313,320,327],{"id":300,"title":301,"hex":302,"rgb":303,"cmyk":304,"pantone":305,"tint":9},593,"Orange 900","#C05711"," 192, 87, 17"," 18, 80, 100, 8","718 C",{"id":307,"title":308,"hex":309,"rgb":310,"cmyk":311,"pantone":312,"tint":9},594,"Orange 700","#FF8A39","255, 138, 57","4, 64, 100, 0"," 716 C",{"id":314,"title":315,"hex":316,"rgb":317,"cmyk":318,"pantone":319,"tint":9},595,"Orange 500","#FFA452","255, 164, 82","0, 54, 94, 0","715 C",{"id":321,"title":322,"hex":323,"rgb":324,"cmyk":325,"pantone":326,"tint":9},596,"Orange 300","#FFCC8F"," 255, 204, 143","0, 22, 50, 0","148 C",{"id":328,"title":329,"hex":330,"rgb":331,"cmyk":332,"pantone":333,"tint":334},597,"Orange 100","#FEF5ED","254, 245, 237"," 0, 2, 4, 0"," 148 C","10% tint",{"id":336,"navAnchor":337,"title":338,"content":339,"palettes":340,"__component":68},126,"reds","Reds","In the context of UI, reds are generally used to indicate caution, alerts, or errors. They can also be utilized in icons and illustrations.\n\n",[341,348,355,362,369],{"id":342,"title":343,"hex":344,"rgb":345,"cmyk":346,"pantone":347,"tint":9},598,"Red 900","#A11B58"," 161, 27, 88","34, 100, 33, 7","234 C",{"id":349,"title":350,"hex":351,"rgb":352,"cmyk":353,"pantone":354,"tint":9},599,"Red 700","#D41659"," 212, 22, 89"," 13, 100, 36, 0"," 214 C",{"id":356,"title":357,"hex":358,"rgb":359,"cmyk":360,"pantone":361,"tint":9},600,"Red 500","#FF527B","255, 82, 123","0, 85, 24, 0"," 1915 C",{"id":363,"title":364,"hex":365,"rgb":366,"cmyk":367,"pantone":368,"tint":142},601,"Red 300"," #FFCFDE"," 255, 207, 222"," 0, 24, 5, 0","1915 C",{"id":370,"title":371,"hex":372,"rgb":373,"cmyk":374,"pantone":368,"tint":334},602,"Red 100","#FCEFF2","252, 239, 242","0, 8, 1, 0","page.accordion",{"id":377,"prevLabel":378,"prevUrl":379,"nextLabel":380,"nextUrl":381,"borderTop":382,"__component":383},73,"Flo ","\u002Fflo","Type","\u002Ftype","border-top","page.button-pagination",1782415033203]