Fluent UI Color Reference

The Fluent UI color palette reference lists the twelve Fluent colour families — communication blue, navy blue, royal blue and the rest — each as an eleven-step ramp with hex values.

What is Fluent UI Color Reference?

Twelve families are shown, one block each: communication-blue, navy-blue, royal-blue, teal, green, dark-green, red, dark-red, magenta, purple, orange and yellow. Every block carries eleven tiles labelled 50 through 950 with the hex printed under each swatch, so each family reads as a strip from its palest step to its deepest.

• The naming is the fingerprint of this system.
• Fluent does not stop at blue: it ships three of them, and the difference between communication-blue at #0078d4 and royal-blue at #004e8c is not subtle once the ramps are side by side.
• It also ships two of both red and green — a bright pair and a dark pair — so the second half of the list is worth reading closely when a UI needs a state colour that sits apart from the brand one.

Each anchor above is a Fluent published colour. The eleven steps around it are generated here at fixed lightnesses, holding the base's hue and chroma constant, which previews the family in the right hue while leaving individual steps short of an exact match with a themed build of the framework.

One difference between this page and the framework is worth knowing about. Fluent's real system is delivered as role-based tokens with light and dark themes, where a colour is referenced by the job it does — a background, a border, a text colour — and the themes swap the underlying values. This page shows the raw families and their steps, so it answers what a named colour looks like rather than which token a component should use.

In use, the reference suits two jobs: resolving one of the framework's colour names into a value, and comparing the families before one is chosen. Twelve ramps in one scroll also makes the system's emphasis obvious — three blues and two each of red and green is a stronger commitment to those hues than most colour systems make.

Comparing the families is where the stacked layout earns its keep. The three blues are deliberately graded — royal darker than communication, navy darker still — so a product can move between them for states without leaving the blue family. The two reds and the two greens work the same way, and the magenta and the purple sit close enough that only one of them is usually needed. Seeing those gradations laid out makes it obvious which of the framework's colours are alternatives to each other and which are genuinely different roles.

Limits: no search, no copy buttons, no alpha values, no light or dark theme variants and no token names, so a component's role cannot be looked up here.

• Within those bounds, as a fluent ui color palette reference it gives the microsoft fluent colors in full — every fluent design colors family with its fluent palette hex values printed and the fluent ui color names exactly as the framework writes them.
• The page is static apart from the swatches it paints: the same twelve families render on every visit, so a value noted today is the value tomorrow.

How to use Fluent UI Color Reference

1. Find the family you need; the blocks run from the three blues through to orange and yellow.
2. Read the eleven steps from 50 at the lightest to 950 at the darkest.
3. Take the hex printed under the step, or use the anchor colour that the family is built from.

When to use Fluent UI Color Reference vs related tools

Use this when a project follows Fluent UI and a family's values are needed, or when the framework's three blues have to be compared. Use the Tailwind or Material references when a different system is in play. The two neutral ramps invite a direct comparison with the IBM Carbon color reference, and a borrowed family that has to be formalised is what the design token generator carries.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Fluent UI Color Reference