COLRv1 is the second version of the OpenType COLR table that adds gradients, compositing, blending, transforms, and reusable subgraphs to color glyphs. Microsoft published it as part of OpenType 1.9, and Google, Mozilla, and Adobe co-designed the format so that color emoji and decorative type can ship as a small vector font instead of a bitmap or SVG-OT bundle.

Does Safari support COLRv1?

No. Safari on macOS, Safari on iOS, and Safari on iPadOS do not support COLRv1 on any version. The WebKit standards-positions issue marks the format as not in active development, so a Bungee Spice or Nabla font on Safari falls back to a single solid color from the CPAL palette instead of the gradient or composited paint.

Which Chrome version added COLRv1 support?

Chrome 98 first shipped COLRv1 by default on Windows, macOS, Linux, ChromeOS, and Android. Chrome 90 to 97 had the feature behind the chrome://flags entry for COLRv1 fonts, so engineers running those builds could enable it for testing before the public rollout.

What is the difference between COLRv0 and COLRv1?

COLRv0 stacks solid color glyph layers in z-order. COLRv1 adds linear, radial, and conic gradients, Porter-Duff compositing, SVG blend modes, affine transforms, and a directed-acyclic-graph paint structure with reusable subgraphs. COLRv1 also wires every paint into the variable-font system, so a single variable color font can interpolate gradient stops, transforms, and clip boxes across an axis.

What happens when a browser does not support COLRv1?

The browser still loads the font, but it ignores the COLR table and renders the base glyph outlines from the glyf or CFF2 table in a single fallback color. Text stays readable, the layout does not shift, and the page only loses the color, the gradients, and the composited paint.

Can COLRv1 fonts be variable fonts?

Yes. COLRv1 was designed to compose with the OpenType variable-font axes from the start. The PaintVarLinearGradient, PaintVarRadialGradient, PaintVarSweepGradient, and PaintVarTransform formats let a designer interpolate color stops, transforms, and clip boxes against any registered or custom axis. Nabla and Roboto Flex Color are public examples that ship today.

Does COLRv1 work with CSS font-palette?

Yes. COLRv1 fonts read their colors from the CPAL palette, and the CSS font-palette and @font-palette-values rules let a stylesheet pick a base palette or override individual color slots. Chrome 101, Edge 105, and Firefox 107 ship font-palette by default. Safari 15.4 ships font-palette but cannot apply it to COLRv1, since the COLR rendering path is missing.

Is COLRv1 part of OpenType?

Yes. The COLR table version 1 is registered in the OpenType specification, version 1.9 and later, maintained by Microsoft, Adobe, Apple, and Google through the ISO MPEG OFF working group. The CPAL companion table, the variable-font additions, and the paint-graph formats all live in the same spec section.

How do you detect COLRv1 support in CSS or JavaScript?

Use the CSS font-tech() query inside an @supports rule, or call CSS.supports("font-tech(color-COLRv1)") from JavaScript. The function returns true on Chrome 111, Edge 111, Firefox 116, and later, since those versions added font-tech parsing. On older engines that ship COLRv1 but not font-tech, render the font and read the CPAL palette via the FontFace API as a fallback probe.

Home
/
Learning Hub
/
COLRv1: Browser Support, Features, Limitations

Testing

COLRv1: Browser Support, Features, Limitations

COLRv1 works in Chrome 98+, Edge 98+, Firefox 107+, Opera 86+, and Samsung Internet 18+, while Safari and Internet Explorer do not support it.

Prince Dewani

May 6, 2026

On This Page

About COLRv1
Browser Support
Key Features
COLRv1 vs COLRv0
Use Cases
Known Issues
Citations

COLRv1 is an OpenType color font format that adds gradients, compositing, blending, and reusable shapes to scalable vector glyphs. It works in Chrome 98+, Edge 98+, Firefox 107+, Opera 86+, Samsung Internet 18+, and Android Chrome 98+, while Safari on macOS, Safari on iOS, and Internet Explorer do not support it.

This guide covers what COLRv1 is, the browsers that support it, the key features, the differences from COLRv0, the production use cases, and the known issues.

What is COLRv1?

COLRv1 is version 1 of the OpenType COLR table, registered in OpenType 1.9 by Microsoft, Adobe, Apple, and Google. The table layers colored vector paints, gradients, transforms, and blend modes on top of a base glyph, so a single small font can render full-color emoji, icon sets, and decorative display type.

Which browsers does COLRv1 support?

COLRv1 ships by default in every Chromium-based engine, in Firefox, and in Samsung Internet, but Safari on macOS, Safari on iOS, and Internet Explorer do not paint COLRv1 fonts at all.

Loading browser compatibility data...

COLRv1 compatibility in Chrome

Chrome supports COLRv1 from Chrome 98 on Windows, macOS, Linux, ChromeOS, and Android. Chrome 90 to 97 had COLRv1 disabled by default behind the chrome://flags entry for COLRv1 fonts, and Chrome 89 and earlier did not support it. Chrome reads the CPAL palette and applies a font-palette CSS override at paint time.

COLRv1 compatibility in Edge

Microsoft Edge supports COLRv1 from Edge 98 on Windows, macOS, Linux, and Android. Edge inherits the Blink rendering path, so the version that turned on COLRv1 in Chrome turned it on in Edge in the same release train. Legacy EdgeHTML, Edge 12 to 18, did not support COLRv1.

COLRv1 compatibility in Firefox

Firefox supports COLRv1 from Firefox 107 on Windows, macOS, Linux, and Android. Firefox 105 and 106 had it behind the gfx.font_rendering.colr_v1.enabled preference, and Firefox 98 to 104 did not support it. Mozilla shipped the feature alongside CSS font-palette in the same release.

COLRv1 compatibility in Safari

Safari does not support COLRv1 on macOS, iOS, iPadOS, or visionOS. The WebKit standards-positions tracker marks COLRv1 as not in active development, and there is no flag in Safari, Safari Technology Preview, or the iOS Settings app that turns it on. A COLRv1 font loaded into Safari falls back to the base glyph outlines in a single solid color from the CPAL palette.

COLRv1 compatibility in Opera

Opera supports COLRv1 from Opera 86 on Windows, macOS, Linux, and Android, and from Opera Mobile 80 on Android. Opera tracks Chromium release for release, so the same Blink-side gating that opened COLRv1 in Chrome 98 opened it in Opera 86. Opera Mini renders pages on a server proxy and does not paint COLRv1 on the device.

COLRv1 compatibility in Samsung Internet

Samsung Internet supports COLRv1 from Samsung Internet 18.0 on Android. The browser ships on Chromium 96 in that release line, which inherits the COLRv1 paint path. Older Samsung Internet builds that predate the Chromium 96 jump do not support COLRv1 and render fonts in a single CPAL color.

COLRv1 compatibility in Android Browser

Chrome for Android, the modern Android Browser, supports COLRv1 from Chrome 98 on. Android WebView followed in the same release window, so apps that embed a WebView pick up COLRv1 once the system WebView updates past version 98. Firefox for Android matches the desktop train and supports COLRv1 from Firefox 107 on Android.

COLRv1 compatibility in Internet Explorer

Internet Explorer does not support COLRv1 on any version, IE 6 through IE 11. Microsoft has retired Internet Explorer, and IE mode in Edge does not add the Blink COLRv1 path either, so a COLRv1 font on an IE-mode site falls back to the base outlines in a single CPAL color.

Note: COLRv1 paints only on Chromium, Firefox, and Samsung Internet, while Safari falls back to a single solid color. Test the gradients and palette overrides on real browsers and OS with TestMu AI. Try TestMu AI free!

What are the key features of COLRv1?

COLRv1 turns the COLR table from a flat color stack into a graph of paint nodes. Each node can fill a glyph with a gradient, blend it with another paint, transform it, or reference a shared subgraph for compact storage.

Gradients: COLRv1 ships linear, radial, and sweep (conic) gradient paints, each with variable color stops. Designers can fill a single glyph with a sunset gradient or a radial highlight without a separate SVG asset.
Compositing and blending: The PaintComposite node supports the full Porter-Duff set, plus the SVG blend modes including multiply, screen, overlay, and color-burn. Two paints can mix into a single glyph the way two layers mix in a graphics editor.
Affine transforms: PaintTransform, PaintRotate, PaintScale, PaintSkew, and PaintTranslate apply a 2D matrix to any paint. Variable variants of each let the transform interpolate against a font axis.
Reusable subgraphs: The directed-acyclic-graph structure lets one paint subtable serve many glyphs. A common gradient defined once can paint every emoji eye in the font, which keeps the file size small.
CSS font-palette: COLRv1 reads colors from the CPAL palette, so the @font-palette-values rule and the font-palette property let a stylesheet pick a base palette or override individual slots without re-publishing the font.
Variable color across axes: Every paint has a Var counterpart, so weight, width, italic, or a custom axis can interpolate gradient stops, transforms, and clip boxes alongside the base glyph outlines.

What is the difference between COLRv1 and COLRv0?

COLRv0 only stacks solid color glyph layers. COLRv1 keeps that capability and adds gradients, compositing, transforms, reusable subgraphs, and full variable-font support. The table below maps the headline differences.

Dimension	COLRv0	COLRv1
Color fills	Solid colors only, one per layer	Solid colors, plus linear, radial, and sweep gradients
Compositing and blending	Alpha stacking only	Porter-Duff plus SVG blend modes (multiply, screen, overlay, and more)
Transforms	None	Full 2D affine: translate, rotate, scale, skew
Paint structure	Linear layer array (z-ordered)	Directed-acyclic graph of paint nodes
Reusable shapes	None, every layer is a fresh entry	Shared subgraphs cut file size on repeated motifs
Variable-font support	Limited, no variable color stops or transforms	Every paint has a Var format, axes interpolate color and shape
OpenType version	OpenType 1.7	OpenType 1.9
Browser support	Chrome 71+, Firefox 32+, Edge 12+, Safari 11+, IE 9+	Chrome 98+, Edge 98+, Firefox 107+, no Safari support

What are the use cases of COLRv1?

Most COLRv1 fonts ship for one of three reasons: a designer wants color emoji that scale, an icon set wants palette swaps without re-publishing assets, or a display font wants a gradient effect that a static color cannot deliver.

Color emoji at any size: Noto Color Emoji, Twemoji, and Segoe UI Emoji on Windows 11 ship as COLRv1 fonts. The vector paths scale crisply at every pixel size, which a bitmap CBDT or SBIX font cannot match, and the file size stays small enough to ship over the wire.
Multicolor icon sets with palette swap: Material Symbols Two-Tone and FontAwesome Duotone use COLRv1 with CSS font-palette so a single font file can paint a light-mode set, a dark-mode set, and a brand set. The stylesheet picks the palette per route or per theme.
Gradient display type: Google Fonts ships Bungee Spice, Rocher, and Nabla as COLRv1 display faces. A landing-page headline can pick a sunset gradient or a chrome reflection out of the font itself, with no SVG export, no PNG fallback, and no JavaScript.
Variable color branding: A variable COLRv1 font can interpolate gradient stops along a custom axis. A brand can ship one font, animate the axis on hover or scroll, and hit a different color story at every keyframe without swapping files.
Localized emoji and flag fonts: Regional emoji subsets ship as small COLRv1 packs, since the reusable subgraph and gradient features keep the byte count low even when the glyph count is high.

What are the known issues with COLRv1?

COLRv1 ships in three of the four major engines, but Safari, the toolchain story, and the rendering parity across operating systems still bite teams that adopt the format.

No Safari support: Safari on macOS and iOS falls back to the base outlines in a single CPAL color, so a Bungee Spice headline shows in plain orange or plain black on every iPhone and Mac. A non-WebKit fallback (a static SVG, a PNG, or a different web font) is required for design parity.
Operating-system color emoji is its own font: Chrome on macOS, Chrome on Windows, and Chrome on Android each pick a different system color-emoji font. Even with COLRv1 working, an emoji glyph shipped via web font may collide with the OS font that the user expects.
font-palette adoption lags COLRv1: Some Chromium builds early in the COLRv1 window paint the COLR colors but ignore @font-palette-values overrides. The visible result is a correct gradient with the wrong palette swap. Pin the minimum Chrome to 101 to avoid the gap.
font-tech() detection is newer than COLRv1: CSS.supports("font-tech(color-COLRv1)") returns false on Chrome 98 to 110, even though those engines paint COLRv1 correctly. Use a font-rendering probe or a static UA check on the older window.
Tooling fragmentation: Many older font editors export COLRv0 by default. Designers shipping COLRv1 typically need a recent fontTools build, the nanoemoji or paintcompiler pipeline, or a Glyphs plugin to emit the paint graph correctly.
WOFF2 is required, not optional: A raw COLRv1 OTF file is several megabytes. Without woff2 compression, the font blocks first paint on slow networks. Ship the woff2 form and gate the older browsers with @supports font-tech.

In my experience, the safest pattern is to ship a COLRv1 woff2 inside an @supports font-tech(color-COLRv1) block, fall back to a static SVG or a COLRv0 stack on Safari, and pin the Chromium floor to version 101 so the font-palette override applies consistently. The CSS handles the engines that paint COLRv1, the SVG covers Safari, and the palette gate keeps the design team out of the early-Chromium grey zone.

Citations

All COLRv1 version numbers and platform notes in this guide come from these primary sources:

Microsoft Learn, OpenType COLR table specification: learn.microsoft.com/en-us/typography/opentype/spec/colr
Microsoft Learn, OpenType CPAL table specification: learn.microsoft.com/en-us/typography/opentype/spec/cpal
Chrome for Developers, COLRv1 Color Gradient Vector Fonts in Chrome 98: developer.chrome.com/blog/colrv1-fonts
Chrome Platform Status, COLRv1 Color Gradient Vector Fonts: chromestatus.com/feature/5638148514119680
Mozilla, Intent to ship: enhanced color font (COLRv1) support: groups.google.com/a/mozilla.org/g/dev-platform/c/Xs0_dixyT9Q
WebKit standards-positions, COLRv1 fonts: github.com/WebKit/standards-positions/issues/415
MDN Web Docs, font-palette: developer.mozilla.org/en-US/docs/Web/CSS/font-palette
MDN Web Docs, @font-palette-values: developer.mozilla.org/en-US/docs/Web/CSS/@font-palette-values
MDN Web Docs, font-tech() CSS function: developer.mozilla.org/en-US/docs/Web/CSS/@supports/font-tech
Web Platform Tests interop, COLRv1 fonts issue: github.com/web-platform-tests/interop/issues/864
Google Fonts, color-fonts repository: github.com/googlefonts/color-fonts
Wikipedia, OpenType: en.wikipedia.org/wiki/OpenType

Author

Prince Dewani

Blogs: 8

Prince Dewani is a Community Contributor at TestMu AI, where he manages content strategies around software testing, QA, and test automation. He is certified in Selenium, Cypress, Playwright, Appium, Automation Testing, and KaneAI. Prince has also presented academic research at the international conference PBCON-01. He further specializes in on-page SEO, bridging marketing with core testing technologies. On LinkedIn, he is followed by 4,300+ QA engineers, developers, DevOps experts, tech leaders, and AI-focused practitioners in the global testing community.