Red
- HEX
- #F4333D
- RGB
- 244 / 51 / 61
- CMYK
- 0 / 93 / 82 / 0
Foundations
Brand colour
The default GovTech brand palettes that ship with SGDS, and the custom brand generator for agencies that want to set up their own.
Primary colour
Magenta
- HEX
- #BA2FA2
- RGB
- 186 / 47 / 162
- CMYK
- 27 / 89 / 0 / 0
Cyan
- HEX
- #00C0F3
- RGB
- 0 / 192 / 243
- CMYK
- 76 / 0 / 0 / 0
Extended colour
Blue
- HEX
- #448DDD
- RGB
- 68 / 141 / 221
- CMYK
- 69 / 34 / 0 / 0
Purple
- HEX
- #885AC6
- RGB
- 136 / 90 / 198
- CMYK
- 65 / 73 / 0 / 0
Pink
- HEX
- #E02D77
- RGB
- 224 / 45 / 119
- CMYK
- 0 / 95 / 9 / 0
Neutral colour
White
- HEX
- #FFFFFF
- RGB
- 255 / 255 / 255
- CMYK
- 0 / 0 / 0 / 0
Black
- HEX
- #0E0E0E
- RGB
- 14 / 14 / 14
- CMYK
- 0 / 0 / 0 / 95
The tables below map the GovTech brand onto SGDS primary tokens. These ship with the system by default, ready for any product to use as-is. If your product has its own brand colour, switch to the Custom colour tab to generate the same primary structure from your hex value instead.
GovTech blue colour
sgds-product-primary-100#EFF5FCrgba(239, 245, 252, 1)sgds-product-primary-200#CEE1F6rgba(206, 225, 246, 1)sgds-product-primary-300#A0C5EErgba(160, 197, 238, 1)sgds-product-primary-400#73A9E5rgba(115, 169, 229, 1)sgds-product-primary-500#4288D6rgba(66, 136, 214, 1)sgds-product-primary-600#356DACrgba(53, 109, 172, 1)sgds-product-primary-700#285483rgba(40, 84, 131, 1)sgds-product-primary-800#1E3E62rgba(30, 62, 98, 1)sgds-product-primary-900#152B44rgba(21, 43, 68, 1)GovTech cyan colour
sgds-product-primary-100#E0F7FErgba(224, 247, 254, 1)sgds-product-primary-200#A7E9FBrgba(167, 233, 251, 1)sgds-product-primary-300#47D1F6rgba(71, 209, 246, 1)sgds-product-primary-400#00B3E2rgba(0, 179, 226, 1)sgds-product-primary-500#0091B8rgba(0, 145, 184, 1)sgds-product-primary-600#007493rgba(0, 116, 147, 1)sgds-product-primary-700#005971rgba(0, 89, 113, 1)sgds-product-primary-800#004355rgba(0, 67, 85, 1)sgds-product-primary-900#002E3Brgba(0, 46, 59, 1)GovTech magenta colour
sgds-product-primary-100#FBF2F9rgba(251, 242, 249, 1)sgds-product-primary-200#F2D8EDrgba(242, 216, 237, 1)sgds-product-primary-300#E5B2DCrgba(229, 178, 220, 1)sgds-product-primary-400#D98BCBrgba(217, 139, 203, 1)sgds-product-primary-500#C95EB7rgba(201, 94, 183, 1)sgds-product-primary-600#B82EA0rgba(184, 46, 160, 1)sgds-product-primary-700#8E247Brgba(142, 36, 123, 1)sgds-product-primary-800#6A1B5Drgba(106, 27, 93, 1)sgds-product-primary-900#4A1341rgba(74, 19, 65, 1)GovTech pink colour
sgds-product-primary-100#FDF0F6rgba(253, 240, 246, 1)sgds-product-primary-200#F9D6E4rgba(249, 214, 228, 1)sgds-product-primary-300#F3AECBrgba(243, 174, 203, 1)sgds-product-primary-400#ED84AFrgba(237, 132, 175, 1)sgds-product-primary-500#E54D8Crgba(229, 77, 140, 1)sgds-product-primary-600#C7286Argba(199, 40, 106, 1)sgds-product-primary-700#991F52rgba(153, 31, 82, 1)sgds-product-primary-800#74173Drgba(116, 23, 61, 1)sgds-product-primary-900#51102Brgba(81, 16, 43, 1)GovTech purple colour
sgds-product-primary-100#F6F3FBrgba(246, 243, 251, 1)sgds-product-primary-200#E5DBF2rgba(229, 219, 242, 1)sgds-product-primary-300#CEBAE7rgba(206, 186, 231, 1)sgds-product-primary-400#B598DCrgba(181, 152, 220, 1)sgds-product-primary-500#9A74CFrgba(154, 116, 207, 1)sgds-product-primary-600#8055BBrgba(128, 85, 187, 1)sgds-product-primary-700#634190rgba(99, 65, 144, 1)sgds-product-primary-800#49306Brgba(73, 48, 107, 1)sgds-product-primary-900#33214Argba(51, 33, 74, 1)GovTech red colour
sgds-product-primary-100#FEF0F1rgba(254, 240, 241, 1)sgds-product-primary-200#FDD6D8rgba(253, 214, 216, 1)sgds-product-primary-300#FBADB1rgba(251, 173, 177, 1)sgds-product-primary-400#F88289rgba(248, 130, 137, 1)sgds-product-primary-500#F5424Brgba(245, 66, 75, 1)sgds-product-primary-600#CB2B33rgba(203, 43, 51, 1)sgds-product-primary-700#9E2127rgba(158, 33, 39, 1)sgds-product-primary-800#76191Ergba(118, 25, 30, 1)sgds-product-primary-900#531115rgba(83, 17, 21, 1)Colour contrast ratios
Colour contrast ratios measure whether text is readable against a background.
WCAG (Web Content Accessibility Guidelines) is the international accessibility standard most government services follow. It scores contrast as a single ratio between 1 (no contrast) and 21 (black on white). Body text needs at least 4.5 to meet the AA conformance level. Large text needs at least 3, since bigger letters are easier to read.
APCA (Accessible Perceptual Contrast Algorithm) is a newer model that's more accurate for real reading. As a rough guide, body text needs an absolute value around 60 or higher.
Generate a custom primary palette from your agency's brand colour. Enter a hex value or use the colour picker, and the generator will produce the full sgds-product-primary-100 through sgds-product-primary-900 ramp aligned to the SGDS scale.
sgds-product-primary-100#F4F2FErgba(244, 242, 254, 1)sgds-product-primary-200#E1DBFBrgba(225, 219, 251, 1)sgds-product-primary-300#C5BAF7rgba(197, 186, 247, 1)sgds-product-primary-400#A999F3rgba(169, 153, 243, 1)sgds-product-primary-500#8973EFrgba(137, 115, 239, 1)sgds-product-primary-600#6B4FEBrgba(107, 79, 235, 1)sgds-product-primary-700#523DB4rgba(82, 61, 180, 1)sgds-product-primary-800#3E2D87rgba(62, 45, 135, 1)sgds-product-primary-900#2B1F5Ergba(43, 31, 94, 1)Colour contrast ratios
Colour contrast ratios measure whether text is readable against a background.
WCAG (Web Content Accessibility Guidelines) is the international accessibility standard most government services follow. It scores contrast as a single ratio between 1 (no contrast) and 21 (black on white). Body text needs at least 4.5 to meet the AA conformance level. Large text needs at least 3, since bigger letters are easier to read.
APCA (Accessible Perceptual Contrast Algorithm) is a newer model that's more accurate for real reading. As a rough guide, body text needs an absolute value around 60 or higher.