Dashboard color palette generator

From one brand color to a full admin palette

Most color tools give you a scale of one hue. A dashboard needs a system: quiet neutrals that carry most of the screen, one accent that marks what is clickable, status colors that mean the same thing everywhere, and chart colors that stay apart when six series share a bar. This generator builds that system in four steps.

1. Read the brand color in OKLCH. Your hex value is converted to lightness, chroma and hue. All later choices are made in that space, so steps look evenly spaced to the eye instead of to the math.
2. Build the neutrals. Backgrounds, surfaces, borders and text get a small dose of your brand hue. Pure greys next to a saturated accent tend to look dull; tinted greys make the whole interface feel like one product.
3. Place the primary. The primary scale runs from 50 to 950 with your exact color on the step nearest its lightness. For buttons, the brand color is used as is when it works in the chosen theme. If it is too light for white text (think yellow) or too dark for a dark background (think navy), the same hue moves to a usable lightness.
4. Check every pair. Text against backgrounds, button text against the primary, badge text against its fill, input borders and chart colors against cards. Any pair under the WCAG AA limit is darkened or lightened until it passes, and the check list shows the ratio before and after.

What is in the palette

Tips for a dark dashboard color palette

• Skip pure black. A background around oklch(0.17) with a hint of hue is easier on the eyes and leaves room for shadows and elevation.
• Lighter means closer. In dark mode, raise cards by making them lighter than the page instead of adding a drop shadow nobody can see.
• Soften the text. Off-white (around 96% lightness) reads better than #ffffff on dark grey and causes less halation for people with astigmatism.
• Brighten the accents. A primary and status colors that work on white are often too dark on a dark surface. Raise their lightness and keep the hue.
• Mute the fills. Badge and alert backgrounds should be dark, low-chroma versions of the status hue, with a light text color on top.
• Design both themes from the same tokens. Name colors by role (surface, fg-muted) instead of value, so one class works in light and dark.

Using the export

With Tailwind CSS v4, paste the @theme block below @import "tailwindcss"; and the tokens become utilities right away:

<div class="bg-bg text-fg">
  <div class="rounded-xl border border-border bg-surface p-4">
    <p class="text-fg-muted">Revenue</p>
    <button class="bg-primary text-on-primary">New report</button>
    <span class="bg-success-soft text-success-fg">Paid</span>
  </div>
</div>

Without Tailwind, use the CSS variables export and reference them as var(--surface). Both exports can include a second block for the other theme, so a class on the root element switches the whole dashboard between light and dark.

Want to see the result on more than one mock screen? AirControl is a Tailwind CSS admin theme with 191 fully designed pages, from analytics dashboards to billing and chat, ready for your palette.