Create perceptually uniform color palettes and smooth gradients with this free OKLCH color interpolator. Perfect for modern web design and CSS variable generation.
AI Generation Prompt
OKLCH Color Palette Interpolator Specification
Overview
A high-performance, single-file browser utility designed for UI/UX designers and frontend developers to generate perceptually uniform color palettes and gradients. By utilizing the OKLCH color space, this tool allows for the creation of smooth, visually stable transitions between arbitrary colors.
Core Features
- Dynamic Color Stops: Add or remove color stops dynamically to create complex gradients or multi-step palettes.
- OKLCH Live Interpolation: Real-time rendering of intermediate steps using browser-native OKLCH interpolation math.
- Step Control: Adjust the number of output color steps (from 3 to 20) via a slider.
- CSS Variable Export: A "copy-to-clipboard" feature that provides a structured block of CSS variables for instant integration into projects.
- Live Preview Canvas: An interactive area showcasing the resulting palette in varying formats (gradient bar, swatch grid, and text-on-background contrast test).
UI Layout
- Header: Clean, minimalist title with a short description of the utility.
- Input Section (Top): A horizontal list of color inputs (input type="color"), with a "+" button to add stops and an "-" button to remove them.
- Control Panel (Middle): A slider for "Number of Steps" and a button to toggle between "Linear" and "Easing" interpolation.
- Preview Section: A large, responsive container displaying the calculated palette swatches.
- Output Section (Bottom): A styled code block (
<pre><code>) that updates automatically, showing the generated CSS/OKLCH values.
Technical Constraints & Requirements
- Architecture: Single-file HTML (embedded CSS, embedded JS).
- Frameworks: Vanilla JavaScript only. No React/Vue/Angular.
- State Management: In-memory state only. No
localStorage,sessionStorage, or cookies. The state must be derived from the URL (optional) or reset on page refresh. - Compatibility: Must be compatible with modern browsers supporting
oklch()(Chrome 111+, Safari 15.4+, Firefox 113+). - User Experience: No alerts or prompts. Use custom DOM-based overlays if user feedback is required.
- Styling: Modern, "SaaS" aesthetic using system fonts, generous whitespace, and subtle box-shadows. Use a color palette of soft grays (#f9fafb), primary indigos (#4f46e5), and sharp whites.
Design Aesthetics
- Typography: Inter or system-ui sans-serif stack.
- Color Palette: Strictly light-mode. Primary actions: Indigo (#4f46e5), Secondary: Slate (#64748b).
- Animations: Transition properties applied to all hover states and swatch updates (200ms ease-in-out). Smooth fade-in for generated palettes.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is OKLCH and why should I use it for color palettes?
OKLCH is a perceptually uniform color space that aligns with human vision, ensuring gradients look natural and colors remain balanced in lightness and chroma. Unlike older models like HSL, which can create muddy transitions or uneven brightness, OKLCH provides consistent color relationships across the entire spectrum. This tool leverages these properties to help you build professional, accessible interfaces. By calculating color steps using OKLCH coordinates, you eliminate the "dead zones" often found in standard RGB or HSL interpolation, resulting in visually harmonious designs that look consistent across different display types.
Does this tool require browser extensions or external software?
No, this is a web-based, client-side utility designed to run entirely within your browser environment. You do not need to install any plugins, sign up for an account, or grant server permissions to generate your color palettes and CSS code. Because this tool is designed to be self-contained in a single HTML file, it ensures maximum privacy and data security. All interpolation calculations are performed in real-time within your browser's memory, providing instant feedback as you adjust your color stops without needing a network connection.
Can I export the generated palettes for use in my CSS code?
Absolutely. The application features a dedicated export panel that formats your generated colors into standard CSS custom properties (variables) or standard oklch() function syntax. You can simply copy the output and paste it directly into your project's stylesheet. We provide multiple formatting options, including raw hexadecimal conversions for legacy support and direct OKLCH declarations for modern web browsers. This ensures that whether you are building a new web application or refactoring an existing design system, your palette is ready for immediate deployment.
Why does the palette look different than HSL interpolations?
HSL color interpolation often results in distracting color shifts because it does not account for human perception or light intensity. HSL math simply treats color as a cylinder, which often leads to unexpected dark patches or desaturated mid-tones in gradients, particularly when moving between contrasting hues. In contrast, OKLCH treats lightness and chroma as independent, perceptually accurate channels. When you interpolate in this space, the brightness of your intermediate colors remains consistent, resulting in professional-grade transitions that are visually pleasing and easier for end-users to parse.
