ColorFYI Embed
Zero Dependencies · Shadow DOM · 4 Themes

Embed Colors
on Any Website

Add ColorFYI entity cards, comparison tables, glossary terms, interactive tools, and inline elements to any website with a single line of HTML. No build tools. No dependencies. Live data from the ColorFYI database.

Get Started GitHub → npm →
HTML
<!-- 1. Place the widget div -->
<div data-colorfyi="entity" data-slug="example-slug"></div>

<!-- 2. Add the script once -->
<script src="https://cdn.jsdelivr.net/npm/colorfyi-embed@1/dist/embed.min.js"></script>

Entity Card Preview

Colors Live Data
TypeEntity Detail
StyleModern
ThemeLight
DataLive API

Quick Start

Two lines of HTML. That's all it takes.

HTML
<!-- Step 1: Place widget divs anywhere on your page -->
<div data-colorfyi="entity" data-slug="example" data-theme="light"></div>
<div data-colorfyi="compare" data-slugs="item-a,item-b"></div>
<div data-colorfyi="search" data-placeholder="Search Colors..."></div>

<!-- Step 2: Load the embed script once, anywhere -->
<script src="https://cdn.jsdelivr.net/npm/colorfyi-embed@1/dist/embed.min.js"></script>
Shadow DOM Isolation
No CSS conflicts with your site.
Zero Dependencies
No jQuery, React. Tree-shaken per site.
Live Creative Data
From ColorFYI's curated database.

Widget Types × 2 Styles × 3 Themes

Select a widget type to preview. Every widget includes Shadow DOM isolation and a "Powered by ColorFYI" backlink.

Modern

Widget preview loads from live API

Minimal

Widget preview loads from live API

Widget Options

Configure widgets with data-* attributes.

Attribute Values Default Description
data-colorfyientity, compare, glossary, guide, search, tooltip, [tools]requiredWidget type to render
data-slugany slug—Entity slug from the ColorFYI database
data-themelight, dark, sepia, autolightVisual theme (auto follows OS preference)
data-styleVariantmodern, minimalmodernWidget design style
data-sizedefault, compact, largedefaultWidget size
data-slugsslug-a,slug-b—Comma-separated slugs for compare widget
data-placeholderany stringSearch...Search box placeholder text

Styles & Themes

2 design styles × 4 themes. Mix and match to fit your site.

modern

Clean lines, rounded corners, accent gradients. Ideal for product pages and marketing sites. Default style.

data-styleVariant="modern"
minimal

Subtle borders, flat design, no gradients. Ideal for documentation and reference sites.

data-styleVariant="minimal"
Light + Dark + Auto

Set explicitly or use auto to follow the visitor's OS preference (prefers-color-scheme).

data-theme="auto"
Sepia

Warm paper-tone background. Perfect for design blogs, typography articles, and creative content.

data-theme="sepia"

CDN Options

Multiple delivery options to fit your workflow.

jsDelivr CDN

Global CDN, auto-updates with npm. Recommended for most use cases.

HTML
<script src="https://cdn.jsdelivr.net/npm/colorfyi-embed@1/dist/embed.min.js"></script>

npm Package

For Webpack, Vite, Rollup bundlers.

Shell
npm install colorfyi-embed

// In your JS/TS:
import 'colorfyi-embed';

Pinned Version

Lock to a specific version for production stability.

HTML
<script src="https://cdn.jsdelivr.net/npm/colorfyi-embed@1.0.0/dist/embed.min.js"></script>

Creative FYI Family

Part of FYIPedia — open-source developer tools for design, typography, characters, and visual encoding.

SiteDomainPackage
ColorFYIcolorfyi.comnpm
FontFYIfontfyi.comnpm
EmojiFYIemojifyi.comnpm
SymbolFYIsymbolfyi.comnpm
UnicodeFYIunicodefyi.comnpm