Skip to main navigationSkip to main content
Return to Sky UI homepage

Gradients - Overview

View on FigmaView on GitHub

Gradients

Brand

  1. #ff8c00
  2. #f80032
  3. #ff00a0
  4. #8c28ff
  5. #0023ff
  6. #19a0ff
spectrum
  1. #0644a1
  2. #862e81
service
  1. #f15a22
  2. #ef4c0f
offer

Channels

Gradients for each Sky Channel. Do not use a channel gradient if you are not talking about that specific channel.

  1. #041957
  2. #122d74
Sky-News
  1. #0080df
  2. #079ef8
Sky-One
  1. #021158
  2. #122476
Sky-Sports
  1. #0d0d0d
  2. #262626
Sky-Witness
  1. #5c0f39
  2. #80082c
Sky-Box
  1. #003268
  2. #073fa0
Sky-Store
  1. #6626a1
  2. #4c0080
Sky-Kids
  1. #ff5200
  2. #ff5200
Sky-Challenge
  1. #e90000
  2. #e90000
Sky-Documentaries
  1. #8c00ff
  2. #ff5e1d
Sky-Max
  1. #003264
  2. #27749d
Sky-Atlantic
  1. #000000
  2. #000000
Sky-Arts
  1. #ff0031
  2. #9b0031
Sky-Cinema
  1. #1A0202
  2. #570505
Sky-Cinema-dark
  1. #361740
  2. #763175
Sky-Pick
  1. #182935
  2. #31576b
Sky-Crime
  1. #ff8200
  2. #ff8200
Sky-Comedy
  1. #2b6300
  2. #3e8f00
Sky-Nature

Products

Gradients for select Sky Products. Only use them if you’re directly referencing a particular product.

The generic broadband, glass, mobile, protect, and TV gradients were removed in the rebrand. The following product gradients remain available.

  1. #ff5c00
  2. #e30253

broadband-essential

  1. #d71494
  2. #930fcb

broadband-superfast

  1. #6c1dec
  2. #1400ff

broadband-ultrafast

  1. #000ff5
  2. #00e6ff

business
(previously connect)

  1. #275add
  2. #224bb6
connect-essential
  1. #1e3f99
  2. #1b3379
connect-pro
  1. #162658
  2. #121835
connect-plus
  1. #001211
  2. #00818a
nowtv

Products - Accessible

Gradients must not be used on typography or icons. They can however be used for illustrations (larger than icons with more details). See the Icons documentation for more information.

Looking for the Accessible gradients for Spectrum and other sub-brands (TV, Mobile and Broadband)? They’ve been removed as they are no longer in use as of the November 2025 Sky rebrand.

  1. #003fff
  2. #158ff4

business
(previously connect)

Loyalty

Gradients for use across loyalty.

  1. #708186
  2. #a1acb2
one
  1. #c88b2e
  2. #e6bb63
two
  1. #6e6c89
  2. #8d8dbe
three
  1. #191919
  2. #474747
four

Regional Variations

Certain Foundation Styles are required to have regional variations and indicate the region within folder and style name, i.e. Regional-Germany/Gradients-DE.

Gradients

  1. #000ff5
  2. #0096ff
Sky-UltimateTV-DE
  1. #4c0080
  2. #6626a1
Sky-Entertainment-DE
  1. #ff6218
  2. #ffa300
Sky-Kids-DE
  1. #065730
  2. #0ba158
Sky-Bundesliga-DE
  1. #0014ff
  2. #00d7ff
Sky-Business-DE
  1. #990033
  2. #cb0033
Sky-Cinema-DE
  1. #000000
  2. #555555
NonSkyDE

Accessible Gradients

  1. #c1481b
  2. #996200
Sky-Kids-DE
  1. #065730
  2. #08713e

Sky-Bundesliga-DE

  1. #990033
  2. #cc0027
Sky-Cinema-DE