How to colour font formats: colr, sbix, cbdt/cblc, svg-in-ot compared
- Step 1COLR / CPAL (Microsoft, vector) — `COLR` defines per-glyph colour layers as references into a palette; `CPAL` holds the actual RGBA palette. COLRv0 paints flat colour regions; COLRv1 adds gradients, affine transforms, and compositing. They are always shipped together — `COLR` alone has no colours. The most compact format on disk.
- Step 2sbix (Apple, bitmap) — `sbix` embeds PNG bitmaps per glyph at several resolutions. Used by Apple Color Emoji. Rendered by Safari/CoreText; ignored by Chrome and Firefox. The heaviest format — full emoji coverage runs to tens of megabytes.
- Step 3CBDT / CBLC (Google, bitmap) — `CBDT` carries the colour bitmap data and `CBLC` the location index — Google's bitmap analogue to sbix, used by Noto Color Emoji. Rendered by Chrome/Firefox; not by Safari. Also large, though Google's strikes are usually tuned to fewer sizes than Apple's.
- Step 4SVG-in-OpenType — The `SVG ` table (with a trailing space in the tag) embeds a full SVG document per glyph — the most expressive format, supporting effects a bitmap or layer model can't. Supported by Firefox; partial elsewhere. Uncommon in production because the documents are large.
- Step 5Decide what to keep — If you only need monochrome, the format barely matters — the [Colour Table Remover](/font-tools/colour-table-remover) drops all of them and keeps the outlines. If you need colour somewhere, choose `COLRv1` for the smallest broadly-supported vector colour.
- Step 6Identify what you actually have — Run the font through [Font Metadata Extractor](/font-tools/font-metadata-extractor) to list its table directory. The presence of `COLR`+`CPAL`, `sbix`, `CBDT`+`CBLC`, or `SVG ` tells you the format — and which of them the remover will strip.
The four colour-font formats compared
Browser support is for the colour rendering of these tables specifically; all four also keep ordinary outline glyphs that any browser can draw.
| Format | Tables | Model | Renders in | Disk cost |
|---|---|---|---|---|
| COLRv0 (Microsoft) | COLR + CPAL | Flat vector colour layers | All modern browsers | Smallest (KB) |
| COLRv1 (Microsoft) | COLR + CPAL | Gradients, transforms, compositing | Chrome 98+, Firefox 109+, Safari 16.4+ | Small (KB) |
| sbix (Apple) | sbix | Embedded PNG bitmaps | Safari / CoreText | Largest (tens of MB) |
| CBDT/CBLC (Google) | CBDT + CBLC | Embedded PNG bitmaps | Chrome, Firefox | Large (MB) |
| SVG-in-OT | SVG (trailing space) | Embedded SVG documents | Firefox; partial elsewhere | Large, variable |
What the remover does to each format
The remover's table set is fixed; the size win it delivers depends entirely on how heavy the format was.
| Format present | Tables dropped | Outline fallback | Typical size win |
|---|---|---|---|
| COLRv0/v1 | COLR, CPAL | Base outline in one colour | Small — COLR is already compact |
| sbix | sbix | Outline (often minimal on Apple) | Huge — multi-MB bitmaps gone |
| CBDT/CBLC | CBDT, CBLC | Outline glyphs | Large — bitmap strikes gone |
| SVG-in-OT | SVG | Base outline glyphs | Large — embedded SVG gone |
| Legacy bitmaps | EBDT, EBLC | Outline glyphs | Varies — removed even if grayscale |
Cookbook
Concrete examples of how each format shows up in a font directory and what stripping it leaves behind.
Spot the format from the table directory
ExampleYou can tell a font's colour format just by which tables it carries. Dump the directory and look for the tell-tale tags.
Noto Color Emoji: glyf, CBDT, CBLC, cmap, GSUB -> Google bitmap (CBDT/CBLC) Apple Color Emoji: glyf, sbix, cmap -> Apple bitmap (sbix) Segoe UI Emoji: glyf, COLR, CPAL, cmap -> Microsoft vector (COLR/CPAL) Twemoji Mozilla: glyf, COLR, CPAL, cmap -> COLR vector FancyBrand: CFF, SVG , cmap -> OpenType-SVG
COLR vector font — small win
ExampleA COLR/CPAL font already stores colour compactly. Stripping it removes only the layer and palette tables; the outlines were never duplicated.
Twemoji-COLR.ttf 800 KB (glyf + COLR + CPAL) after remover: Twemoji-COLR.monochrome.ttf ~770 KB (glyf only) -> COLR/CPAL were a small fraction of the file
sbix bitmap font — enormous win
ExampleApple's sbix bitmaps dominate the file. Removing them collapses the size, but the surviving outlines are minimal.
AppleColorEmoji.ttf ~60 MB (glyf + sbix PNGs) after remover: .monochrome.ttf ~1-2 MB (glyf only) -> 95%+ smaller, but the outline glyphs are sparse
Hybrid COLR + SVG font
ExampleA font may ship COLR for broad support and SVG for richer effects. The remover drops both at once.
BrandColour.otf CFF, COLR, CPAL, SVG , cmap after remover: .monochrome.ttf CFF, cmap (COLR + CPAL + SVG all gone)
Pick the format you want to keep elsewhere
ExampleIf you need colour somewhere and monochrome elsewhere, author COLRv1 for the colour build (compact, broad support) and derive the monochrome with the remover.
design system: brand-colour.woff2 <- COLRv1 source (gradients, broad support) brand-mono.woff2 <- ttf-to-woff2( colour-table-remover( brand-colour ) )
Edge cases and what actually happens
Every row below was probed against the live API. Some documented requirements (alphabetical axis order, numerical tuple order) are not actually enforced in practice — useful to know if you've been blaming the wrong thing for a 400.
COLRv1 not painting in older Safari
Renderer gapCOLRv1 (gradients/transforms) landed in Safari 16.4; older Safari ignores the v1 paint graph and may fall back to the base outline or COLRv0 layers if present. This is a rendering-engine limitation, not something a font tool fixes — ship a monochrome or COLRv0 fallback for old engines.
sbix font renders blank in Chrome
Renderer gapChrome and Firefox do not read sbix, so an Apple-only emoji font shows the (often minimal) outline glyphs or nothing useful. That is why cross-platform sites rely on the OS emoji font rather than embedding one. Stripping sbix with the remover makes the limitation explicit.
CBDT/CBLC font in Safari
Renderer gapSafari historically does not render Google's CBDT/CBLC bitmaps. A Noto Color Emoji web font therefore behaves differently on Safari than on Chrome. The colour data is real in the file; the engine just won't paint it.
SVG-in-OT in Chrome
Renderer gapChrome has limited/historically absent SVG table support, so an OpenType-SVG font may show only its base outlines there. SVG-in-OT is the least portable colour format, which is one reason it's rare in production.
Font ships multiple colour formats at once
By designIt's common to carry COLR+CPAL and sbix (or SVG ) in one file so each engine uses its preferred format. Each renderer picks one; the rest is dead weight on that platform. The remover drops every one of them for a guaranteed-monochrome result.
COLR present but CPAL missing
Invalid fontCOLR references palette entries in CPAL; without CPAL the colour layers have nothing to reference and the font is malformed. Renderers fall back to outlines. The remover drops COLR regardless, which actually tidies up the invalid pairing.
EBDT/EBLC grayscale bitmaps treated as colour
ExpectedThe legacy EBDT/EBLC embedded-bitmap tables can hold grayscale or mono bitmaps, not just colour. The remover drops them anyway because its goal is outline-only output. If you specifically need embedded bitmaps, this isn't the right tool.
Counting on the outline fallback being attractive
Varies by fontSome colour fonts (Twemoji, many brand fonts) have well-drawn outline glyphs that look fine in black. Others (Apple Color Emoji) have intentionally minimal outlines because they never expect to render without colour. Check the outlines with Glyph Inspector before relying on them.
Format detection from extension alone
UnreliableA .ttf or .woff2 extension tells you nothing about the colour format — all four formats can live inside any SFNT container. Inspect the table directory with Font Metadata Extractor to know what you actually have.
Frequently asked questions
Why are there four different colour-font formats?
Each vendor solved colour glyphs at a different time: Apple shipped sbix (~2013), Google CBDT/CBLC (~2014), Microsoft COLR/CPAL (~2015), and OpenType-SVG followed. Each kept its own for compatibility; none became the single standard, so fonts often ship several to cover all engines.
Which format is smallest?
COLR/CPAL by a wide margin — it stores colour as vector layer references into a small palette. Bitmap formats (sbix, CBDT/CBLC) are the largest because they embed PNG images per glyph per size. SVG-in-OT is large and variable.
Which format renders in which browser?
COLRv0 renders everywhere; COLRv1 needs Chrome 98+, Firefox 109+, Safari 16.4+. sbix is Safari/CoreText only. CBDT/CBLC is Chrome/Firefox. SVG is best in Firefox with partial support elsewhere. That fragmentation is why colour web fonts are tricky.
Does the Colour Table Remover care which format I have?
No — it removes all of them in one pass (COLR, CPAL, sbix, SVG , CBDT, CBLC, plus legacy EBDT/EBLC). The format only affects how much smaller the result gets and whether the outline fallback looks good.
How do I find out which format my font uses?
Dump the table directory with Font Metadata Extractor. COLR+CPAL means Microsoft vector, sbix means Apple bitmap, CBDT+CBLC means Google bitmap, SVG means OpenType-SVG.
Can one font have more than one colour format?
Yes, and it's common — e.g. COLR+CPAL for broad support plus sbix or SVG for engines that prefer those. Each renderer uses its favourite; the others are inert on that platform.
Which should I author for a new branded colour font?
COLRv1 gives the smallest file with the widest modern support (gradients, transforms). Add SVG-in-OT only if you need effects COLRv1 can't express, and avoid bitmap formats for the web unless you specifically target Apple or Google emoji rendering.
What is the difference between COLRv0 and COLRv1?
v0 paints flat colour regions composed as layers. v1 adds gradients (linear/radial/sweep), affine transforms, and compositing/blend modes — far richer, but it needs newer browsers.
Why is Apple Color Emoji so much bigger than Noto's COLR builds?
Apple Color Emoji uses sbix PNG bitmaps at multiple resolutions for full coverage, which runs to tens of MB. A COLR build of the same glyphs stores compact vector layers and is a fraction of the size.
If I strip colour, what does the glyph look like?
Whatever the base outline in glyf/CFF looks like — usually a single-colour silhouette. The quality depends on the font: some have polished outlines, others (system emoji) have minimal ones.
Is OpenType-SVG worth using?
Only for effects the other formats can't do, and only where you can accept Firefox-first support. Its embedded documents are heavy and its cross-browser story is the weakest of the four.
Do all four formats keep ordinary outlines too?
Yes. Colour data lives in side tables; the glyf/CFF outlines are always present. That's exactly why removing the colour tables leaves a working monochrome font behind.
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.