oklch.fyi is a comprehensive resource and suite of utilities designed to help designers and developers leverage the OKLCH color model. Created by Jakub Krehel, this platform provides an intuitive environment for exploring, generating, and converting colors using a model that is inherently perceptually uniform. Unlike traditional models such as RGB or HSL, which can suffer from issues like uneven brightness and saturation drift, OKLCH allows for precise control over Lightness, Chroma, and Hue based on the underlying OKLab color space. This makes it significantly easier to create consistent, accessible, and high-quality color palettes that behave predictably across various displays and design systems.

The functionality of the platform centers on providing professional-grade color manipulation tools. Users can interact with an interactive palette creator, a bulk converter for processing existing CSS codebases, and advanced visualization tools to compare color gamuts like sRGB and Display-P3. Furthermore, the platform bridges the gap between design and implementation by providing an AI agent skill for coding assistants, enabling developers to automate the transition to OKLCH in their workflows.

Some of the key features are:

• Perceptual Uniformity: Manipulate color attributes knowing that lightness changes will remain consistent without unexpected shifts in hue or saturation.
• Gamut Awareness: Visualize and navigate color boundaries including support for modern wide-gamut spaces like Display-P3.
• Bulk Conversion: Quickly transform existing projects using legacy hex, RGB, or HSL color definitions into modern OKLCH CSS variables.
• Advanced Gradient Generation: Create smooth, professional gradients that avoid the muddy midpoints common in sRGB-based interpolation.
• AI Agent Integration: A specialized skill for Claude Code and other assistants that helps automate color system implementation and refactoring.
• Accessibility Support: Built-in contrast indicators for palette creation to ensure compliance with WCAG accessibility standards.
• CSS Exporting: Seamlessly copy color definitions as CSS variables or Tailwind-compatible configurations.

The platform operates as a web-based utility where users can either manually fine-tune colors using intuitive sliders for Lightness, Chroma, and Hue or use automated tools to generate harmonious color sequences. It provides clear visual feedback and real-time contrast checking to assist in the design decision-making process. The AI skill component allows for hands-free refactoring of legacy color systems, where developers can prompt their coding assistants to convert entire stylesheets, handle gamut clamping, and set up appropriate CSS fallbacks to maintain compatibility with older browsers.

Some common use cases include:

• System Design: Creating consistent color scales for design systems that maintain equal perceived brightness across different hues.
• Refactoring Legacy Code: Converting entire CSS color palettes from HSL or HEX to OKLCH to modernize application styles.
• Accessible UI Design: Verifying that generated color palettes meet specific contrast ratios before implementation in production interfaces.
• Gradient Optimization: Generating high-fidelity gradients that transition naturally without the artifacts found in traditional web color models.
• Wide-Gamut Web Development: Leveraging Display-P3 capabilities to create more vivid, impactful interface elements for modern screens.