Color palettes

Eight hues and Ink at one lightness per row. Five themes. Light and dark.
Explore the palettes and 118 element colors of ReShiki, then take them into your own work.

The theme palette

Publication

Strong colors bonds, text and strokes. Tint colors fills, ring interiors and highlight boxes. Every hue in a row shares one OKLCH lightness.

Light canvas

StrongL 0.50TintL 0.93

Dark canvas

StrongL 0.70TintL 0.49

Publication · HEX, then OKLCH as L C h
Color	Light canvas		Dark canvas
Color	StrongL 0.50 · C 0.13	TintL 0.93 · C 0.04	StrongL 0.70 · C 0.12	TintL 0.49 · C 0.065
Paper	`#FFFFFF`1.000 0.000 0.0		`#000000`0.000 0.000 0.0
Ink	`#000000`0.000 0.000 0.0	—	`#FFFFFF`1.000 0.000 0.0	—
Red25°	`#A03F3C`0.500 0.130 24.7	`#FFDFDC`0.929 0.036 24.2	`#DF7F78`0.699 0.120 25.0	`#81524E`0.490 0.064 25.0
Orange55°	`#974C00`0.500 0.124 55.0	`#FEE2CF`0.931 0.040 56.3	`#D78951`0.700 0.120 55.0	`#7D563C`0.489 0.065 54.3
Amber85°	`#7E5E00`0.501 0.103 85.3	`#F4E6CA`0.929 0.040 84.6	`#C1983A`0.701 0.120 84.8	`#715E33`0.491 0.065 86.1
Green145°	`#27762F`0.501 0.131 145.0	`#D8EFD8`0.929 0.039 145.3	`#6CB26F`0.700 0.120 145.1	`#496A49`0.489 0.065 144.5
Teal185°	`#00736A`0.500 0.088 185.4	`#CBF1EB`0.929 0.040 184.9	`#17B6A8`0.700 0.120 185.0	`#2E6C65`0.489 0.065 185.4
Blue255°	`#2863AB`0.499 0.130 255.3	`#D9EAFF`0.931 0.034 253.7	`#69A1E8`0.700 0.121 255.0	`#476285`0.490 0.065 255.2
Indigo285°	`#5D55A9`0.499 0.130 285.0	`#E5E5FF`0.930 0.035 285.7	`#9793E6`0.700 0.120 285.0	`#5C5B84`0.489 0.065 284.8
Purple320°	`#834791`0.500 0.130 319.8	`#F4E0F9`0.930 0.040 319.5	`#BF85CD`0.700 0.120 319.7	`#715478`0.490 0.066 319.7

Colors as they appear on white paper. Publication labels every element in Ink.

ReShiki 0.14.0 · Exact sRGB, derived OKLCH · Default huesHow the palette works

How the palette works

Every theme has eight named hues, Red, Orange, Amber, Green, Teal, Blue, Indigo and Purple, plus Ink, which is black on the light canvas and white on the dark one. Each hue comes in two rows. Strong colors bonds, text and strokes; Tint colors fills, ring interiors and structure highlights. Select part of a structure and choose Color → Apply to → Highlights to keep its ink visible over the tint.

One lightness per row. In each theme and canvas, every color in a row has the same OKLCH lightness (L) and aims for the same chroma (C), so no hue looks heavier or fainter than its neighbors, and swapping one hue for another keeps a figure balanced. If a hue cannot reach the target chroma in sRGB, ReShiki lowers its chroma and keeps its lightness and hue. Tint rows are light on the light canvas and dark on the dark canvas, so Ink bonds and labels stay readable on a filled ring.

Editable hues. In the color popover, Edit hues… moves any hue in 10° steps, and every use of that hue in the drawing follows. ↺ Default resets one hue and Restore default hues resets all eight. Editing a built-in theme saves a copy in the drawing, such as “Publication · custom hues”. This page shows the default hue angles.

Custom colors. Type #1F4E79, 31, 78, 121, rgb(31 78 121) or oklch(0.42 0.09 250) in the Color box. A custom color stays exact on both canvases and ignores theme and hue changes; the drawing keeps the last eight in the Custom row. ReShiki names the closest palette color, with Use to switch to it, and warns when the color has less than 3:1 contrast with the canvas. Lines need 3:1 and labels 4.5:1.

Drawings from earlier versions turn their old swatch colors into the matching palette colors and keep every other color as it appeared. Palette and contrast details

Using the colors

Select any color to see its exact values. Use the Light / Dark toggle to see the element colors ReShiki draws on white or black paper. Each element has one color for each mode, including neutral ink for elements 110–118. Publication labels every element in Ink.

RGB is the exact, final 8-bit sRGB value used by the app. HEX and rgb() express the same color. The OKLCH values are calculated from that final RGB and rounded to six decimals, so they describe the displayed color, not the original generator settings. The palette table rounds them further to three decimals.

In oklch(L C h), L is lightness from 0 to 1, C is chroma (color intensity), and h is the hue angle in degrees. You can copy these values directly into CSS. Neutral colors have effectively zero chroma, so their hue angle has no visible effect.

The JSON, CSV, and CSS downloads contain every theme and both modes: paper, ink, the Strong and Tint rows, and element colors. Native .reshiki-theme files contain both modes and can be reviewed through Manage themes → Import in ReShiki.

The CSS download defines variables under a theme and mode selector. Apply both attributes to the same element:

<link rel="stylesheet" href="palettes.css" />
<div data-reshiki-theme="presentation" data-reshiki-mode="dark">
  <span class="nitrogen">N</span>
  <span class="highlight">Step 1</span>
</div>

[data-reshiki-theme] {
  color: var(--reshiki-ink);
  background: var(--reshiki-paper);
}
.nitrogen {
  color: var(--reshiki-element-N);
  /* Or: var(--reshiki-element-N-oklch) */
}
.highlight {
  background: var(--reshiki-tint-amber);
  border-bottom: 2px solid var(--reshiki-strong-amber);
}

How the element colors are made

Presentation and Pastel preserve the Jmol reference hues, set a target OKLCH lightness, and multiply the reference chroma:

Theme	Light: L / chroma multiplier	Dark: L / chroma multiplier
Presentation	0.50 / 2.00×	0.70 / 1.00×
Pastel	0.55 / 0.35×	0.83 / 0.40×
Jmol	Jmol reference colors	Jmol reference colors
VESTA	VESTA reference colors	VESTA reference colors

The generated color is converted to sRGB, reducing chroma when needed to fit the display gamut. Carbon and hydrogen stay neutral in Presentation and Pastel, and Publication keeps every label in Ink. For canvas labels, ReShiki then adjusts lightness as needed to target a 5:1 contrast ratio against the paper. The values on this page include that contrast adjustment.

These values describe automatic labels on plain paper. Tint ring fills can trigger further label contrast adjustment, and explicit object colors override the theme. Interface controls derive their own interaction colors. Use themes in ReShiki →

Sources and reuse

Element reference colors come from Jmol’s published color table. VESTA uses VESTA element colours (K. Momma and F. Izumi, jp-minerals.org/vesta), via pymatgen ElementColorSchemes.yaml (MIT), for H through Mt; later elements keep neutral colors. The perceptual conversion follows Björn Ottosson’s Oklab color space. ReShiki’s theme implementation, palette code, contrast code, and theme format guide document the transformations and file format.

ReShiki’s original code and contributions are available under MIT or Apache-2.0; the Jmol and VESTA reference palettes are credited separately above. Please retain source attribution when redistributing the collection.

Contributors can regenerate this reference with cargo run --locked --example theme_colors. The theme_reference regression test checks every exported RGB and OKLCH value, the shared lightness of each palette row, and the portable theme files against the application.