How to colour font tables: complete reference
- Step 1COLR + CPAL pair — COLR defines colour layer composition (which palette index per layer, blend modes for v1). CPAL defines the colour palette (RGBA values). Always shipped together — COLR alone has no colours.
- Step 2sbix structure — Embedded PNG bitmaps per glyph at multiple resolutions. Header + per-glyph offsets to PNG byte streams. No vector data — pure raster.
- Step 3Renderer priority — Different engines prefer different formats. Safari prefers sbix; Chrome and Firefox prefer COLR. The renderer falls back to outline glyphs if its preferred format isn't present and it doesn't support the others.
Frequently asked questions
What's the difference between COLRv0 and COLRv1?+
v0 supports flat colour regions only — like a paint-by-numbers layer composition. v1 adds gradients (linear, radial), transformations, blend modes, and clipping — much richer. Browser support for v1 lags v0 by 2–3 years.
Can a font have multiple colour formats?+
Yes — common pattern is COLR + sbix in one file. Renderers pick their preferred format. The JAD Colour Table Remover strips all of them at once for guaranteed monochrome output.
How big is a typical colour-emoji font?+
Apple Color Emoji (sbix-heavy): 60 MB. Noto Color Emoji COLR variant: 1.2 MB. Twemoji Mozilla COLR: 800 KB. The format choice dominates the file size — a vector COLR font is 50× smaller than its sbix-bitmap equivalent.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.