Color, contrast, tints and shades

On this page

You type one hex per color. The RGB and CMYK values, the contrast ratings, the eleven tints and shades, the token files and the Adobe swatch file are all worked out from it.

Where colors live

WhereDashboard, Brand manual, Content, a section, Color block

Colors live in the Color block of the editor. The palette with HEX, RGB and CMYK, and which pairs are readable. A manual can have several Color blocks, and all of them feed the same export. Editing them needs the permission labeled edit sections and content; the export page and the swatch file need only view the brand manual. Nothing here is held back by plan: the Color block and every export format are on every plan, Free included. See Plans and limits.

What one color holds

name

Free text, for example Primary. The token name is made from it, so keep it short and stable.

role

Primary, Secondary, Accent, Neutral or Other. For the people editing. It is not printed on the card and no token carries it.

hex

The color itself. Everything derived is computed from it.

rgb

Filled in for you when the hex changes. Type your own value and yours is used instead.

cmyk

The same. The value filled in for you is a plain conversion from RGB, so if your printer gave you numbers that match on their stock, type those.

spot

The ink a printer matches to, such as a Pantone or HKS number. Free text. It shows on the card but is in no token file and in no swatch group.

usage

A sentence saying when to use the color. It shows under the name on the card and travels in the JSON and CSV token files.

display

Which values the card prints: HEX, RGB and CMYK, HEX only, RGB only or CMYK only. This hides rows from the card only. A color set to CMYK only still exports its hex everywhere.

Typing into HEX, RGB or CMYK converts the other two. RGB is clamped to 0 to 255 per channel and CMYK to 0 to 100 per plate. A value that cannot be read is kept as text and the hex stays where it was. A three digit hex is read as six, so #abc is #aabbcc; capitals and a missing hash are fine.

What a reader can copy

On the published page each card is a swatch with one row per value, and every row has its own copy button. Clicking the swatch copies the hex. Hex is copied in capitals with the hash. RGB and CMYK are copied as plain numbers, 194, 84, 44 and 0, 57, 77, 24, without an rgb() wrapper, so they paste into a design tool as well as into code. The spot row is printed only when the color has one. See what a reader can do.

The two ratings on every card

Two pills at the foot of every card, White and Black, show the WCAG 2.1 contrast ratio of the color against plain white and plain black. The pill is green when the pair passes AA for body text, amber when it only reaches large text, and red when it fails.

Rating	From	What it covers
AAA	7 to 1	The highest level, for body text
AA	4.5 to 1	Body text at any size. This is what most people mean by accessible
AA Large	3 to 1	Text of 24px, or 18.66px bold, and larger. Headings and eyebrows
Fail	Below 3 to 1	Not readable as text at any size

The sample color #c2542c rates AA on white at 4.57 to 1. A rating is about text on the color, not about the color itself: a pale yellow that fails against white is still a good background, it just cannot carry white words.

The contrast matrix

When a block holds more than one usable color, a grid of every pair is drawn under it. Rows are backgrounds, columns are text colors, and each cell shows the real pair with its ratio.

Body text and Large text switch the threshold between 4.5 to 1 and 3 to 1, and a line above the grid counts how many pairs reach it.
A failing cell has a dashed red outline and a red chip, and the sample inside is meant to be hard to read. The diagonal reads same.
The same hex under two names is counted once, colors whose hex cannot be read are left out, and with fewer than two left the matrix is not drawn.

This is not the Accessibility block

The matrix is automatic and covers every pair. In the Accessibility block you name the pairs that matter, give each a label, and it prints the ratio with an AA or AAA level for normal text and for large text separately.

Tints and shades

Every color can carry eleven steps, numbered the way common frameworks number them. They are built in OKLCH, so a lighter step is the same color and only lighter. The step nearest your color's own lightness is your hex exactly, and that one is ringed in the grid. For #c2542c the eleven are:

Step	Hex	Text on it
50	#FDF5F2	Dark text
100	#F9E7E1	Dark text
200	#F3D1C5	Dark text
300	#E9B3A0	Dark text
400	#DB8E74	Dark text
500	#CB6948	Dark text
600	#C2542C	Your hex, ringed
700	#963F20	Light text
800	#793118	Light text
900	#612611	Light text
950	#421808	Light text

Show tints and shades on the public page is one switch per block and starts off, so a manual with two Color blocks can show the scale for one and not the other.

On: each card lays the eleven steps out as buttons labeled with their number, each copying its own hex. The steps are also exported as tokens and as a swatch group.
Off: a thin strip of the same colors is drawn under the values as decoration, with nothing to click. No step reaches the token files or the swatch file.

The three copy buttons above the grid

Copy CSS, Copy SCSS and Copy JSON sit above the grid on the published page and put that block's colors on the clipboard: a :root block of --primary: #c2542c;, the same list as $primary: #c2542c;, or one object under a color key.

These three are not the export files

They carry the hex and nothing else: no color- prefix, no tints and shades, no RGB or HSL companions, and two colors with the same name are written twice rather than numbered. For anything a build consumes, take the files from the export page.

What reaches the token export

WhereDashboard, Export tokens, Design tokens

The export collects the colors of every Color block in the manual, in the order the sections run. A color whose hex cannot be read is left out. Steps are included only for blocks whose tints and shades switch is on.

A token name is the color name lowercased, with anything that is not a letter or a digit turned into a hyphen: Deep sea 40 becomes deep-sea-40. A color with no name takes its position instead, color-1. Two colors that produce the same name are numbered, so the second is primary-2. The Adobe swatch file uses the name as you typed it.

Format	File	How a color is named
CSS	tokens.css	--color-primary, with --color-primary-rgb and --color-primary-hsl beside it. Each step is --color-primary-500.
SCSS	_tokens.scss	$color-primary and $color-primary-rgb. Each step is $color-primary-500.
Less	tokens.less	@color-primary. No rgb companion and no steps.
JS and TS	tokens.ts	A colors object, keys camel cased from the token name. No steps.
Tailwind	tailwind.tokens.js	Under theme.extend.colors: primary, and primary-500 for each step, so a step is a utility class such as bg-primary-500.
JSON	tokens.json	color.primary carries hex, rgb, hsl, cmyk and the usage note when there is one. Steps sit apart under colorScale.primary.500.
W3C Tokens	tokens.w3c.json	color.primary and color.primary-500, each with $value and $type color.
Style Dictionary	tokens.sd.json	color.primary with a value. No steps.
SwiftUI	BrandColors.swift	BrandColors.primary, as red, green and blue between 0 and 1. No steps.
Compose	Brand.kt	BrandColors.Primary, as Color(0xFF...). No steps.
Flutter	brand.dart	BrandColors.primary, as Color(0xFF...). No steps.
Android XML	colors.xml	A color element named primary, hyphens written as underscores. No steps.
CSV	colors.csv	A row per color under name, hex, rgb, hsl, cmyk and usage. No steps.

The CSS file for a palette of one color with its scale:

tokens.css

:root {
  --color-primary: #c2542c;
  --color-primary-rgb: 194, 84, 44;
  --color-primary-hsl: 16, 63%, 47%;
  --color-primary-50: #fdf5f2;
  --color-primary-100: #f9e7e1;
  --color-primary-200: #f3d1c5;
  --color-primary-300: #e9b3a0;
  --color-primary-400: #db8e74;
  --color-primary-500: #cb6948;
  --color-primary-600: #c2542c;
  --color-primary-700: #963f20;
  --color-primary-800: #793118;
  --color-primary-900: #612611;
  --color-primary-950: #421808;
}

The same palette as the CSV, which also carries the usage note:

colors.csv

name,hex,rgb,hsl,cmyk,usage
"primary","#c2542c","rgb(194, 84, 44)","hsl(16, 63%, 47%)","cmyk(0, 57, 77, 24)","Buttons and links"

Five of the 13 formats carry the steps: CSS, SCSS, Tailwind, JSON and W3C Tokens. The other eight carry the palette only. The read only API answers the W3C document at /api/v1/manuals/acme/tokens.json. See the API documentation (opens in a new tab) and Design tokens.

Download all formats (.zip) puts every format at the root of the archive and, under by-block/colors/, the colors on their own as CSS, JSON, W3C JSON and Tailwind. Take that folder when you want the palette without the rest of the manual.

What never becomes a token

The role, the spot color and the Show on public page choice. The usage note reaches the JSON and the CSV only.

The Adobe swatch file

WhereDashboard, Export tokens, Download .ase (Adobe)

Download .ase (Adobe) writes an Adobe Swatch Exchange file for Illustrator, Photoshop and InDesign, named after the manual, for example acme-colors.ase. The button appears only when the manual has at least one readable color. The same file is colors.ase in the all formats download and tokens/colors.ase in the full brand kit.

The first group is named after the manual and holds the palette, each swatch under the color name as typed.
Then one group per scale, named Primary tints and shades, with eleven swatches from Primary 50 to Primary 950. These exist only for blocks that show their tints and shades.
Every swatch is RGB and global: change the swatch in Illustrator and everything painted with it follows.

Where the palette turns up elsewhere

Other blocks pick from it. A block that names a color for a rule, a contrast pair or a chart shows the manual's own colors as one click each under the field.
The editor suggests additions. Under the color rows sit four neutrals derived from your first color, among them Text on primary, Light surface and Dark shade. Nothing is applied until you add one.
The checklist reads it. Three essentials checks ask whether there is a palette, whether any color meets AA for body text on white, and whether the colors carry usage notes. See Completeness and governance.
Themes are separate. A theme names role colors for a light and a dark set of surfaces and exports under its own group. See Themes.

When a hex cannot be read

The card falls back to black and shows black. The matrix leaves the color out. The export leaves it out of every token file and out of the swatch file.

A color you cannot find in the export

If a color is on the page but missing from the token files, check its hex. Open the block, look at the HEX field, and retype it. The swatch picker at the top of the row accepts only six hex digits and snaps back otherwise, so picking the color there is the safe way.

Where to go next

Every block, and what it holds for the fields of the Color block next to every other block.
Accent color, header image, dark mode and density for the colors that dress the manual itself.
The export page (opens in a new tab) to take the files.

PreviousFonts, licenses and specimens NextThemes

Still stuck? Write to hello@stylehub.cloud and say which page you were on.