lta.org.uk

Source code

Color Palette (75 colors)

Core Colors

Example	Description	Token
`#006AB5` `rgb(0, 106, 181)` `var(--color-lta-blue)`	lta blue	`colors.$color-lta-blue$lta-blue.u-text-lta-blue.u-bg-lta-blueu-lta-theme--{1, 2}-lta-blue`
`#0068FF` `rgb(0, 104, 255)` `var(--color-lta-new-blue)`	lta new blue	`colors.$color-lta-new-blue$lta-new-blue.u-text-lta-new-blue.u-bg-lta-new-blueu-lta-theme--{1, 2}-lta-new-blue`
`#006AB5` `rgb(0, 106, 181)` `var(--color-lta-blue-tint)`	lta blue tint	`colors.$color-lta-blue-tint$lta-blue-tint.u-text-lta-blue-tint.u-bg-lta-blue-tintu-lta-theme--{1, 2}-lta-blue-tint`
`#408627` `rgb(64, 134, 39)` `var(--color-lta-green-dark)`	lta green dark	`colors.$color-lta-green-dark$lta-green-dark.u-text-lta-green-dark.u-bg-lta-green-darku-lta-theme--{1, 2}-lta-green-dark`
`#16316F` `rgb(22, 49, 111)` `var(--color-lta-dark-blue)`	lta dark blue	`colors.$color-lta-dark-blue$lta-dark-blue.u-text-lta-dark-blue.u-bg-lta-dark-blueu-lta-theme--{1, 2}-lta-dark-blue`
`#061337` `rgb(6, 19, 55)` `var(--color-lta-navy-base)`	lta navy base	`colors.$color-lta-navy-base$lta-navy-base.u-text-lta-navy-base.u-bg-lta-navy-baseu-lta-theme--{1, 2}-lta-navy-base`
`#005EA0` `rgb(0, 94, 160)` `var(--color-lta-blue-hover)`	lta blue hover	`colors.$color-lta-blue-hover$lta-blue-hover.u-text-lta-blue-hover.u-bg-lta-blue-hoveru-lta-theme--{1, 2}-lta-blue-hover`

Background colors

Example	Description	Token
`#E8F2F8` `rgb(232, 242, 248)` `var(--color-background-blue)`	background blue	`colors.$color-background-blue$background-blue.u-text-background-blue.u-bg-background-blueu-lta-theme--{1, 2}-background-blue`
`#EFF8F0` `rgb(239, 248, 240)` `var(--color-background-green)`	background green	`colors.$color-background-green$background-green.u-text-background-green.u-bg-background-greenu-lta-theme--{1, 2}-background-green`
`#FAFBFC` `rgb(250, 251, 252)` `var(--color-background-grey)`	background grey	`colors.$color-background-grey$background-grey.u-text-background-grey.u-bg-background-greyu-lta-theme--{1, 2}-background-grey`
`#D5E7F1` `rgb(213, 231, 241)` `var(--color-background-blue-accent)`	background blue accent	`colors.$color-background-blue-accent$background-blue-accent.u-text-background-blue-accent.u-bg-background-blue-accentu-lta-theme--{1, 2}-background-blue-accent`

Status & Alerts

Example	Description	Token
`#28A853` `rgb(40, 168, 83)` `var(--color-status-green)`	status green	`colors.$color-status-green$status-green.u-text-status-green.u-bg-status-greenu-lta-theme--{1, 2}-status-green`
`#DB3624` `rgb(219, 54, 36)` `var(--color-status-red)`	status red	`colors.$color-status-red$status-red.u-text-status-red.u-bg-status-redu-lta-theme--{1, 2}-status-red`
`#FF914B` `rgb(255, 145, 75)` `var(--color-status-orange)`	status orange	`colors.$color-status-orange$status-orange.u-text-status-orange.u-bg-status-orangeu-lta-theme--{1, 2}-status-orange`

LTA Accent colors

Example	Description	Token
`#408627` `rgb(64, 134, 39)` `var(--color-lta-accent-grass-green)`	lta accent grass green	`colors.$color-lta-accent-grass-green$lta-accent-grass-green.u-text-lta-accent-grass-green.u-bg-lta-accent-grass-greenu-lta-theme--{1, 2}-lta-accent-grass-green`
`#408627` `rgb(64, 134, 39)` `var(--color-lta-accent-grass-green-tint)`	lta accent grass green tint	`colors.$color-lta-accent-grass-green-tint$lta-accent-grass-green-tint.u-text-lta-accent-grass-green-tint.u-bg-lta-accent-grass-green-tintu-lta-theme--{1, 2}-lta-accent-grass-green-tint`
`#228479` `rgb(34, 132, 121)` `var(--color-lta-accent-teal)`	lta accent teal	`colors.$color-lta-accent-teal$lta-accent-teal.u-text-lta-accent-teal.u-bg-lta-accent-tealu-lta-theme--{1, 2}-lta-accent-teal`
`#228479` `rgb(34, 132, 121)` `var(--color-lta-accent-teal-tint)`	lta accent teal tint	`colors.$color-lta-accent-teal-tint$lta-accent-teal-tint.u-text-lta-accent-teal-tint.u-bg-lta-accent-teal-tintu-lta-theme--{1, 2}-lta-accent-teal-tint`
`#DA306C` `rgb(218, 48, 108)` `var(--color-lta-accent-pink)`	lta accent pink	`colors.$color-lta-accent-pink$lta-accent-pink.u-text-lta-accent-pink.u-bg-lta-accent-pinku-lta-theme--{1, 2}-lta-accent-pink`
`#007EB5` `rgb(0, 126, 181)` `var(--color-lta-accent-bright-blue)`	lta accent bright blue	`colors.$color-lta-accent-bright-blue$lta-accent-bright-blue.u-text-lta-accent-bright-blue.u-bg-lta-accent-bright-blueu-lta-theme--{1, 2}-lta-accent-bright-blue`
`#007EB5` `rgb(0, 126, 181)` `var(--color-lta-accent-bright-blue-tint)`	lta accent bright blue tint	`colors.$color-lta-accent-bright-blue-tint$lta-accent-bright-blue-tint.u-text-lta-accent-bright-blue-tint.u-bg-lta-accent-bright-blue-tintu-lta-theme--{1, 2}-lta-accent-bright-blue-tint`
`#8E5598` `rgb(142, 85, 152)` `var(--color-lta-accent-purple)`	lta accent purple	`colors.$color-lta-accent-purple$lta-accent-purple.u-text-lta-accent-purple.u-bg-lta-accent-purpleu-lta-theme--{1, 2}-lta-accent-purple`
`#467BA5` `rgb(70, 123, 165)` `var(--color-lta-accent-slate)`	lta accent slate	`colors.$color-lta-accent-slate$lta-accent-slate.u-text-lta-accent-slate.u-bg-lta-accent-slateu-lta-theme--{1, 2}-lta-accent-slate`
`#467BA5` `rgb(70, 123, 165)` `var(--color-lta-accent-slate-tint)`	lta accent slate tint	`colors.$color-lta-accent-slate-tint$lta-accent-slate-tint.u-text-lta-accent-slate-tint.u-bg-lta-accent-slate-tintu-lta-theme--{1, 2}-lta-accent-slate-tint`
`#006AB5` `rgb(0, 106, 181)` `var(--color-lta-accent-bright-green)`	lta accent bright green	`colors.$color-lta-accent-bright-green$lta-accent-bright-green.u-text-lta-accent-bright-green.u-bg-lta-accent-bright-greenu-lta-theme--{1, 2}-lta-accent-bright-green`
`#006AB5` `rgb(0, 106, 181)` `var(--color-lta-accent-sky-blue)`	lta accent sky blue	`colors.$color-lta-accent-sky-blue$lta-accent-sky-blue.u-text-lta-accent-sky-blue.u-bg-lta-accent-sky-blueu-lta-theme--{1, 2}-lta-accent-sky-blue`
`#006AB5` `rgb(0, 106, 181)` `var(--color-lta-accent-coral)`	lta accent coral	`colors.$color-lta-accent-coral$lta-accent-coral.u-text-lta-accent-coral.u-bg-lta-accent-coralu-lta-theme--{1, 2}-lta-accent-coral`
`#CA5009` `rgb(202, 80, 9)` `var(--color-lta-accent-orange)`	lta accent orange	`colors.$color-lta-accent-orange$lta-accent-orange.u-text-lta-accent-orange.u-bg-lta-accent-orangeu-lta-theme--{1, 2}-lta-accent-orange`
`#CA5009` `rgb(202, 80, 9)` `var(--color-lta-accent-orange-tint)`	lta accent orange tint	`colors.$color-lta-accent-orange-tint$lta-accent-orange-tint.u-text-lta-accent-orange-tint.u-bg-lta-accent-orange-tintu-lta-theme--{1, 2}-lta-accent-orange-tint`
`#FDC839` `rgb(253, 200, 57)` `var(--color-lta-accent-yellow)`	lta accent yellow	`colors.$color-lta-accent-yellow$lta-accent-yellow.u-text-lta-accent-yellow.u-bg-lta-accent-yellowu-lta-theme--{1, 2}-lta-accent-yellow`
`#9400D3` `rgb(148, 0, 211)` `var(--color-lta-accent-dark-violet)`	lta accent dark violet	`colors.$color-lta-accent-dark-violet$lta-accent-dark-violet.u-text-lta-accent-dark-violet.u-bg-lta-accent-dark-violetu-lta-theme--{1, 2}-lta-accent-dark-violet`

Play Your Way colors

Example	Description	Token
`#FB2C6D` `rgb(251, 44, 109)` `var(--color-pyw-pink)`	pyw pink	`colors.$color-pyw-pink$pyw-pink.u-text-pyw-pink.u-bg-pyw-pinku-lta-theme--{1, 2}-pyw-pink`
`#00E8C6` `rgb(0, 232, 198)` `var(--color-pyw-turquoise)`	pyw turquoise	`colors.$color-pyw-turquoise$pyw-turquoise.u-text-pyw-turquoise.u-bg-pyw-turquoiseu-lta-theme--{1, 2}-pyw-turquoise`
`#FF6200` `rgb(255, 98, 0)` `var(--color-pyw-orange)`	pyw orange	`colors.$color-pyw-orange$pyw-orange.u-text-pyw-orange.u-bg-pyw-orangeu-lta-theme--{1, 2}-pyw-orange`
`#B6D002` `rgb(182, 208, 2)` `var(--color-pyw-green)`	pyw green	`colors.$color-pyw-green$pyw-green.u-text-pyw-green.u-bg-pyw-greenu-lta-theme--{1, 2}-pyw-green`
`#00BCEF` `rgb(0, 188, 239)` `var(--color-pyw-sky-blue)`	pyw sky blue	`colors.$color-pyw-sky-blue$pyw-sky-blue.u-text-pyw-sky-blue.u-bg-pyw-sky-blueu-lta-theme--{1, 2}-pyw-sky-blue`
`#3D33E3` `rgb(61, 51, 227)` `var(--color-pyw-blue)`	pyw blue	`colors.$color-pyw-blue$pyw-blue.u-text-pyw-blue.u-bg-pyw-blueu-lta-theme--{1, 2}-pyw-blue`
`#9F559B` `rgb(159, 85, 155)` `var(--color-pyw-purple)`	pyw purple	`colors.$color-pyw-purple$pyw-purple.u-text-pyw-purple.u-bg-pyw-purpleu-lta-theme--{1, 2}-pyw-purple`
`#FEC820` `rgb(254, 200, 32)` `var(--color-pyw-yellow)`	pyw yellow	`colors.$color-pyw-yellow$pyw-yellow.u-text-pyw-yellow.u-bg-pyw-yellowu-lta-theme--{1, 2}-pyw-yellow`

Shades of grey

Example	Description	Token
`#FFFFFF` `rgb(255, 255, 255)` `var(--color-white)`	white	`colors.$color-white$white.u-text-white.u-bg-whiteu-lta-theme--{1, 2}-white`
`#EEEEEE` `rgb(238, 238, 238)` `var(--color-grey-light)`	grey light	`colors.$color-grey-light$grey-light.u-text-grey-light.u-bg-grey-lightu-lta-theme--{1, 2}-grey-light`
`#CDD4D8` `rgb(205, 212, 216)` `var(--color-grey-mid)`	grey mid	`colors.$color-grey-mid$grey-mid.u-text-grey-mid.u-bg-grey-midu-lta-theme--{1, 2}-grey-mid`
`#4C5D64` `rgb(76, 93, 100)` `var(--color-grey-dark-slate)`	grey dark slate	`colors.$color-grey-dark-slate$grey-dark-slate.u-text-grey-dark-slate.u-bg-grey-dark-slateu-lta-theme--{1, 2}-grey-dark-slate`
`#333A42` `rgb(51, 58, 66)` `var(--color-grey-lta)`	grey lta	`colors.$color-grey-lta$grey-lta.u-text-grey-lta.u-bg-grey-ltau-lta-theme--{1, 2}-grey-lta`
`#2D343C` `rgb(45, 52, 60)` `var(--color-grey-dark)`	grey dark	`colors.$color-grey-dark$grey-dark.u-text-grey-dark.u-bg-grey-darku-lta-theme--{1, 2}-grey-dark`
`#6C787E` `rgb(108, 120, 126)` `var(--color-grey-ui-mid)`	grey ui mid	`colors.$color-grey-ui-mid$grey-ui-mid.u-text-grey-ui-mid.u-bg-grey-ui-midu-lta-theme--{1, 2}-grey-ui-mid`
`#F6F7F9` `rgb(246, 247, 249)` `var(--color-soft-white)`	soft white	`colors.$color-soft-white$soft-white.u-text-soft-white.u-bg-soft-whiteu-lta-theme--{1, 2}-soft-white`
`#D9DDE3` `rgb(217, 221, 227)` `var(--color-mist-grey)`	mist grey	`colors.$color-mist-grey$mist-grey.u-text-mist-grey.u-bg-mist-greyu-lta-theme--{1, 2}-mist-grey`

Padel Core Colors

Example	Description	Token
`#081749` `rgb(8, 23, 73)` `var(--color-padel-navy)`	padel navy	`colors.$color-padel-navy$padel-navy.u-text-padel-navy.u-bg-padel-navyu-lta-theme--{1, 2}-padel-navy`
`#9E47FF` `rgb(158, 71, 255)` `var(--color-padel-purple)`	padel purple	`colors.$color-padel-purple$padel-purple.u-text-padel-purple.u-bg-padel-purpleu-lta-theme--{1, 2}-padel-purple`
`#00F5ED` `rgb(0, 245, 237)` `var(--color-padel-electric-blue)`	padel electric blue	`colors.$color-padel-electric-blue$padel-electric-blue.u-text-padel-electric-blue.u-bg-padel-electric-blueu-lta-theme--{1, 2}-padel-electric-blue`
`#D4FC00` `rgb(212, 252, 0)` `var(--color-padel-electric-yellow)`	padel electric yellow	`colors.$color-padel-electric-yellow$padel-electric-yellow.u-text-padel-electric-yellow.u-bg-padel-electric-yellowu-lta-theme--{1, 2}-padel-electric-yellow`
`#003DFF` `rgb(0, 61, 255)` `var(--color-padel-royal-blue)`	padel royal blue	`colors.$color-padel-royal-blue$padel-royal-blue.u-text-padel-royal-blue.u-bg-padel-royal-blueu-lta-theme--{1, 2}-padel-royal-blue`
`#F70870` `rgb(247, 8, 112)` `var(--color-padel-pink)`	padel pink	`colors.$color-padel-pink$padel-pink.u-text-padel-pink.u-bg-padel-pinku-lta-theme--{1, 2}-padel-pink`

TF Core Colors

Example	Description	Token
`#DA306C` `rgb(218, 48, 108)` `var(--color-tf-pink)`	tf pink	`colors.$color-tf-pink$tf-pink.u-text-tf-pink.u-bg-tf-pinku-lta-theme--{1, 2}-tf-pink`
`#FDC839` `rgb(253, 200, 57)` `var(--color-tf-yellow)`	tf yellow	`colors.$color-tf-yellow$tf-yellow.u-text-tf-yellow.u-bg-tf-yellowu-lta-theme--{1, 2}-tf-yellow`
`#228479` `rgb(34, 132, 121)` `var(--color-tf-green)`	tf green	`colors.$color-tf-green$tf-green.u-text-tf-green.u-bg-tf-greenu-lta-theme--{1, 2}-tf-green`
`#16316F` `rgb(22, 49, 111)` `var(--color-tf-navy)`	tf navy	`colors.$color-tf-navy$tf-navy.u-text-tf-navy.u-bg-tf-navyu-lta-theme--{1, 2}-tf-navy`
`#228479` `rgb(34, 132, 121)` `var(--color-tf-teal)`	tf teal	`colors.$color-tf-teal$tf-teal.u-text-tf-teal.u-bg-tf-tealu-lta-theme--{1, 2}-tf-teal`
`#8E5598` `rgb(142, 85, 152)` `var(--color-tf-purple)`	tf purple	`colors.$color-tf-purple$tf-purple.u-text-tf-purple.u-bg-tf-purpleu-lta-theme--{1, 2}-tf-purple`
`#467BA5` `rgb(70, 123, 165)` `var(--color-tf-slate)`	tf slate	`colors.$color-tf-slate$tf-slate.u-text-tf-slate.u-bg-tf-slateu-lta-theme--{1, 2}-tf-slate`
`#CA5009` `rgb(202, 80, 9)` `var(--color-tf-orange)`	tf orange	`colors.$color-tf-orange$tf-orange.u-text-tf-orange.u-bg-tf-orangeu-lta-theme--{1, 2}-tf-orange`

Rivals Core Colors

Example	Description	Token
`#1A1F2A` `rgb(26, 31, 42)` `var(--color-rivals-grey)`	rivals grey	`colors.$color-rivals-grey$rivals-grey.u-text-rivals-grey.u-bg-rivals-greyu-lta-theme--{1, 2}-rivals-grey`
`#00BCAE` `rgb(0, 188, 174)` `var(--color-rivals-teak)`	rivals teak	`colors.$color-rivals-teak$rivals-teak.u-text-rivals-teak.u-bg-rivals-teaku-lta-theme--{1, 2}-rivals-teak`
`#8953DF` `rgb(137, 83, 223)` `var(--color-rivals-purple)`	rivals purple	`colors.$color-rivals-purple$rivals-purple.u-text-rivals-purple.u-bg-rivals-purpleu-lta-theme--{1, 2}-rivals-purple`
`#FF4402` `rgb(255, 68, 2)` `var(--color-rivals-orange)`	rivals orange	`colors.$color-rivals-orange$rivals-orange.u-text-rivals-orange.u-bg-rivals-orangeu-lta-theme--{1, 2}-rivals-orange`
`#DAFF00` `rgb(218, 255, 0)` `var(--color-rivals-lime)`	rivals lime	`colors.$color-rivals-lime$rivals-lime.u-text-rivals-lime.u-bg-rivals-limeu-lta-theme--{1, 2}-rivals-lime`

Youth Rebrand Colors (CMS)New

Example	Description	Token
`#0068FF` `rgb(0, 104, 255)` `var(--color-youth-rebrand-lta-blue)`	youth rebrand lta blue	`colors.$color-youth-rebrand-lta-blue$youth-rebrand-lta-blue.u-text-youth-rebrand-lta-blue.u-bg-youth-rebrand-lta-blueu-lta-theme--{1, 2}-youth-rebrand-lta-blue`
`#F70870` `rgb(247, 8, 112)` `var(--color-youth-rebrand-pyw-pink)`	youth rebrand pyw pink	`colors.$color-youth-rebrand-pyw-pink$youth-rebrand-pyw-pink.u-text-youth-rebrand-pyw-pink.u-bg-youth-rebrand-pyw-pinku-lta-theme--{1, 2}-youth-rebrand-pyw-pink`
`#00C9FF` `rgb(0, 201, 255)` `var(--color-youth-rebrand-pyw-blue)`	youth rebrand pyw blue	`colors.$color-youth-rebrand-pyw-blue$youth-rebrand-pyw-blue.u-text-youth-rebrand-pyw-blue.u-bg-youth-rebrand-pyw-blueu-lta-theme--{1, 2}-youth-rebrand-pyw-blue`
`#00E8C6` `rgb(0, 232, 198)` `var(--color-youth-rebrand-pyw-turquoise)`	youth rebrand pyw turquoise	`colors.$color-youth-rebrand-pyw-turquoise$youth-rebrand-pyw-turquoise.u-text-youth-rebrand-pyw-turquoise.u-bg-youth-rebrand-pyw-turquoiseu-lta-theme--{1, 2}-youth-rebrand-pyw-turquoise`
`#061337` `rgb(6, 19, 55)` `var(--color-youth-rebrand-lta-navy)`	youth rebrand lta navy	`colors.$color-youth-rebrand-lta-navy$youth-rebrand-lta-navy.u-text-youth-rebrand-lta-navy.u-bg-youth-rebrand-lta-navyu-lta-theme--{1, 2}-youth-rebrand-lta-navy`
`#D4FC00` `rgb(212, 252, 0)` `var(--color-youth-rebrand-pyw-yellow)`	youth rebrand pyw yellow	`colors.$color-youth-rebrand-pyw-yellow$youth-rebrand-pyw-yellow.u-text-youth-rebrand-pyw-yellow.u-bg-youth-rebrand-pyw-yellowu-lta-theme--{1, 2}-youth-rebrand-pyw-yellow`
`#FF6200` `rgb(255, 98, 0)` `var(--color-youth-rebrand-pyw-orange)`	youth rebrand pyw orange	`colors.$color-youth-rebrand-pyw-orange$youth-rebrand-pyw-orange.u-text-youth-rebrand-pyw-orange.u-bg-youth-rebrand-pyw-orangeu-lta-theme--{1, 2}-youth-rebrand-pyw-orange`
`#F3F2F9` `rgb(243, 242, 249)` `var(--color-youth-rebrand-grey)`	youth rebrand grey	`colors.$color-youth-rebrand-grey$youth-rebrand-grey.u-text-youth-rebrand-grey.u-bg-youth-rebrand-greyu-lta-theme--{1, 2}-youth-rebrand-grey`