Colours Deprecated

The following are the now deprecated George colours. They have been mapped to the new colour values which there are fewer of, hence many colours below are the same.

Basic CI Colours

These colour names are group-wide in use, but the colour values represent replacements for backwards compatibility. Please stop using those and start using new UI colours instead.

Loading demo…

George UI Colours

For backwards compatibility, the old colour variables below still exist, but the automatic mapping to the new colours might not always lead to ideal results, so please start using only the new UI colours instead.

Loading demo…

George Custom Colours

For backwards compatibility, the old colour variables below still exist, yet please start using the new custom colours instead.

Loading demo…

Colour classes

For backwards compatibility, the old colour classNames (.g-bg-g-* or .g-fg-g-*) still exist, yet please start using the new colour classes instead.

Colour CSS variables migration

Old name	New name
`$color-eg-george`	`$color-blue-400`
`$color-eg-ocean`	`$color-blue-300`
`$color-eg-sky`	`$color-blue-100`
`$color-eg-cloud`	`$color-blue-100`
`$color-eg-grey-light`	`$color-gray-100`
`$color-eg-grey`	`$color-gray-100`
`$color-eg-grey-dark`	`$color-gray-200`

`$color-g-primary-100`, `$color-g-primary-200`, `$color-g-primary-300`	`$color-blue-200`
`$color-g-primary-400`, `$color-g-primary-500`, `$color-g-primary-600`, `$color-g-primary-700`	`$color-blue-300`
`$color-g-primary-800`, `$color-g-primary-900`	`$color-blue-400`

`$color-g-secondary-100`, `$color-g-secondary-200`	`$color-gray-200`
`$color-g-secondary-300`, `$color-g-secondary-400`, `$color-g-secondary-500`	`$color-gray-300`
`$color-g-secondary-600`, `$color-g-secondary-700`, `$color-g-secondary-800`	`$color-gray-400`
`$color-g-secondary-900`	`$color-gray-400`

`$color-g-grey-100`	`$color-gray-100`
`$color-g-grey-200`, `$color-g-grey-300`, `$color-g-grey-400`	`$color-gray-200`
`$color-g-grey-500`, `$color-g-grey-600`, `$color-g-grey-700`	`$color-gray-300`
`$color-g-grey-800`, `$color-g-grey-900`	`$color-gray-400`

`$color-g-gray-025`	`$color-white`
`$color-g-gray-050`, `$color-g-gray-075`, `$color-g-gray-100`, `$color-g-gray-200`	`$color-gray-100`
`$color-g-gray-300`, `$color-g-gray-400`, `$color-g-gray-500`, `$color-g-gray-600`, `$color-g-gray-700`, `$color-g-gray-800`	`$color-blue-300`
`$color-g-gray-900`	`$color-blue-400`

`$color-g-red-025`	`$color-white`
`$color-g-red-050`, `$color-g-red-100`, `$color-g-red-200`, `$color-g-red-300`, `$color-g-red-400`, `$color-g-red-500`, `$color-g-red-600`, `$color-g-red-700`, `$color-g-red-800`, `$color-g-red-900`	`$color-ui-red`

`$color-g-orange-025`	`$color-white`
`$color-g-orange-050`, `$color-g-orange-100`, `$color-g-orange-200`, `$color-g-orange-300`, `$color-g-orange-400`, `$color-g-orange-500`, `$color-g-orange-600`, `$color-g-orange-700`, `$color-g-orange-800`, `$color-g-orange-900`	`$color-ui-yellow`

`$color-g-yellow-025`	`$color-white`
`$color-g-yellow-050`, `$color-g-yellow-100`, `$color-g-yellow-200`, `$color-g-yellow-300`, `$color-g-yellow-400`, `$color-g-yellow-500`, `$color-g-yellow-600`, `$color-g-yellow-700`, `$color-g-yellow-800`, `$color-g-yellow-900`	`$color-ui-yellow`

`$color-g-green-100`, `$color-g-green-200`, `$color-g-green-300`, `$color-g-green-400`, `$color-g-green-500`, `$color-g-green-600`, `$color-g-green-700`, `$color-g-green-800`, `$color-g-green-900`	`$color-ui-green`

`$color-g-white`	`$color-white`
`$color-g-black`	`$color-black`
`$color-g-transparent`	`$color-transparent`

`$color-g-honey`	`$color-honey`
`$color-g-carrot`	`$color-carrot`
`$color-g-berry`	`$color-berry`
`$color-g-rose`	`$color-rose`
`$color-g-lavender`	`$color-lavender`
`$color-g-lila`	`$color-lila`
`$color-g-indigo`	`$color-indigo`
`$color-g-pool`	`$color-pool`
`$color-g-teal`	`$color-teal`
`$color-g-lime`	`$color-lime`
`$color-g-forest`	`$color-forest`
`$color-g-stone`	`$color-stone`

Colour classes migration

Old name	New name
`.color-g-bg-*`	`.color-bg-*`
`.color-g-fg-*`	`.color-fg-*`

Colour enums migration

Old name	New name
`GEORGE`	`BLUE_400`
`OCEAN`	`BLUE_300`
`SKY`	`BLUE_100`
`CLOUD`	`BLUE_100`
`GREY_LIGHT`	`GRAY_100`
`GREY`	`GRAY_100`
`GREY_DARK`	`GRAY_200`

`PRIMARY_100`, `PRIMARY_200`, `PRIMARY_300`	`BLUE_200`
`PRIMARY_400`, `PRIMARY_500`, `PRIMARY_600`, `PRIMARY_700`	`BLUE_300`
`PRIMARY_800`, `PRIMARY_900`	`BLUE_400`

`SECONDARY_100`, `SECONDARY_200`	`GRAY_200`
`SECONDARY_300`, `SECONDARY_400`, `SECONDARY_500`	`GRAY_300`
`SECONDARY_600`, `SECONDARY_700`, `SECONDARY_800`	`GRAY_400`
`SECONDARY_900`	`GRAY_400`

`GREY_100`	`GRAY_100`
`GREY_200`, `GREY_300`, `GREY_400`	`GRAY_200`
`GREY_500`, `GREY_600`, `GREY_700`	`GRAY_300`
`GREY_800`, `GREY_900`	`GRAY_400`

`ACTIVE_025`	`WHITE`
`ACTIVE_050`, `ACTIVE_075`, `ACTIVE_100`, `ACTIVE_200`	`GRAY_100`
`ACTIVE_300`, `ACTIVE_400`, `ACTIVE_500`, `ACTIVE_600`, `ACTIVE_700`, `ACTIVE_800`	`BLUE_300`
`ACTIVE_900`	`BLUE_400`

`RED_025`	`WHITE`
`RED_050`, `RED_100`, `RED_200`, `RED_300`, `RED_400`, `RED_500`, `RED_600`, `RED_700`, `RED_800`, `RED_900`	`UI_RED`

`ORANGE_025`	`WHITE`
`ORANGE_050`, `ORANGE_100`, `ORANGE_200`, `ORANGE_300`, `ORANGE_400`, `ORANGE_500`, `ORANGE_600`, `ORANGE_700`, `ORANGE_800`, `ORANGE_900`	`UI_YELLOW`

`YELLOW_025`	`WHITE`
`YELLOW_050`, `YELLOW_100`, `YELLOW_200`, `YELLOW_300`, `YELLOW_400`, `YELLOW_500`, `YELLOW_600`, `YELLOW_700`, `YELLOW_800`, `YELLOW_900`	`UI_YELLOW`

`GREEN_100`, `GREEN_200`, `GREEN_300`, `GREEN_400`, `GREEN_500`, `GREEN_600`, `GREEN_700`, `GREEN_800`, `GREEN_900`	`UI_GREEN`

Hex values migration

Old hex value	New hex value
`#000000`	`#000000`
`#ffffff`	`#ffffff`
`transparent`	`transparent`
`#00497b`	`#21416c`
`#005b94`	`#1a67d2`
`#bce4fa`	`#e7f3fb`
`#dff2fd`	`#e7f3fb`
`#f5f8fa`	`#f4f6fa`
`#e6ebf0`	`#f4f6fa`
`#ccd7e1`	`#e4eaf0`
`#ffd32a`	`#ffd32a`
`#ff7644`	`#ff7644`
`#e1015b`	`#e1015b`
`#e86795`	`#e86795`
`#aa4bb3`	`#aa4bb3`
`#6c4aae`	`#6c4aae`
`#2f2d91`	`#2f2d91`
`#199cf9`	`#199cf9`
`#02a3a4`	`#02a3a4`
`#50c85b`	`#50c85b`
`#028661`	`#028661`
`#245375`	`#245375`
`#73aad1`	`#96c2ea`
`#599bc9`	`#96c2ea`
`#408cc1`	`#96c2ea`
`#1a74b4`	`#1a67d2`
`#0065ac`	`#1a67d2`
`#005b9b`	`#1a67d2`
`#00518a`	`#1a67d2`
`#004778`	`#21416c`
`#00385f`	`#21416c`
`#b8c4d1`	`#e4eaf0`
`#a7b6c7`	`#e4eaf0`
`#96aac0`	`#a3b5c9`
`#8198b3`	`#a3b5c9`
`#738dab`	`#a3b5c9`
`#67809d`	`#5c7999`
`#60768f`	`#5c7999`
`#536a82`	`#5c7999`
`#445c75`	`#21416c`
`#fcfcfc`	`#f4f6fa`
`#f6f6f6`	`#e4eaf0`
`#ededed`	`#e4eaf0`
`#e3e3e3`	`#e4eaf0`
`#d7d7d7`	`#a3b5c9`
`#c9c9c9`	`#a3b5c9`
`#c2c2c2`	`#a3b5c9`
`#b4b4b4`	`#5c7999`
`#a8a8a8`	`#5c7999`
`#bfe9ff`	`#ffffff`
`#a6e1ff`	`#f4f6fa`
`#8cd8ff`	`#f4f6fa`
`#73cfff`	`#f4f6fa`
`#59c6ff`	`#f4f6fa`
`#40beff`	`#1a67d2`
`#1ab1ff`	`#1a67d2`
`#00a8ff`	`#1a67d2`
`#0097e6`	`#1a67d2`
`#0086cc`	`#1a67d2`
`#0076b3`	`#1a67d2`
`#005480`	`#21416c`
`#ffe6e6`	`#ffffff`
`#ffd7d7`	`#e72222`
`#ffbdbd`	`#e72222`
`#ffa2a2`	`#e72222`
`#ff9090`	`#e72222`
`#ff8080`	`#e72222`
`#ff6666`	`#e72222`
`#ff5555`	`#e72222`
`#e64d4d`	`#e72222`
`#cc4444`	`#e72222`
`#b33c3c`	`#e72222`
`#802b2b`	`#e72222`
`#ffdebf`	`#ffffff`
`#ffd0a6`	`#f2a91e`
`#ffc38c`	`#f2a91e`
`#ffb573`	`#f2a91e`
`#ffa859`	`#f2a91e`
`#ff9b40`	`#f2a91e`
`#ff861a`	`#f2a91e`
`#ff7900`	`#f2a91e`
`#e66d00`	`#f2a91e`
`#cc6100`	`#f2a91e`
`#b35500`	`#f2a91e`
`#803d00`	`#f2a91e`
`#fff0c9`	`#ffffff`
`#ffeab3`	`#f2a91e`
`#ffe49d`	`#f2a91e`
`#fedf87`	`#f2a91e`
`#fed971`	`#f2a91e`
`#fed35c`	`#f2a91e`
`#feca3b`	`#f2a91e`
`#fec425`	`#f2a91e`
`#f8b61d`	`#f2a91e`
`#f2a715`	`#f2a91e`
`#ec990b`	`#f2a91e`
`#e68a00`	`#f2a91e`
`#73d5a4`	`#00ab56`
`#5acd94`	`#00ab56`
`#41c583`	`#00ab56`
`#1aba6b`	`#00ab56`
`#01b25a`	`#00ab56`
`#01a051`	`#00ab56`
`#018e48`	`#00ab56`
`#017d3f`	`#00ab56`
`#01592d`	`#00ab56`
`#003366`	`#003366`
`#e8ecf0`	`#ffffff`
`#d6dde4`	`#e4eaf0`
`#c6d0da`	`#e4eaf0`