Colors and brand roles
Add colors, tune them by hex or HSL, pull colors from a photo, and give colors brand roles.
Each color in the palette has its own card: a big swatch, a name, a hex value, a role, HSL sliders and a spec.
Add colors #
- + Color, in the toolbar or at the end of the swatches, adds a new color.
- From a photo… picks a handful of colors out of a material board or site photo and adds them to the palette. The photo is processed on your computer. It's never uploaded and never saved; only the colors are kept.
Change a color #
On the card:
- Type a name in the name box.
- Type a hex value, like
#2563eb, and press Enter. - Click the small color box to use your browser's color picker.
- Click ⌖ to pick a color from anywhere on your screen. It shows only in browsers that support it.
- Drag the H, S and L sliders to adjust hue, saturation and lightness.
Under the sliders, the card shows the color's RGB values and an approximate LRV. That LRV is a screen estimate from the hex. Use the manufacturer's published LRV for specification; see Finish schedule and export.
Click the big swatch to copy its hex value.
Give a color a brand role #
Pick a role in the card's role list: primary, accent, background, surface or text. Pick no role for a plain swatch.
A role belongs to one color at a time. Giving a role to a color takes it off whichever color had it before.
Once any color has a role, the brand preview appears above the swatches. See Contrast checks.
Reorder, copy or remove a color #
At the bottom of each card:
- ◀ and ▶ move the color earlier or later. The order is the palette's order, in the schedule and every export.
- The copy button duplicates the color. The copy keeps the spec but not the schedule tag or the role.
- × removes it.