Color range

The color range has no choices: it is drawn one way.

Two ranges, the step in use ringed; the number under each step is its contrast on white.

Brand11 steps · 600 in use

very light pale red, 50, contrast 1.0 to 1
very light pale red, 100, contrast 1.0 to 1
very light pale red, 200, contrast 1.1 to 1
very light pale red, 300, contrast 1.5 to 1
light vibrant red, 400, contrast 2.5 to 1
vibrant red, 500, contrast 3.7 to 1
dark vibrant red, 600, contrast 5.7 to 1
dark vibrant red, 700, contrast 7.5 to 1
dark red, 800, contrast 10.9 to 1
very dark grayish red, 900, contrast 15.0 to 1
very dark grayish red, 950, contrast 18.7 to 1

Neutral11 steps · 700 in use

very light pale cyan blue, 50, contrast 1.0 to 1
very light pale cyan blue, 100, contrast 1.0 to 1
very light pale cyan blue, 200, contrast 1.1 to 1
light pale cyan blue, 300, contrast 1.6 to 1
light pale cyan blue, 400, contrast 2.4 to 1
grayish cyan blue, 500, contrast 3.6 to 1
dark grayish cyan blue, 600, contrast 5.5 to 1
dark grayish cyan blue, 700, contrast 7.5 to 1
dark grayish cyan blue, 800, contrast 10.9 to 1
very dark grayish cyan blue, 900, contrast 15.3 to 1
very dark grayish cyan blue, 950, contrast 18.7 to 1

Given onChange, the strip is a list to pick from: Tab reaches the step in use, the arrow keys move, Space or Enter picks.

Brand11 steps · 600 in use

The ratios left out, for a range shown for its colors alone.

Neutral11 steps · 500 in use

very light pale cyan blue, 50
very light pale cyan blue, 100
very light pale cyan blue, 200
light pale cyan blue, 300
light pale cyan blue, 400
grayish cyan blue, 500
dark grayish cyan blue, 600
dark grayish cyan blue, 700
dark grayish cyan blue, 800
very dark grayish cyan blue, 900
very dark grayish cyan blue, 950

Purpose

Shows every step of one color range in a strip, lightest to darkest, each with its swatch, its name and its contrast against white, so a step's number means the same thing in every range. It is for tools that build or explain a color system, such as a token editor or a theme builder. To show a few unrelated colors, use color swatches; to choose any color, use the color picker.

When to use

To show a color range as a whole: a brand range, a neutral range, a data range.
To let a reader choose which step of a range a role uses.

When not to use

For a handful of colors that are not one range. Use color swatches, or the color swatch picker to choose one.
To check one text color against one background. Use the contrast pair.

Usage rules

Do

Show every step of the range, in order.
Name each step the way the system names it, such as "600".

Don't

Show only some steps, which hides how the range moves from light to dark.
Put words on the colors: the ratio is under the step, where its color cannot hide it.

Brand11 steps · 600 in use

very light pale red, 50, contrast 1.0 to 1
very light pale red, 100, contrast 1.0 to 1
very light pale red, 200, contrast 1.1 to 1
very light pale red, 300, contrast 1.5 to 1
light vibrant red, 400, contrast 2.5 to 1
vibrant red, 500, contrast 3.7 to 1
dark vibrant red, 600, contrast 5.7 to 1
dark vibrant red, 700, contrast 7.5 to 1
dark red, 800, contrast 10.9 to 1
very dark grayish red, 900, contrast 15.0 to 1
very dark grayish red, 950, contrast 18.7 to 1

Show every step of the range, in order, so a step’s number means the same in every range.

Brand3 steps · 600 in use

very light pale red, 100, contrast 1.0 to 1
dark vibrant red, 600, contrast 5.7 to 1
very dark grayish red, 900, contrast 15.0 to 1

Don't

Pick out a few steps, which hides how the range moves from light to dark.

Anatomy

The block: a column with the name row over the steps.
The head part, the name row: the range's name (the title part, in Label MD) and a line of facts (the meta part, in Body XS), such as how many steps there are and which is in use. It can be left out; the name still names the strip.
The steps part: the steps side by side, sharing the width equally. In a narrow space they wrap onto rows of six.
The step part, one per step: a color swatch stretched to the step's width and 40 px tall (the swatch part), the step's name in Label SM (the name part) and its ratio in Body XS (the ratio part), which can be left out. The words sit on the page under the color, never on it.
The step in use rings its swatch inside its edge. In a range the reader can pick from, hover draws the swatch's edge stronger, and keyboard focus draws the ring in the focus color.

Behavior

The ratio under each step is worked out from its color against white, or against the color given, and written with one decimal, never rounded up past what it is. The range holds the step in use from a first value, or follows the one the page gives it.

Given a change handler, the strip becomes a list to pick from: a press on a step picks it, and the page hears the step's name. Without one, the strip only shows the range, with the step in use ringed.

What it does for you

The strip is a list named by the range's name. Each step is told in words: its color, such as "vibrant red", its name and its contrast ("contrast 4.8 to 1"). The step in use is marked as the current one.
A range to pick from is a listbox, one stop in the Tab order: Tab reaches the step in use, the arrow keys move between steps, Home and End go to the first and last, and Space or Enter picks the step with focus.
The step in use is shown by a ring, a shape, as well as by the line of facts, never by color alone.
In forced colors mode the rings take the reader's own colors.

What you must do

Give the words the range says by itself, such as the ratio read aloud, in the page's own language. They keep their English unless the page gives its own.

How to test

Tab to a range you can pick from: one stop takes focus, on the step in use, with the ring showing in both themes and in a forced-color mode. Move with the arrow keys, then press Space or Enter to pick.
With a screen reader, the range is read by its name, each step by its color, name and contrast, and the step in use as current.
Read the range with the colors taken away: the ring and the line of facts still show the step in use.
With text at 200% and the page 320 pixels wide, the steps and their facts stay readable.

Keyboard

Color range keys
Key	What it does
`Tab`	Moves focus to the step in use. The range is one stop.
`Right Arrow`or`Down Arrow`	Moves focus to the next step. In a right-to-left language, Right Arrow moves to the previous step.
`Left Arrow`or`Up Arrow`	Moves focus to the previous step. In a right-to-left language, Left Arrow moves to the next step.
`Home`or`End`	Moves focus to the first or last step.
`Space`or`Enter`	Picks the step with focus.

The files the color range is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.

Stylesheet

color-range.css

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140

/* smbk-color-range — Color range. Figma "Color range" 7416:21, a strip of "ColorRangeStep" 7416:19 (State: Default, Hover,
 * Selected, Focus).
 * A name row (the range's name in Label MD and a line of facts in Body XS) over the steps, which share the width in equal
 * columns, the extra small inline step apart. Each step is a color swatch (smbk-color-swatch) stretched to the width of its
 * column and 40 tall, its name in Label SM and its contrast ratio in Body XS under it. The words sit on the page, never on
 * the color, so no step needs a text color of its own. The step in use rings its swatch inside its edge in the inverse
 * border color, two pixels wide: a shape as well as a color. In a range a reader can pick from, hover draws the swatch's
 * edge in the strong border color and keyboard focus draws the ring in the focus color. In a narrow space the eleven
 * steps wrap onto two rows, so the names and ratios keep their room. */

.smbk-color-range {
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-stack-sm);
  min-width: 0;
}

/* The block frames the words it hides for screen readers, so they stay inside it wherever it is placed: without a
   frame they hang from the page itself and stretch it, past the end of an area that scrolls. No weight, so a parent
   that places the block keeps its say. */
:where(.smbk-color-range) {
  position: relative;
}

.smbk-color-range__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--smbk-space-inline-md);
}

.smbk-color-range__title {
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-label-md-font-family);
  font-size: var(--smbk-typography-label-md-font-size);
  font-weight: var(--smbk-typography-label-md-font-weight);
  line-height: var(--smbk-typography-label-md-line-height);
  letter-spacing: var(--smbk-typography-label-md-letter-spacing);
}

.smbk-color-range__meta,
.smbk-color-range__ratio {
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-body-xs-font-family);
  font-size: var(--smbk-typography-body-xs-font-size);
  font-weight: var(--smbk-typography-body-xs-font-weight);
  line-height: var(--smbk-typography-body-xs-line-height);
  letter-spacing: var(--smbk-typography-body-xs-letter-spacing);
}

/* The steps share the width equally, however many there are. */
.smbk-color-range__steps {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--smbk-space-stack-sm) var(--smbk-space-inline-xs);
  margin: 0;
  padding: 0;
  list-style: none;
  outline: none;
}

.smbk-color-range__step {
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-stack-xs);
  min-width: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.smbk-color-range__step[role="option"] {
  cursor: pointer;
}

.smbk-color-range__name {
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-label-sm-font-family);
  font-size: var(--smbk-typography-label-sm-font-size);
  font-weight: var(--smbk-typography-label-sm-font-weight);
  line-height: var(--smbk-typography-label-sm-line-height);
  letter-spacing: var(--smbk-typography-label-sm-letter-spacing);
}

.smbk-color-range__name,
.smbk-color-range__ratio {
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

/* The swatch stretched to its column, 40 tall, with the control's small corner. Two classes, so these win over the
   swatch's own size whichever stylesheet loads first. */
.smbk-color-range__swatch.smbk-color-swatch {
  width: 100%;
  height: var(--smbk-size-40);
  border-radius: var(--smbk-radius-control-sm);
}

@media (hover: hover) {
  .smbk-color-range__step[role="option"]:hover .smbk-color-range__swatch.smbk-color-swatch::after {
    border-color: var(--smbk-color-border-strong);
  }
}

/* The step in use: aria-current in a list, aria-selected in a range a reader picks from. */
.smbk-color-range__step[aria-current="true"] .smbk-color-range__swatch.smbk-color-swatch::after,
.smbk-color-range__step[aria-selected="true"] .smbk-color-range__swatch.smbk-color-swatch::after {
  border-width: var(--smbk-border-width-2);
  border-color: var(--smbk-color-border-inverse);
}

.smbk-color-range__step:focus-visible .smbk-color-range__swatch.smbk-color-swatch::after {
  border-width: var(--smbk-border-width-2);
  border-color: var(--smbk-color-border-focus);
}

/* Words for screen readers only: the ratio said in full. */
/* .smbk-color-range__hidden: hidden from view, kept for screen readers and the keyboard, by the shared rule in visually-hidden/visually-hidden.css. */

/* ---- the narrow form: the steps wrap onto rows of six, so their names and ratios keep their room ---- */
@container style(--smbk-layout: narrow) {
  .smbk-color-range__steps {
    grid-auto-flow: row;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ---- high contrast (forced colors) ---- */
/* The rings are the swatch's edge, which keeps the reader's colors: the step in use and the focused step draw it in
   the highlight color, so neither is lost. */
@media (forced-colors: active) {
  .smbk-color-range__step[aria-current="true"] .smbk-color-range__swatch.smbk-color-swatch::after,
  .smbk-color-range__step[aria-selected="true"] .smbk-color-range__swatch.smbk-color-swatch::after {
    border-color: CanvasText;
  }

  .smbk-color-range__step:focus-visible .smbk-color-range__swatch.smbk-color-swatch::after {
    border-color: Highlight;
  }
}

Tokens it reads

Color range tokens
Token and CSS	Value	Preview	Foundation
space.stack.sm--smbk-space-stack-sm	comfortable: 8pxcompact: 6pxchanges with density		Spacing
space.inline.md--smbk-space-inline-md	comfortable: 8pxcompact: 6pxchanges with density		Spacing
color.text.default--smbk-color-text-default	light: #232527dark: #e7ebf0changes with theme		Color
typography.label-md--smbk-typography-label-md-font-family--smbk-typography-label-md-font-size--smbk-typography-label-md-font-weight--smbk-typography-label-md-line-height--smbk-typography-label-md-letter-spacing--smbk-typography-label-md-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 14pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px	The quick brown fox	Typography
color.text.subtle--smbk-color-text-subtle	light: #4e555edark: #9ba5b1changes with theme		Color
typography.body-xs--smbk-typography-body-xs-font-family--smbk-typography-body-xs-font-size--smbk-typography-body-xs-font-weight--smbk-typography-body-xs-line-height--smbk-typography-body-xs-letter-spacing--smbk-typography-body-xs-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 12pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px	The quick brown fox	Typography
space.inline.xs--smbk-space-inline-xs	4px		Spacing
space.stack.xs--smbk-space-stack-xs	4px		Spacing
typography.label-sm--smbk-typography-label-sm-font-family--smbk-typography-label-sm-font-size--smbk-typography-label-sm-font-weight--smbk-typography-label-sm-line-height--smbk-typography-label-sm-letter-spacing--smbk-typography-label-sm-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 12pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px	The quick brown fox	Typography
size.40--smbk-size-40	40px		Size
radius.control.sm--smbk-radius-control-sm	4px		Radius
color.border.strong--smbk-color-border-strong	light: #9ba5b1dark: #373d43changes with theme		Color
border-width.2--smbk-border-width-2	2px		Border width
color.border.inverse--smbk-color-border-inverse	light: #232527dark: #f9fafbchanges with theme		Color
color.border.focus--smbk-color-border-focus	light: #cc0d0ddark: #f34336changes with theme		Color

Manifest

color-range.manifest.json

{
  "name": "color-range",
  "block": "smbk-color-range",
  "summary": "The steps of one color range in a strip, each with its swatch, its name and its contrast against white, with the step in use ringed.",
  "adapt": "css",
  "axes": {},
  "flags": {},
  "parts": [
    "head",
    "title",
    "meta",
    "steps",
    "step",
    "swatch",
    "name",
    "ratio",
    "hidden"
  ],
  "figmaNodeId": "7416:21"
}

Menu

Customize the preview

Options

Examples

Usage

Pick a step

Without the ratios

Guidelines

Purpose

When to use

When not to use

Usage rules

Do

Don't

Anatomy

Behavior

Accessibility

What it does for you

What you must do

How to test

Keyboard

Source

Options

Examples

Usage

Pick a step

Without the ratios

Guidelines

Purpose

When to use

When not to use

Usage rules

Do

Don't

Anatomy

Behavior

Accessibility

What it does for you

What you must do

How to test

Keyboard

Related

Source