How to use the Noon Theme Color Palette

Color Palette

The Noon theme is a block-based WordPress theme that employs a versatile and comprehensive color palette. This palette is made up of 9 distinct colors, each designed to improve the visual aesthetic and usability of your WordPress site.

Main Colors [9]

There are nine main colors in the Noon theme:

1. Accent: This is a highlight color used to draw attention to specific elements.
2. Accent alt: An alternative to the accent color, often used for hover or active states.
3. Contrast 3: This is the darkest color used in the theme.
4. Contrast 2: A slightly lighter variant of Contrast-3.
5. Contrast 1: Even lighter than Contrast-2, used for medium contrast.
6. Contrast 0: The lightest of the contrast colors, used for low contrast.
7. Base 2: A dark base color.
8. Base 1: A medium base color.
9. Base 0: This is the lightest color in the theme, typically white.

In the Light Style, Base-0 is white and Contrast-3 is the darkest color. However, if you are using the Dark Style, these colors switch roles, so Contrast-3 becomes white and Base-0 will be the darkest color.

Global Colors [3]

The Noon theme also includes three global colors which function more as CSS properties than traditional colors:

1. currentColor: This takes the color of the current text.
2. inherit: This inherits the color from its parent element.
3. transparent: This applies no color, allowing underlying elements to show through.

Mixed Style Colors [3]

Finally, the Noon theme offers three unique colors that allow for the blending of the dark and light styles:

1. Fixed Accent Foreground: This color remains consistent, regardless of whether the light or dark style is active.
2. Fixed White: A color that stays white, irrespective of the theme style.
3. Fixed Dark: A color that remains dark, regardless of the theme style.

These colors enable more creative flexibility when designing your website, allowing for a seamless blend between dark and light styles.

Remember, color plays a crucial role in how your website is perceived and used. The Noon Theme Color Palette offers a rich set of colors that you can leverage to create an engaging and user-friendly WordPress site.

Creating a Color Palette with the Noon Theme

Accent Colors

The Accent color in the Noon theme serves as a focal point, drawing attention to key elements like calls to action and impactful statements. It’s the color that truly sets the rhythm for your brand, so it’s worth dedicating time to choose it wisely.

Once you’ve chosen your main Accent color, consider selecting a Accent-alt color. This could be another color that harmonizes with your main accent or simply a lighter or darker variant of your accent color.

Contrast (Text) Colors

In the Noon theme, Contrast or Text colors help establish a design hierarchy, ideal for text, borders, and more. These are usually darker shades of gray, determining the color of your heading and main site text. Opting for cool or warm off-grays, rather than pure gray, can enrich your site’s appearance. The exact shade should resonate with your accent colors.

Base (Background) Colors

The Base colors in the Noon theme are typically lighter shades, often white or off-white. These colors provide just enough contrast to distinguish different elements without overwhelming the text. Though your base color might be less noticeable to users, when chosen correctly, it unifies all other colors, resulting in a cohesive design.

Accessible (readability)

Another key factor that is not always taken into account when establishing a color palette is readability. Lucky for you, the web is full of tools to help you create the perfect contrast with your colors to be accessible. A free resource that I recommend is called WebAIM.