Color science: hex, RGB, HSL, CMYK, OKLCH conversion. WCAG contrast checker. Color harmonies. Tailwind palette. 16.7M hex colors.
Embed colors, fonts, emojis, symbols, and unicode characters in any website. One ecosystem, 5 npm packages, 50+ widget types.
Zero dependencies. Shadow DOM style isolation. 4 themes (light/dark/sepia/auto). 2 styles. Free CDN via jsDelivr. MIT licensed.
Each site powers one widget package. Click through to explore the full database, REST API, and SDKs.
Color science: hex, RGB, HSL, CMYK, OKLCH conversion. WCAG contrast checker. Color harmonies. Tailwind palette. 16.7M hex colors.
Typography reference. 1,900+ Google Fonts with live preview, CSS stack generation, font pairing recommendations, weight previews.
3,781 emojis · Unicode Emoji 16.0 spec · 8 encodings (UTF-8/16/32, HTML entities, codepoints) · ZWJ sequences · skin tone variants.
Symbol encoding in 11 formats · Unicode properties · HTML entities · LaTeX commands · codepoint lookup · glossary of typographic symbols.
unicodefyi.com · npm
Unicode character database · 17 encodings (UTF-8/16/32, percent-encoding, Punycode, base64) · text analyzer · normalization (NFC/NFD/NFKC/NFKD).
fyipedia.com · umbrella ecosystem
Creative FYI is one of 11 FYI Families. Browse 53+ sites, 1M+ records, and a unified developer toolchain at FYIPedia →
Add a script tag, drop a div with a data attribute, refresh. The widget fetches data from the corresponding API and renders inside a Shadow DOM.
<!-- 1. Load one or more embed scripts (zero deps) -->
<script src="https://cdn.jsdelivr.net/npm/colorfyi-embed@1/dist/embed.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fontfyi-embed@1/dist/embed.min.js"></script>
<!-- 2. Drop widgets anywhere on your page -->
<div data-colorfyi="entity" data-slug="red-500" data-theme="light"></div>
<div data-fontfyi="entity" data-slug="inter" data-theme="dark"></div>
<!-- That's it. Widgets render with full style isolation. -->npm install colorfyi-embed fontfyi-embed emojifyi-embed symbolfyi-embed unicodefyi-embed
https://cdn.jsdelivr.net/npm/{site}-embed@1/dist/embed.min.js
One example per Creative FYI site. Click through to the docs for each package to see all 10+ widget types per site.
<div data-colorfyi="entity" data-slug="violet-500"></div><div data-symbolfyi="entity" data-slug="ampersand"></div><div data-unicodefyi="entity" data-slug="u-2764"></div>Each site has 10+ widget types beyond entity. Browse the full gallery on each per-site docs page (above).
Recommended for static sites, WordPress, Medium. No build step.
<script src="https://cdn.jsdelivr.net/npm/
colorfyi-embed@1/dist/embed.min.js"></script>For React, Vue, Svelte, build pipelines. ESM exports.
npm install colorfyi-embed
yarn add fontfyi-embed
pnpm add emojifyi-embedPaste a site URL into WordPress/Medium/Ghost — auto-renders.
# Just paste:
https://colorfyi.com/colors/violet-500/
# WordPress auto-embeds.No. Every Creative FYI embed package ships zero dependencies. Add one script tag from jsDelivr CDN and one data attribute on a div — that's the complete integration.
Every widget renders inside a Shadow DOM. Your site CSS cannot leak in, and the widget CSS cannot leak out. Themes (light, dark, sepia, auto) are controlled via data-theme attribute.
Free. No paywall, no API key, no signup. Each widget fetches from a free public REST API (ColorFYI API, FontFYI API, EmojiFYI API, SymbolFYI API, UnicodeFYI API). The widget footer displays a "Powered by [site]" backlink — that's the only requirement.
Yes. Each site supports oEmbed: paste a URL like https://colorfyi.com/colors/red-500/ into WordPress/Medium/Ghost and the widget renders automatically. For full attribute control, use the script + data attribute pattern.
Each Creative FYI site focuses on one domain with deep domain knowledge: color science (ColorFYI), Google Fonts metadata (FontFYI), Unicode Emoji 16.0 (EmojiFYI), 11-format symbol encoding (SymbolFYI), 17-encoding Unicode database (UnicodeFYI). Cross-references show up automatically — a font widget can reference unicode coverage, a symbol widget can link to its emoji equivalent.