Inline color previews, WCAG contrast checks, 7 color space conversions, Tailwind shade palettes, and color blindness simulation -- powered by ColorFYI. See color information without leaving your editor.
Try the interactive tools online at colorfyi.com -- color converter, contrast checker, palette generator, shade generator, color blindness simulator, and gradient generator.
Color swatches appear next to hex color codes in your code. Supports #RGB, #RRGGBB, and common patterns like color: FF6B35.
Hover over any hex color to see:
- 7 color space values -- RGB, HSL, HSV, CMYK, CIE Lab, OKLCH, with copy-ready CSS values
- WCAG contrast ratio -- Against both white and black backgrounds, with AA/AAA pass/fail
- Quick actions -- Jump to palette generation, harmony exploration, and color blindness simulation commands
Open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P) and type "ColorFYI":
| Command | Description |
|---|---|
| ColorFYI: Color Info | Full color details in a webview panel with all 7 color spaces, warmth classification, and text color recommendation |
| ColorFYI: Contrast Check | WCAG 2.1 contrast ratio between two colors with AA/AAA compliance for normal text (4.5:1), large text (3:1), and enhanced (7:1) |
| ColorFYI: Generate Tailwind Palette | Tailwind-style shade palette (50-950) with CSS custom properties and Tailwind config ready to paste |
| ColorFYI: Color Harmonies | Five harmony types: complementary, analogous, triadic, split-complementary, tetradic -- based on color wheel theory |
| ColorFYI: Simulate Color Blindness | Preview how colors appear under protanopia (red-blind), deuteranopia (green-blind), tritanopia (blue-blind), and achromatopsia |
| ColorFYI: Pick Color from Cursor | Get the color at cursor position and insert in any format (hex, rgb, hsl, oklch) |
CSS, SCSS, Less, HTML, JavaScript, TypeScript, React (JSX/TSX), Vue, Svelte, Python, JSON, YAML, TOML, Markdown, PHP, Ruby, Rust, Go, Java, Kotlin, Swift, Dart, C, C++, C#, and more. Configurable via settings.
| Setting | Default | Description |
|---|---|---|
colorfyi.enableDecorations |
true |
Show inline color swatches next to hex codes |
colorfyi.enableHover |
true |
Show color info panel on hover |
colorfyi.languages |
26 languages | Languages to activate color features in |
- Tools: Color Converter · Contrast Checker · Palette Generator · Shade Generator · Blindness Simulator · Gradient Generator
- Color Systems: CSS Named Colors · - Brand Colors: 544 Brand Palettes · Google · Apple · Meta
- Guides: Color Theory Glossary · Blog
- API: REST API Docs · OpenAPI Spec
ColorFYI is available across multiple platforms:
| Platform | Install | Link |
|---|---|---|
| PyPI | pip install colorfyi |
PyPI |
| npm | npm install @fyipedia/colorfyi |
npm |
| Homebrew | brew tap fyipedia/tap && brew install fyipedia |
Tap |
| MCP | pip install "colorfyi[mcp]" |
MCP Server |
| VS Code | ext install fyipedia.colorfyi-vscode |
Marketplace |
Part of the FYIPedia open-source developer tools ecosystem -- design, typography, and character encoding.
| Package | PyPI | npm | Description |
|---|---|---|---|
| colorfyi | PyPI | npm | Color conversion, WCAG contrast, harmonies -- colorfyi.com |
| emojifyi | PyPI | npm | Emoji encoding & metadata for 3,953 emojis -- emojifyi.com |
| symbolfyi | PyPI | npm | Symbol encoding in 11 formats -- symbolfyi.com |
| unicodefyi | PyPI | npm | Unicode lookup with 17 encodings -- unicodefyi.com |
| fontfyi | PyPI | npm | Google Fonts metadata & CSS -- fontfyi.com |
- ColorFYI Web App -- Interactive color reference with 16.7M hex colors
- REST API Documentation -- Free JSON API, no auth required
- PyPI Package -- Python library with CLI and MCP server
- npm Package -- TypeScript library, zero dependencies
- GitHub -- Extension source code
- Issues -- Report bugs or request features
Embed ColorFYI widgets on any website with colorfyi-embed:
<script src="https://cdn.jsdelivr.net/npm/colorfyi-embed@1/dist/embed.min.js"></script>
<div data-colorfyi="entity" data-slug="example"></div>Zero dependencies · Shadow DOM · 4 themes (light/dark/sepia/auto) · Widget docs
MIT