If you tend towards more golds and orange-yellows such as #f39c12 or #ffbb33 on soft black or dark grey backgrounds such as #333333 or #555555 then you should find it is easy on the eyes. The yellow here is primary but used only to highlight. This site gives a very nice example of how to use black and yellow, using white to off-set the potential harshness of the colour scheme. This wonderful UI kit by Simon Eramo gives you a good idea of how to use bright colours on a dark background This site gives you an idea of what colours look like on a background it's very useful to work out what hurts your eyes and what doesn't. This makes it much easier to view whilst keeping the original idea for a colour scheme.

The background is also primarily a rich black (#252525 or similar) not true black (#000000). Also try not to use pure white either but opt for a gentler light grey such as #ebebeb.īold colours such as yellow with a dark background are commonly seen with the current trend of flat design, however these are always a muted or softer version of the colour, and normally not a primary version of it. Designers around the world will love to use gray color shades in their layouts or UI designs to look more professional and modern. Make sure you're using fonts that are easily legible and you only use yellow for highlighting, as you have done. Reflecting on the principles outlined above, here are some excellent examples of dark UI design: The Atom Finance website.

Yellow can work on a black background, but it's as much about fonts and where the colour is used that affect the overall look of the site. In some instances, it might be best to specify an element’s text color as true black (000000) in the design system to achieve good contrast on a light gray background. A few years ago if you had asked this question then the answer would have been a resounding yes! However we've been redefining design styles and ideas lately so it's now a little more complex.

Gray and black background design