Color
Color plays an important role in our brand design. Our primary brand colors—black, gray and white—are strongly present throughout all of our brand communications, speaking to the stable, reliable, and professional image of Synology. The distinctive Synology Blue and Synology Green are used sparingly to highlight important elements associated with prominence, interactivity, assurance, as well as for communicative purposes.
Primary colors
Our primary brand colors are black, white and gray. These colors set a fundamental tone throughout all of our brand communications and should always account for the largest percentage of the color proportion.
Usage | Background, Text
RGB 0 0 0
HEX #000000
The HEX code is copied!
RGB 255 255 255
HEX #ffffff
The HEX code is copied!
Synology blue
The iconic Synology Blue should be used sparingly and precisely to deliver clear messages, such as emphasis, interactivity, and assurance.
Usage | Interactive element, Illustration, Icon, Photography
RGB 0 103 230
HEX #0067E6
The HEX code is copied!
Synology green
Synology Green is used to complement Synology Blue for enhanced communicative purposes and interactions.
Usage | Interactive element, Illustration, Icon, Photography
RGB 38 212 172
HEX #26D4AC
The HEX code is copied!
Secondary colors
Secondary colors are generated from Synology Blue and Synology Green to expand the primary color palette for illustrations. They are used moderately to create vibrant and purposeful imagery.
Usage | Illustration
RGB 55 67 221
HEX #3743DD
RGB 22 184 232
HEX #16B8E8
Tertiary colors
Tertiary colors are used rarely. These colors only appear for emphasis, such as warnings, errors or any circumstances where additional attention is required.
Usage | Illustration, UI
RGB 252 191 29
HEX #FCBF1D
RGB 245 112 0
HEX #F57000
RGB 245 60 60
HEX #F53C3C
Color palette
The full color palette consists of black, white, along with ten color families, with each family being composed of values from 1 (the lightest) to 10 (the darkest). For Synology blue, green and the other secondary and tertiary colors, value-6 is the main color and should always be prioritized during use. The values from 1–5 and 7–10 are used to complement the main color when necessary.
The HEX code is copied!
The full color palette consists of black, white, and the colors above.
Usage proportion
Usage of these colors should be consistent across different media, platforms, and surfaces. Thus, it is critical that you follow the proportion rules.
General
The primary colors are fundamental and should cover the majority of the image. Synology blue is instructional, so it should be used thoughtfully and moderately. Synology Green accompanies Synology Blue to add an additional layer of meaning when necessary.
Illustrations
Generally speaking, our illustrations consist of two main colors—gray and blue (occasional secondary colors are acceptable). Gray is the main color that sets up the basic tone while blue highlights the core message that the illustration intends to deliver.
Tertiary colors
Tertiary colors are used rarely for highlighting, and should not take up more than 5% of the color composition.
Contrast ratio
Color contrast is critical for the visually-impaired. Per the recommendation in the Web Content Accessibility Guidelines (WCAG 2.0), we set the contrast ratio to achieve minimum level AA, meaning a 4.5:1 color contrast between the text and the background for font sizes below 18pt.
Color guidance
Use only primary colors.
Use Synology Blue precisely.
Do not use the wrong color proportions.
Do not color text with non-primary colors.
Do not use too much Synology blue.
Do not use too many secondary/tertiary colors in one composition.
Be mindful of the contrast ratio.
