Colors and Font Guidelines: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Developing_Qt::Guidelines]]
[[Category:Developing_Qt::Guidelines]]


= Colors and Font Guidelines =
 


Bellow you can find our recommended color palette, textured backgrounds and the fonts that will ensure consistency between your app's GUI and the other many example apps' GUIs published in the Qt website. There are also examples of how to use each of them.
Bellow you can find our recommended color palette, textured backgrounds and the fonts that will ensure consistency between your app's GUI and the other many example apps' GUIs published in the Qt website. There are also examples of how to use each of them.
Line 17: Line 19:
=== Gray palette ===
=== Gray palette ===


{|
{| class="wikitable"
|[[Image:http://qt.io/uploads/image_upload/Palette_DoubleDarkGray.png|Double dark gray color sample]]
|[[Image:Palette DoubleDarkGray.png|Double dark gray sample]]
|[[Image:http://qt.io/uploads/image_upload/Palette_DarkGray.png|Dark gray color sample]]
|[[Image:Palette DarkGray.png|Dark gray color sample]]
|[[Image:http://qt.io/uploads/image_upload/Palette_MediumGray.png|Medium gray color sample]]
|[[Image:Palette MediumGray.png|Medium gray color sample]]
|[[Image:http://qt.io/uploads/image_upload/Palette_RegularGray.png|Regular gray color sample]]
|[[Image:Palette RegularGray.png|Regular gray color sample]]
|[[Image:http://qt.io/uploads/image_upload/Palette_LightGray.png|Light gray color sample]]
|[[Image:Palette LightGray.png|Light gray color sample]]
|[[Image:http://qt.io/uploads/image_upload/Palette_PaleGray.png|Pale gray color sample]]
|[[Image:Palette PaleGray.png|Pale gray color sample]]
|[[Image:http://qt.io/uploads/image_upload/Palette_White.png|White color sample]]
|[[Image:White.png|White color sample]]
|-
|-
|'''Double dark gray'''
|'''Double dark gray'''
Line 30: Line 32:
|'''Medium gray'''
|'''Medium gray'''
|'''Regular gray'''
|'''Regular gray'''
|*Light gray*
|'''Light gray'''
|'''Pale gray'''
|'''Pale gray'''
|'''White'''
|'''White'''
Line 36: Line 38:
|'''HEX''' #1e1b18
|'''HEX''' #1e1b18
|'''HEX''' #35322f
|'''HEX''' #35322f
|*HEX*#5d5b59
|'''HEX''' #5d5b59
|'''HEX''' #868482
|'''HEX''' #868482
|'''HEX''' #aeadac
|'''HEX''' #aeadac
Line 53: Line 55:
=== Color palette ===
=== Color palette ===


{|
{| class="wikitable"
|[[Image:http://qt.io/uploads/image_upload/Palette_DarkGreen.png|Dark Green color sample]]
|[[Image:Palette DarkGreen.png|Dark Green color sample]]
|[[Image:http://qt.io/uploads/image_upload/Palette_MediumGreen.png|Medium Green color sample]]
|[[Image:Palette MediumGreen.png|Medium Green color sample]]
|[[Image:http://qt.io/uploads/image_upload/Palette_LightGreen.png|Light Green color sample]]
|[[Image:Palette LightGreen.png|Light Green color sample]]
|[[Image:http://qt.io/uploads/image_upload/Palette_DarkBlue.png|Dark Blue color sample]]
|[[Image:Palette DarkBlue.png|Dark Blue color sample]]
|[[Image:http://qt.io/uploads/image_upload/Palette_Blue.png|Blue color sample]]
|[[Image:Palette Blue.png|Blue color sample]]
|[[Image:http://qt.io/uploads/image_upload/Palette_Violet.png|Violet color sample]]
|[[Image:Palette Violet.png|Violet color sample]]
|[[Image:http://qt.io/uploads/image_upload/Palette_Purple.png|Purple color sample]]
|[[Image:Purple.png|Purple color sample]]
|-
|-
|'''Dark green'''
|'''Dark green'''
|'''Medium green'''
|'''Medium green'''
|'''Light green'''
|'''Light green'''
|*Dark blue*
|'''Dark blue'''
|'''Blue'''
|'''Blue'''
|'''Violet'''
|'''Violet'''
Line 81: Line 83:
|'''RGB''' 50, 137, 48
|'''RGB''' 50, 137, 48
|'''RGB''' 128, 195, 66
|'''RGB''' 128, 195, 66
|*RGB* 20, 20, 140
|'''RGB''' 20, 20, 140
|'''RGB''' 20, 170, 255
|'''RGB''' 20, 170, 255
|*RGB* 100, 0, 170
|'''RGB''' 100, 0, 170
|'''RGB''' 174, 50, 160
|'''RGB''' 174, 50, 160
|}
|}


{|
{| class="wikitable"
|[[Image:http://qt.io/uploads/image_upload/Palette_Red.png|Red color sample]]
|[[Image:Palette Red.png|Red color sample]]
|[[Image:http://qt.io/uploads/image_upload/Palette_Yellow.png|Yellow color sample]]
|[[Image:Palette Yellow.png|Yellow color sample]]
|[[Image:http://qt.io/uploads/image_upload/Spacing.png|Yellow color sample]]
|[[Image:http://qt.io/uploads/image_upload/Spacing.png|Yellow color sample]]
|[[Image:http://qt.io/uploads/image_upload/Spacing.png|Yellow color sample]]
|[[Image:http://qt.io/uploads/image_upload/Spacing.png|Yellow color sample]]
|[[Image:http://qt.io/uploads/image_upload/Spacing.png|Yellow color sample]]
|-
|-
|'''Red'''
|'''Red'''

Latest revision as of 11:00, 30 March 2015



Bellow you can find our recommended color palette, textured backgrounds and the fonts that will ensure consistency between your app's GUI and the other many example apps' GUIs published in the Qt website. There are also examples of how to use each of them.

Recommended Color Palette

We recommend:

  • Use primarily the grays
  • Use the other colors only to accent a particular feature/item in your demo/app
  • Avoid using gradients, especially multi color gradients, use solid colors instead
  • Avoid detailed and colored textured backgrounds or use one of our 3 suggestions
  • Avoid aliased/jaggy graphics

Gray palette

Double dark gray sample Dark gray color sample Medium gray color sample Regular gray color sample Light gray color sample Pale gray color sample White color sample
Double dark gray Dark gray Medium gray Regular gray Light gray Pale gray White
HEX #1e1b18 HEX #35322f HEX #5d5b59 HEX #868482 HEX #aeadac HEX #d7d6d5 HEX #ffffff
RGB 30, 27, 24 RGB 53, 50, 47 RGB 93, 91, 89 RGB 134, 132, 130 RGB 174, 173, 172 RGB 215, 214, 213 RGB 255, 255, 255

Color palette

Dark Green color sample Medium Green color sample Light Green color sample Dark Blue color sample Blue color sample Violet color sample Purple color sample
Dark green Medium green Light green Dark blue Blue Violet Purple
HEX #006325 HEX #328930 HEX #80c342 HEX #14148c HEX #14aaff HEX #6400aa HEX #ae32a0
RGB 0, 99, 37 RGB 50, 137, 48 RGB 128, 195, 66 RGB 20, 20, 140 RGB 20, 170, 255 RGB 100, 0, 170 RGB 174, 50, 160
Red color sample Yellow color sample
Red Yellow
HEX #b40000 HEX #e0c31e
RGB 180, 0, 0 RGB 224, 195, 30

Textured backgrounds

Coming soon.

Recommended fonts and font sizes

In addition to the above recommendations, we also suggest a few simple guidelines regarding text and headers:

  • Use a sans-serif system font at 24 pt, Bold, for headers
  • Use a sans-serif system font at 14 pt, Regular, for body text
  • Use at least 8 pixel margin around text elements

Examples

Retrieved from "https://wiki.qt.io/index.php?title=Colors_and_Font_Guidelines&oldid=15283"