A range of grays, whites, and blacks used for text, backgrounds, and structural elements to maintain content hierarchy.
Neutrals are the canvas of your interface. They provide the structure and breathing room that allows your primary and semantic colors to shine. Without a balanced neutral palette, designs can feel cluttered, overwhelming, or unstructured.
The darkest neutral, used for headings and body text. High contrast for readability.
A medium gray for supporting text, labels, and less important information.
Light grays used to define structure without being distracting.
The color of cards, modals, and elevated surfaces. Usually white in light mode.
White and very light grays (off-white) for page backgrounds and cards.
See how your neutral colors affect readability and structure.
This card demonstrates the relationship between your text colors, borders, and backgrounds. Good neutrals provide structure without drawing attention away from the content.
Ensure primary text meets WCAG AAA (7:1) and secondary text meets AA (4.5:1).
Use a very dark gray (e.g., #1F2933) instead of #000000 for a softer, more natural look.
Consider adding a slight tint of your primary color to your neutrals for better harmony.