Color

SVT has a flexible color palette. We can be minimalistic in black and white, elegant with a few more tones and sometimes vibrant with bright accents. Regardless of the effect we strive to achieve, we always choose our color combinations with care and with regard to the message we wish to send.


Our palette consists of seven basic colors, each with a scale of tints (lighter) and shades (darker). They all have modest saturation, making them distinct but not intense. For occasions when extra intensity is just what you need, each basic color has an accent color with a bit more punch. Use these carefully, on details that need to stand out.

We also use three different gray-scales; a neutral scale, a warm scale and a cold scale.

    • Extra Light Red
      #ffd2d7
    • Light Red
      #f0828c
    • Regular Red
      #e13241
    • Dark Red
      #b9232d
    • Extra Dark Red
      #911414
    • Accent Red
      #ff4b7d
    • Extra Light Orange
      #ffe6d2
    • Light Orange
      #faaf82
    • Regular Orange
      #eb6937
    • Dark Orange
      #d25a1e
    • Extra Dark Orange
      #b93c05
    • Accent Orange
      #ff912d
    • Extra Light Yellow
      #fff0d2
    • Light Yellow
      #ffdc8c
    • Regular Yellow
      #ffc346
    • Dark Yellow
      #ebaa23
    • Extra Dark Yellow
      #d28c00
    • Accent Yellow
      #fff000
    • Extra Light Green
      #d2ebd2
    • Light Green
      #82c882
    • Regular Green
      #32a532
    • Dark Green
      #23821e
    • Extra Dark Green
      #0f5a0a
    • Accent Green
      #00c800
    • Extra Light Turquoise
      #cdf0e6
    • Light Turquoise
      #87d7cd
    • Regular Turquoise
      #3cbeb4
    • Dark Turquoise
      #2d9b91
    • Extra Dark Turquoise
      #197869
    • Accent Turquoise
      #00dcd2
    • Extra Light Blue
      #d2e6f5
    • Light Blue
      #7dbee1
    • Regular Blue
      #2891c8
    • Dark Blue
      #1e69aa
    • Extra Dark Blue
      #0f418c
    • Accent Blue
      #0091ff
    • Extra Light Purple
      #d7d2f0
    • Light Purple
      #b48ccd
    • Regular Purple
      #87289b
    • Dark Purple
      #641e78
    • Extra Dark Purple
      #410f5a
    • Accent Purple
      #be00dc
    • Extra Light Gray
      #ebebeb
    • Light Gray
      #cccccc
    • Regular Gray
      #8c8c8c
    • Dark Gray
      #737373
    • Extra Dark Gray
      #4d4d4d
    • Extra Light Warm Gray
      #ebebe6
    • Light Warm Gray
      #cdcdc3
    • Regular Warm Gray
      #a09b96
    • Dark Warm Gray
      #78736e
    • Extra Dark Warm Gray
      #504b46
    • Extra Light Cool Gray
      #e6ebeb
    • Light Cool Gray
      #d2dcdc
    • Regular Cool Gray
      #7d9196
    • Dark Cool Gray
      #647378
    • Extra Dark Cool Gray
      #465055
    • Regular White
      #ffffff
    • Regular Black
      #000000

Download all the colors as variables in a SASS-file

Color contrast for accessibility

As a general rule, all text must have a color contrast rating of AA according to the Web Content Accesibility Guidelines (WCAG). This means that larger text (+18pts) needs a contrast ratio of at least 3.0, while smaller needs at least 4.5.