Tool Guides
How-to guides for using ColorFYI tools including the converter, contrast checker, and palette generator.
Figma Color Styles vs Variables: When to Use Each
Compare Figma color styles and variables. Learn key differences, migration paths, and best practices for teams managing design system color tokens.
Updated Feb 20, 2026
How to Check Color Contrast for WCAG Compliance
Learn how to check color contrast ratios for WCAG AA and AAA compliance. Step-by-step guide with practical hex code examples and common pitfalls to avoid.
Updated Feb 13, 2026
WCAG Color Contrast: A Developer's Complete Guide
Master WCAG 2.1 color contrast requirements. Learn AA and AAA levels, testing methods, automated tools, and how to fix contrast violations in your codebase.
Updated Feb 07, 2026
OKLCH Color Picker: Why Designers Are Switching
Discover why OKLCH color pickers produce better results than HSL. Learn perceptual lightness, uniform chroma, and how to build palettes in OKLCH color space.
Updated Jan 31, 2026
Adobe Color (color.adobe.com): Complete Guide
Master Adobe Color for palette creation, image extraction, accessibility testing, and CC Library integration. Complete guide to color.adobe.com features.
Updated Jan 24, 2026
Documenting Colors in Storybook: Patterns and Add-ons
Document color systems in Storybook with palette stories, accessibility checks, and auto-generated documentation. Best add-ons and patterns for color docs.
Updated Jan 18, 2026
shadcn/ui Color Customization: Theming with CSS Variables
Customize shadcn/ui colors with HSL CSS variables. Create custom themes, integrate dark mode, and sync with Tailwind CSS for consistent component styling.
Updated Jan 11, 2026
How to Find the Perfect Complementary Color
Learn how to find complementary colors using the color wheel, mathematical formulas, and the palette generator tool. Includes design patterns and hex code examples.
Updated Jan 04, 2026
Testing Color Accessibility in Figma: Plugins and Workflows
Test color accessibility in Figma with Stark, A11y plugins, and color blindness simulators. Build accessible design workflows with batch checking and handoff.
Updated Dec 29, 2025
CSS Gradient Guide: Linear, Radial, and Conic Gradients
Master CSS gradients: linear, radial, and conic syntax with practical examples, color stops, angles, and tips for using a gradient generator tool.
Updated Dec 22, 2025
Color Correction in Photoshop: Curves, Levels, and HSL
Master Photoshop color correction with Curves, Levels, and HSL adjustments. Learn histogram reading, white balance, and professional color grading techniques.
Updated Dec 16, 2025
How to Use a Color Blindness Simulator for Accessible Design
Learn how to use a color blindness simulator to design accessible interfaces. Covers deuteranopia, protanopia, tritanopia, and practical design guidelines with real examples.
Updated Dec 11, 2025
Figma Color Variables: A Complete Guide for Design Systems
Master Figma color variables for design systems. Learn to create, organize, and sync color tokens between Figma and code for consistent theming.
Updated Dec 05, 2025
Tailwind Shade Generator: Custom Color Scales Made Easy
Generate custom Tailwind CSS color scales from any hex code. Learn how the 50-950 shade system works, how to configure tailwind.config.js, and build dark mode scales.
Updated Dec 01, 2025
How to Extract a Color Palette from an Image
Learn how to extract color palettes from images using quantization algorithms, online tools, and programmatic approaches. Build palettes from photographs.
Updated Nov 26, 2025
Color Converter Guide: HEX to RGB to HSL and Beyond
Master color format conversions: HEX, RGB, HSL, CMYK, and OKLCH. Learn when to use each format and how to convert them instantly with ColorFYI's converter tool.
Updated Nov 21, 2025
How to Generate a Complete Color Palette from One Color
Learn how to build a complete, harmonious color palette from a single starting color. Covers complementary, analogous, triadic, and shade generation with hex examples.
Updated Nov 16, 2025