Colour
Always use the BCLC colour palette.
Colour contrast
Please ensure that the contrast ratio of text and interactive elements on your page meets level AA of the Web Content Accessibility Guidelines (WCAG 2.1).
Main Colours
Primary Colours
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_1699667597/image.coreimg.png/1583961404771/bclc-green---7dbc13%3B.png)
BCLC Green
background: #7DBC13;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_1684443302/image.coreimg.png/1583961394032/bclc-orange---e86a10.png)
BCLC Orange
background: #E86A10;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co/image.coreimg.png/1583961420609/bclc-red---9b1831.png)
BCLC Red
background: #9B1831;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container/image.coreimg.png/1583961432360/bclc-grey---414b56.png)
BCLC Grey
background: #414B56;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_60081379/image.coreimg.png/1583961568189/bclc-green-15---7dbc13.png)
BCLC Green 15%
opacity: 0.15%;
background: #7DBC13;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_1228464056/image.coreimg.png/1583961584178/bclc-orange--15---e86a10.png)
BCLC Orange 15%
opacity: 0.15%;
background: #E86A10;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_809859893/image.coreimg.png/1583961592303/bclc-red--15---9b1831.png)
BCLC Red 15%
opacity: 0.15%;
background: #9B1831;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_2058523983/image.coreimg.png/1583961599192/bclc-grey--15---414b56.png)
BCLC Grey 15%
opacity: 0.15%;
background: #414B56;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_605426886/image.coreimg.png/1583961999493/bclc-dark-green---5b890e.png)
BCLC Dark Green
background: #5B890E;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_2109049042/image.coreimg.png/1583962001871/bclc-dark-orange---c45a0e.png)
BCLC Dark Orange
background: #C45A0E;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_2053813290/image.coreimg.png/1583962003737/bclc-dark-red---711224.png)
BCLC Dark Red
background: #711224;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_1529251113/image.coreimg.png/1583962006737/bclc-dark-grey---272e35.png)
BCLC Dark Grey
background: #272E35;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_1747954980/image.coreimg.png/1583962755981/bclc-soft-green---f5fbea.png)
BCLC Soft Green
background: #F5FBEA;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_1213403176/image.coreimg.png/1583962759770/bclc-soft-orange---fef6f0.png)
BCLC Soft Orange
background: #FEF6F0;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_107718839/image.coreimg.png/1583962768270/bclc-soft-red---fff1f3.png)
BCLC Soft Red
background: #FFF1F3;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_1645472765/image.coreimg.png/1583962774398/bclc-soft-grey---f4f5f5.png)
BCLC Soft Grey
background: #F4F5F5;
Secondary Colours
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_2034714602/image.coreimg.png/1583963235784/light-grey.png)
Light Grey
background: #F2F2F3;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_1159100892/image.coreimg.png/1583963237113/mid-grey.png)
Mid Grey
background: #D8D8D8;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_104671379/image.coreimg.png/1583963239022/dark-grey.png)
Dark Grey
background: #7A7A7A;
Brand Colours
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_1239332788/image.coreimg.png/1583961404771/bclc-green---7dbc13%3B.png)
BCLC Green
background: #7DBC13;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_1396974094/image.coreimg.png/1583961394032/bclc-orange---e86a10.png)
BCLC Orange
background: #E86A10;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_415241700/image.coreimg.png/1583961420609/bclc-red---9b1831.png)
BCLC Red
background: #9B1831;
Text
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_1383704369/image.coreimg.png/1583961432360/bclc-grey---414b56.png)
BCLC Grey
background: #414B56;
Links
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_2120163855/image.coreimg.png/1583961394032/bclc-orange---e86a10.png)
BCLC Orange
background: #E86A10;
Error State
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_1064678821/image.coreimg.png/1583961420609/bclc-red---9b1831.png)
BCLC Red
background: #9B1831;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_1080815266/image.coreimg.png/1583962768270/bclc-soft-red---fff1f3.png)
BCLC Soft Red
background: #FFF1F3;
Borders
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_2028734071/image.coreimg.png/1583961404771/bclc-green---7dbc13%3B.png)
BCLC Green
background: #7DBC13;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_1395871073/image.coreimg.png/1583961394032/bclc-orange---e86a10.png)
BCLC Orange
background: #E86A10;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_1375614496/image.coreimg.png/1583961432360/bclc-grey---414b56.png)
BCLC Grey
background: #414B56;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_1249653809/image.coreimg.png/1583963237113/mid-grey.png)
Mid Grey
background: #D8D8D8;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_1822635/image.coreimg.png/1583963235784/light-grey.png)
Light Grey
background: #F2F2F3;
Gradients
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_338683880/image.coreimg.png/1583965350267/bclc-grey-to-clear.png)
BCLC Grey to Clear
background: #414B56;
background: #FFFFFF;
![](https://corporate.bclc.com/documentation/design-system/styles/colour/_jcr_content/root/responsivegrid/section_container_co_663368267/image.coreimg.png/1583965353058/grey-to-clear.png)
Grey to Clear
background: #F4F5F5;
background: #FFFFFF;