#d3d3d3 color RGB value is (211,211,211). #d3d3d3 color name is Light Gray color. #d3d3d3 hex color red value is 211, green value is 211 and the blue value of its RGB is 211. Cylindrical-coordinate representations (also known as HSL) of color #d3d3d3 hue: 0.00, saturation: 0.00 and the lightness value of d3d3d3 is 0.83. Text color Bootstrap text color. Bootstrap text color is a set of colors that can be used to change the font's color. A text area can also be set up to change color when a mouse hovers over it.
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.
- 1Recommended Color Palette
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 | 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 | 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 | 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
Article Categories:#Design & Content,#Accessibility,#Color
Posted on
.Are you checking color contrast in your design for optimal readability? Learn more from @troz's simple method.
When you create color palettes for your web design projects, are you testing the color combinations for contrast? If you're not, you might not be considering the eventual readability of the design and thus losing potential audience.
I've been working on a process to help me ensure good color contrast and readability in my projects. Thanks to some helpful color contrast accessibility tools, I think I have something that is working and wanted to share with others in the event that you find it helpful, too.
I should mention that I'm far from an accessibility expert. My goal here is to simply show that a little bit of effort can go a long way when it comes to selecting colors with optimal readability in mind. Check out W3C for a more thorough explanation. Also, check out Contrast Rebellion for an interesting look at the contrast problem.
1. Establish a color palette (with tints, tones, and shades)
While you can use color contrast tools to help you establish a color palette, you can also use the tools to help find good options within an existing palette. In this case, I'm using a pre-existing color palette and showing how I'm using tints, tones, and shades to help create more color contrast options.
My working color palette. From previous article, Add Colors To Your Palette With Color Mixing.
Establishing tints, tones, and shades. From previous article, From Darkness to Light: Color Versatility Using Tints, Tones, and Shades.
2. Find a good color contrast analyzer
There are plenty of good color contrast testing tools available on the web. Find one that works for you and use it to test background and foreground color combinations. Here are some options:
- Colorable(Demo) by Brent Jackson (*new favorite* h/t @JimJones)
- Luminosity Colour Contrast Ratio Analyser by Juicy Studio
- Colour Contrast Check by Jonathan Snook
- Color Contrast Checker by WebAIM
- Check My Colours by Giovanni Scala
- Color Safe by Donielle Berg & Adrian Rapp
Brent Jackson's Colorable (Demo) Perodua showroom in penang island.
3. Examine body text contrast
First, it's helpful to establish good body text values. I usually start with a neutral color palette and aim for the lightest gray with a WCAG AAA (Section 508 compliant) rating. The AAA rating ensures optimal readability while some brightness allows for softness in the text. Note that the color names are custom names that I've assigned to the colors (from previous article, Giving Colors More Colorful Names.)
Testing a neutral color palette as text on a white background (from previous article: Shades of Gray — Yes, Really.)
#373D3F or 'Raven' is my lightest gray within a AAA accessibility rating.
4. Evaluate button and link luminosity
The next step is to find a good color option for buttons and links (the actions). I take a slightly different approach here. Instead of going for AAA, I'm looking for AA (a reasonable standard to strive for) so that I can get a brighter color to contrast from the static text and draw attention to important links. For these purposes, I'm testing white (#FFFFFF) in combination with various colors.
The blues and reds have a higher success rate while the yellows and greens not so much.
I go with 'Darkest Alice' (#107896) for good combination of contrast and luminosity. 'Ruby' (#C02F1D) is also a decent option.
5. Establish various color combinations
Css Font Color Gray
Technosat receiver software. It's good to identify some additional color combinations for attention-grabbing call-outs and other possible needs.
My base example with dark gray 'Raven' text and a bright 'Darkest Alice' blue for links and buttons.
Example with darks on a lighter background.
Example with lights on a darker background.
6. Document in your style guide
I go with 'Darkest Alice' (#107896) for good combination of contrast and luminosity. 'Ruby' (#C02F1D) is also a decent option.
5. Establish various color combinations
Css Font Color Gray
Technosat receiver software. It's good to identify some additional color combinations for attention-grabbing call-outs and other possible needs.
My base example with dark gray 'Raven' text and a bright 'Darkest Alice' blue for links and buttons.
Example with darks on a lighter background.
Example with lights on a darker background.
6. Document in your style guide
The last step is to keep a reference guide handy with your test results while adding notes to your style guide. Your clients and audience will be impressed that your colors are chosen for thoughtful reasons -- optimal readability -- and you'll sail through QA testing with additional options should you need them.
Sample documentation for a style guide.
Summary
That's really all there is to it, but you could break this down into three even simpler chunks if you like:
- Reading Text: For reading purposes, find a high contrast pairing for most of your body copy (the heavy lifting).
- Action Links: For links, explore colors that are both luminous and high contrast to make it clear where actions are. (If you've done this right, there will be some contrast between your reading text and action links.)
- Extra, Extra!: Create and document various color combinations for call-outs intended to draw extra attention.
See also:
Font Color Gray
Note: This article is part of a series on color as it relates to designing for the web. For more in the series, check out these articles:
