HSL to OKLCH Converter
Converts HSL color values to the perceptually uniform OKLCH color space using automated browser interactions.
The source repository doesn't declare a license. Check its terms before reusing the code.
Key features
- Automated HSL to OKLCH conversion using Playwright and oklch.com
- Automatic numerical formatting and decimal truncation for output consistency
- Regular expression-based identification of color strings
- Batch processing of files to replace HSL values in situ
- Direct single-color conversion through user prompts
Use cases
- Ensuring design system colors are perceptually uniform for better accessibility
- Automating batch color updates across multiple source files
- Modernizing legacy CSS files by upgrading HSL color tokens to OKLCH
FAQ
What does the HSL to OKLCH Converter skill do?
This skill automates the process of converting HSL color values into the modern, perceptually uniform OKLCH color space. It uses Playwright to interact with web-based conversion tools, ensuring high accuracy and consistent formatting.
How does this skill improve my development workflow?
It eliminates the manual task of copying and pasting colors into external converters. By integrating browser automation directly into Claude Code, you can update entire stylesheets in seconds while maintaining precise numerical formatting.
When should I use this Claude Code skill?
Use this skill when modernizing your CSS or design system. It is ideal for refactoring legacy HSL colors to OKLCH to achieve better accessibility, consistent lightness across hues, and more predictable color manipulation.
Does it support different file types?
The skill is highly flexible; it uses regex-based identification, meaning it can find and replace HSL values within standard CSS, SCSS, JavaScript, or any text-based configuration file where HSL colors are defined.
Can this skill update multiple colors at once?
Yes. The skill features a batch processing mode that reads your source files, identifies all HSL strings using regular expressions, and automatically replaces them with truncated OKLCH values in situ.
Related skills
Frontend Design
Creates distinctive, production-grade frontend interfaces with high design quality and a memorable aesthetic.
Design Tools112 ptsFrontend Design
Creates distinctive, production-grade frontend interfaces with high design quality while avoiding generic AI-generated aesthetics.
Design Tools6812 ptsFrontend Design
Creates distinctive, production-grade frontend interfaces with high design quality by prioritizing bold aesthetic choices and avoiding generic AI-generated styles.
Design Tools312 pts