#UI PALETTE GENERATOR GENERATOR#
#UI PALETTE GENERATOR FULL#

If you're building something where you need to use color to distinguish or categorize similar elements (like lines on graphs, events in a calendar, or tags on a project), you might need even more accent colors.Īll in, it's not uncommon to need as many as ten different colors with 5-10 shades each for a complex UI. You'll want multiple shades for these colors too, even though they should be used pretty sparingly throughout the UI. You might also need colors to emphasize different semantic states, like red for confirming a destructive action: On top of primary colors, every site needs a few accent colors for communicating different things to the user.įor example, you might want to use an eye-grabbing color like yellow, pink, or teal to highlight a new feature: Ultra-light shades can be useful as a tinted background for things like alerts, while darker shades work great for text. Just like with greys, you need a variety (5-10) of lighter and darker shades to choose from.

These are the colors that determine the overall look of a site - the ones that make you think of Facebook as 'blue', even though it's really mostly grey. Most sites need one, maybe two colors that are used for primary actions, emphasizing navigation elements, etc. True black tends to look pretty unnatural, so start with a really dark grey and work your way up to white in steady increments. Not so many that you waste time deciding between shade #77 and shade #78, but enough to make sure you don't have to compromise too much.

In practice, you want 8-10 shades to choose from (more on this later). You'll need more greys than you think, too - three or four shades might sound like plenty but it won't be long before you wish you had something a little darker than shade #2 but a little lighter than shade #3. Text, backgrounds, panels, form controls - almost everything in an interface is grey. You can break a good color palette down into three categories. To build something real, you need a much more comprehensive set of colors to choose from. You can't build anything with five hex codes. Well, unless you want your site to look like this: What you actually need This calculated and scientific approach to picking the perfect color scheme is extremely seductive, but not very useful. tSlot(themeRules.Ever used one of those fancy color palette generators? You know, the ones where you pick a starting color, tweak some options that probably include some musical jargon like 'triad' or 'major fourth', and are then bestowed the five perfect color swatches you should use to build your website? tSlot(themeRules.backgroundColor, getColorFromString('#ffffff'), false, true, true) ThemeGenerator.insureSlots(this.themeRules, false)

#UI PALETTE GENERATOR FULL#

My naive approach was to use createTheme, since it accepts a partial theme, and I hoped to get a full one back: const theme = createTheme( from 'office-ui-fabric-react/lib/utilities/color/interfaces' Ĭonst themeRules = themeRulesStandardCreator()

#UI PALETTE GENERATOR GENERATOR#

So to get to the point: Is it possible to use the functionality of the theme generator in any Office UI Fabric application?

This is just what the theme generator on the Office UI Fabric website does. The only things I want to define are the primary theme color, the body text color and the body background color. I want to be able to apply a theme to my Office UI Fabric application with all the different color shades an Office UI Fabric theme should have, without having to define each shade myself. Since the title attempts to address every part of my question, which is very difficult, I need to clearify a bit:

Ui palette generator