The Practical Guide to Color Scheme Creation: Light and Dark Modes

Choosing the right color palette ?? can be quite a challenge. However, you don't need to go through a multi-year art and design program focused on color. Understanding the logical construction of color schemes is enough. You can find these color schemes in various design systems that are open to the public. I recommend not copying a color palette but creating schemes that will allow your product to stand out from others on the market.

?? Please create a separate collection for the dark and light modes designs. Remember that your palette's primary colors, like blue, green, red, etc., should be brighter for the dark theme. As a result, the color palette will be different for both modes.

Check its accessibility ?? at all stages of the palette creation to ensure sufficient contrast between the color of future UI controls, text, and the background.

?? After creating the color palette and ensuring you are happy with the result, you can develop a set of color variables. Start with primitives (e.g., blue50, blue100, red900), and in the design process, determine which specific colors you will include in the semantic tokens collection. Semantic tokens are named colors representing a particular meaning or context in your design. Using artificial intelligence, you can optimize the process of creating a structure of semantic tokens.

The structure and complexity of the color tokens may vary depending on your unique product needs. Some recommended classifications might not fit your designs due to their complexity. In such cases, you and your team must work together and decide on a structure that aligns with your goals, fostering shared understanding and a unified approach. ??

?? For instance, in the Carbon Design System, the semantic color tokens relate to layers stacked on top of one another, similar to elevation properties or z-axes in 3D space. The top-level layers are named with "-01" in the color tokens' titles, while the layers behind them are named "-02," "-03," and so on. This example provides valuable insight into the complexity of design systems, enlightening us on our systems' possibilities and potential.

It's important to remember that only some products require an extensive system with tokens. Your scope, budget, team capabilities, and timeline ??will determine most aspects.

Please keep in mind ?? the following points:

1. ?? Remember to create balanced, cohesive color palettes that reflect the brand and product. If you're designing for light and dark modes, make color collections for each. The Atlassian Design System is an excellent example of using symmetry to manage saturated colors for both modes. Half of the colors are suitable for light mode, and the other half consists of darker shades for dark mode. This balance and cohesion in your color palettes will ensure the quality and consistency of your design. https://atlassian.design/foundations/color-new/color-palette-new/#picking-colors-for-dark-mode
2. ?? Define the role of colors in your design system, such as neutral, information, warning, danger, and accent. Use neutral colors for elements that have no special meaning but enrich the user interface. Consider using inverse colors when creating additional tension by adding dark components on a light background and opposite colors for light components on dark backgrounds.
3. ?? Plan for your elements' hover states from the beginning; sometimes, an additional color palette may be necessary for hovers.
4. ?? Test your color contrasts for accessibility. Evaluate text legibility on different backgrounds, ensuring higher contrast for smaller text.

Colors may change when working on other design system elements or layouts, but you can achieve maximum harmony and visual style quality through experimentation and iteration.??♀?

I would love to hear about your experiences and struggles creating a color palette. ?? Please share them in the comments.

#color #lightmode #darkmode #designsystem #colorprimitives #semanticcolors #colorvariables #colortokens #designharmony

https://atlassian.design/foundations/color-new

https://carbondesignsystem.com/elements/color/overview/

https://www.designsystems.com/color-guides/

https://webaim.org/resources/contrastchecker/

https://react.fluentui.dev/?path=/docs/theme-colors--docs