Theme Colors are built on global colors. Global colors serves as the foundation of the color system, from which semantic theme tokens are derived.
Global colors are divided into groups that guide their usage:
- Black and white
- Neutrals
- Brand
- Complementary
- Notifications.
Black and white
Black and white base colors are primarily used for text and backgrounds.
| Preview | Token | Value |
|---|
| white | #ffffff |
| black | #000000 |
Neutrals
Neutral colors (grays and opacity values) are the core colors of the user interface. They are used for:
- backgrounds
- surfaces
- borders
- separators
- subtle differences between states (hover, active, disabled).
Opacity tokens enable controlled use of the same shades across different backgrounds and themes.
Gray
| Preview | Token | Value |
|---|
| gray-5 | #f8f9fa |
| gray-10 | #f1f2f4 |
| gray-20 | #e8e9eb |
| gray-30 | #d8d9db |
| gray-40 | #b4b6b7 |
| gray-50 | #878a8b |
| gray-60 | #4a4f54 |
| gray-70 | #323639 |
| gray-80 | #292b2d |
| gray-90 | #1f2123 |
| gray-95 | #131415 |
Black Opacity
| Preview | Token | Value |
|---|
| black-opacity-5 | rgba(0, 0, 0, 0.02) |
| black-opacity-10 | rgba(0, 0, 0, 0.05) |
| black-opacity-20 | rgba(0, 0, 0, 0.09) |
| black-opacity-30 | rgba(0, 0, 0, 0.15) |
| black-opacity-40 | rgba(0, 0, 0, 0.29) |
| black-opacity-50 | rgba(0, 0, 0, 0.47) |
| black-opacity-60 | rgba(0, 0, 0, 0.70) |
| black-opacity-70 | rgba(0, 0, 0, 0.79) |
| black-opacity-80 | rgba(0, 0, 0, 0.83) |
| black-opacity-90 | rgba(0, 0, 0, 0.87) |
| black-opacity-95 | rgba(0, 0, 0, 0.92) |
White Opacity
| Preview | Token | Value |
|---|
| white-opacity-5 | rgba(255, 255, 255, 0.08) |
| white-opacity-10 | rgba(255, 255, 255, 0.13) |
| white-opacity-20 | rgba(255, 255, 255, 0.17) |
| white-opacity-30 | rgba(255, 255, 255, 0.21) |
| white-opacity-40 | rgba(255, 255, 255, 0.30) |
| white-opacity-50 | rgba(255, 255, 255, 0.53) |
| white-opacity-60 | rgba(255, 255, 255, 0.71) |
| white-opacity-70 | rgba(255, 255, 255, 0.85) |
| white-opacity-80 | rgba(255, 255, 255, 0.91) |
| white-opacity-90 | rgba(255, 255, 255, 0.95) |
| white-opacity-95 | rgba(255, 255, 255, 0.98) |
Brand
Yle’s brand turquoise is the primary user interface color in Yle services and is used to guide users in different interactions.
The Yle News and Yle Sports colors, are used in infographic base themes and other infographic content.
Turquoise
| Preview | Token | Value |
|---|
| turquoise-5 | #e5fdff |
| turquoise-10 | #c7f4fa |
| turquoise-20 | #9cebf4 |
| turquoise-30 | #5ddbe9 |
| turquoise-40 | #29ccde |
| turquoise-50 | #00b4c8 |
| turquoise-60 | #009cb5 |
| turquoise-70 | #00809c |
| turquoise-80 | #00637d |
| turquoise-90 | #00475e |
| turquoise-95 | #0b3f4b |
News Violet
| Preview | Token | Value |
|---|
| news-violet-5 | #e6e5ff |
| news-violet-10 | #d3cbfb |
| news-violet-20 | #b7a8fa |
| news-violet-30 | #9479fb |
| news-violet-40 | #7c59fa |
| news-violet-50 | #694bd7 |
| news-violet-60 | #553db4 |
| news-violet-70 | #413091 |
| news-violet-80 | #2f2372 |
| news-violet-90 | #1e1753 |
| news-violet-95 | #120e3e |
News Orange
| Preview | Token | Value |
|---|
| news-orange-5 | #fff2f2 |
| news-orange-10 | #fdd6d3 |
| news-orange-20 | #fab8b3 |
| news-orange-30 | #f79c94 |
| news-orange-40 | #f57f74 |
| news-orange-50 | #f26659 |
| news-orange-60 | #d24f45 |
| news-orange-70 | #b83c35 |
| news-orange-80 | #9b2823 |
| news-orange-90 | #7f1412 |
| news-orange-95 | #650101 |
Sports Violet
| Preview | Token | Value |
|---|
| sports-violet-5 | #eeeeff |
| sports-violet-10 | #ddd9fc |
| sports-violet-20 | #b3abf7 |
| sports-violet-30 | #8578f2 |
| sports-violet-40 | #6553ef |
| sports-violet-50 | #5541ed |
| sports-violet-60 | #372bb1 |
| sports-violet-70 | #292094 |
| sports-violet-80 | #1a1476 |
| sports-violet-90 | #0d0a5c |
| sports-violet-95 | #030349 |
Sports Lime
| Preview | Token | Value |
|---|
| sports-lime-5 | #fdfde7 |
| sports-lime-10 | #f9ffc6 |
| sports-lime-20 | #ebfe8d |
| sports-lime-30 | #d4ff42 |
| sports-lime-40 | #caf53e |
| sports-lime-50 | #b0d934 |
| sports-lime-60 | #91ae42 |
| sports-lime-70 | #7a9a2c |
| sports-lime-80 | #618515 |
| sports-lime-90 | #46690b |
| sports-lime-95 | #2c4d01 |
Sports Pink
| Preview | Token | Value |
|---|
| sports-pink-5 | #fff5f9 |
| sports-pink-10 | #fcd9e8 |
| sports-pink-20 | #f7abcb |
| sports-pink-30 | #f273a8 |
| sports-pink-40 | #ea3e85 |
| sports-pink-50 | #e60060 |
| sports-pink-60 | #c50152 |
| sports-pink-70 | #a70146 |
| sports-pink-80 | #880139 |
| sports-pink-90 | #6b012c |
| sports-pink-95 | #4d0120 |
Complementary
In addition to brand colors, complementary colors are used in infographics and data visualizations, especially when a broader color scale is needed to improve clarity and distinction.
These colors are not used in UI components.
Info Orange
| Preview | Token | Value |
|---|
| info-orange-5 | #fff3e2 |
| info-orange-10 | #ffe3bf |
| info-orange-20 | #ffd199 |
| info-orange-30 | #fec075 |
| info-orange-40 | #feb054 |
| info-orange-50 | #ff8f33 |
| info-orange-60 | #f56a1b |
| info-orange-70 | #e65a27 |
| info-orange-80 | #e04312 |
| info-orange-90 | #c93c11 |
| info-orange-95 | #9b2e0d |
Info Yellow
| Preview | Token | Value |
|---|
| info-yellow-5 | #fff8e0 |
| info-yellow-10 | #ffeeb2 |
| info-yellow-20 | #ffe387 |
| info-yellow-30 | #ffd959 |
| info-yellow-40 | #ffcf2d |
| info-yellow-50 | #ffc400 |
| info-yellow-60 | #f1b601 |
| info-yellow-70 | #cc9601 |
| info-yellow-80 | #ae7b01 |
| info-yellow-90 | #926201 |
| info-yellow-95 | #764901 |
Info Green
| Preview | Token | Value |
|---|
| info-green-5 | #e0fff4 |
| info-green-10 | #b4f5de |
| info-green-20 | #88eac7 |
| info-green-30 | #5fe0b2 |
| info-green-40 | #33d59b |
| info-green-50 | #07ca84 |
| info-green-60 | #07b577 |
| info-green-70 | #06a26a |
| info-green-80 | #068e5d |
| info-green-90 | #05794f |
| info-green-95 | #046542 |
Info Orange
| Preview | Token | Value |
|---|
| info-orange-5 | #fff3e2 |
| info-orange-10 | #ffe3bf |
| info-orange-20 | #ffd199 |
| info-orange-30 | #fec075 |
| info-orange-40 | #feb054 |
| info-orange-50 | #ff8f33 |
| info-orange-60 | #f56a1b |
| info-orange-70 | #e65a27 |
| info-orange-80 | #e04312 |
| info-orange-90 | #c93c11 |
| info-orange-95 | #9b2e0d |
Info Yellow
| Preview | Token | Value |
|---|
| info-yellow-5 | #fff8e0 |
| info-yellow-10 | #ffeeb2 |
| info-yellow-20 | #ffe387 |
| info-yellow-30 | #ffd959 |
| info-yellow-40 | #ffcf2d |
| info-yellow-50 | #ffc400 |
| info-yellow-60 | #f1b601 |
| info-yellow-70 | #cc9601 |
| info-yellow-80 | #ae7b01 |
| info-yellow-90 | #926201 |
| info-yellow-95 | #764901 |
Info Green
| Preview | Token | Value |
|---|
| info-green-5 | #e0fff4 |
| info-green-10 | #b4f5de |
| info-green-20 | #88eac7 |
| info-green-30 | #5fe0b2 |
| info-green-40 | #33d59b |
| info-green-50 | #07ca84 |
| info-green-60 | #07b577 |
| info-green-70 | #06a26a |
| info-green-80 | #068e5d |
| info-green-90 | #05794f |
| info-green-95 | #046542 |
Info Blue
| Preview | Token | Value |
|---|
| info-blue-5 | #e0f2ff |
| info-blue-10 | #bbdcff |
| info-blue-20 | #95c6ff |
| info-blue-30 | #71b0ff |
| info-blue-40 | #4b9aff |
| info-blue-50 | #2684ff |
| info-blue-60 | #2078ed |
| info-blue-70 | #196dda |
| info-blue-80 | #1260c7 |
| info-blue-90 | #0b54b4 |
| info-blue-95 | #0448a1 |
Info Deep Blue
| Preview | Token | Value |
|---|
| info-deep-blue-5 | #e3eaf3 |
| info-deep-blue-10 | #c9d5e6 |
| info-deep-blue-20 | #b0c1da |
| info-deep-blue-30 | #99aece |
| info-deep-blue-40 | #738ab5 |
| info-deep-blue-50 | #546d9c |
| info-deep-blue-60 | #3d5483 |
| info-deep-blue-70 | #1e2e52 |
| info-deep-blue-80 | #131e39 |
| info-deep-blue-90 | #131625 |
| info-deep-blue-95 | #020408 |
Info Purple
| Preview | Token | Value |
|---|
| info-purple-5 | #fcf5ff |
| info-purple-10 | #e8d0f1 |
| info-purple-20 | #d9b0e8 |
| info-purple-30 | #ca91de |
| info-purple-40 | #ba72d5 |
| info-purple-50 | #9436b5 |
| info-purple-60 | #80259f |
| info-purple-70 | #620579 |
| info-purple-80 | #4b075b |
| info-purple-90 | #30063a |
| info-purple-95 | #1c0222 |
Notifications
Notification colors are designed exclusively for feedback and status messaging (e.g., success, warning, error, information). They are primarily used for message surfaces, backgrounds, and status indicators. These colors should not be used for other purposes, to ensure consistent and logical use in the user interface.
Red
| Preview | Token | Value |
|---|
| red-5 | #fff5f8 |
| red-10 | #fcc5d3 |
| red-20 | #f99fb5 |
| red-30 | #f77898 |
| red-40 | #f5517a |
| red-50 | #e90e43 |
| red-60 | #d10b3d |
| red-70 | #9a092d |
| red-80 | #740722 |
| red-90 | #4d0417 |
Green
| Preview | Token | Value |
|---|
| green-5 | #e5fff9 |
| green-10 | #a1f9dd |
| green-20 | #62f9c2 |
| green-30 | #1ff0a4 |
| green-40 | #03e592 |
| green-50 | #07ca84 |
| green-60 | #06b173 |
| green-70 | #058657 |
| green-80 | #046240 |
| green-90 | #023b26 |
Orange
| Preview | Token | Value |
|---|
| orange-5 | #fff3e2 |
| orange-10 | #ffe1b8 |
| orange-20 | #ffce8b |
| orange-30 | #ffb95f |
| orange-40 | #ff9c31 |
| orange-50 | #ff8f33 |
| orange-60 | #f1722a |
| orange-70 | #e65a27 |
| orange-80 | #e04312 |
| orange-90 | #c93c11 |
Blue
| Preview | Token | Value |
|---|
| blue-5 | #e0f2ff |
| blue-10 | #ccdef5 |
| blue-20 | #9fc8ee |
| blue-30 | #88b3e7 |
| blue-40 | #669de1 |
| blue-50 | #2975d0 |
| blue-60 | #1163b0 |
| blue-70 | #234c93 |
| blue-80 | #0a3276 |
| blue-90 | #00284e |