Qt wiki will be updated on October 12th 2023 starting at 11:30 AM (EEST) and the maintenance will last around 2-3 hours. During the maintenance the site will be unavailable.

Colors and Font Guidelines

From Qt Wiki
Revision as of 15:08, 14 January 2015 by Maintenance script (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

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.

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 color 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

Yellow color sample

Yellow color sample

Yellow color sample

Yellow 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

Coming soon.

Categories: