ワンクリックでManusで任意のスキルを実行

oklch-converter

Convert CSS colors between HSL and OKLCH color spaces with mathematical accuracy. Use when: (1) migrating a CSS codebase from HSL to OKLCH or vice versa, (2) the user asks to "convert colors", "hsl to oklch", "oklch to hsl", (3) adding new color values to an OKLCH-based theme, (4) verifying color equivalence across color spaces.

Manusで実行

スター0

フォーク0

更新日2026年3月12日 19:24

ソース

jona

jona/skills

GitHub リポジトリを開く Creator のリポジトリを見る

インストールコマンド

ダウンロード

Manusで実行

役立つ用途SOC

ソフトウェア開発者コンピュータ・数学職15-1252L4

ファイルエクスプローラー

2 ファイル

SKILL.md

readonly

name	oklch-converter
description	Convert CSS colors between HSL and OKLCH color spaces with mathematical accuracy. Use when: (1) migrating a CSS codebase from HSL to OKLCH or vice versa, (2) the user asks to "convert colors", "hsl to oklch", "oklch to hsl", (3) adding new color values to an OKLCH-based theme, (4) verifying color equivalence across color spaces.

OKLCH Color Converter

Overview

OKLCH (Oklab Lightness-Chroma-Hue) is a perceptually uniform color space. Unlike HSL, equal numeric steps produce equal perceived brightness/saturation changes, making it ideal for design systems.

Format

HSL:   H S% L%        e.g. 192 100% 50%
OKLCH: L% C H         e.g. 89.03% 0.1739 171.27

L (Lightness): 0% to 100%
C (Chroma): 0 to ~0.4 (most colors fall under 0.3)
H (Hue): 0 to 360 degrees
Achromatic colors (saturation = 0): use none for hue, e.g. 59.82% 0 none

Conversion Script

Run the Node.js script at script/oklch-convert.js to convert HSL values to OKLCH. Edit the colors array in the script with your [name, H, S, L] tuples, then run:

node ~/.claude/skills/oklch-converter/script/oklch-convert.js

How to Apply

When converting a CSS file from HSL to OKLCH:

Run the script with all HSL values from the file to get OKLCH equivalents
Update CSS variable values from H S% L% to L% C H format
Update wrapper functions from hsl(var(--name)) to oklch(var(--name))
Update inline colors in gradients, shadows, and keyframes from hsl(...) to oklch(...)
Search the entire codebase for hsl( in .ts, .tsx, .js, .jsx files — JS/TS code that reads CSS variables and wraps them in template literals (e.g. `hsl(${value})`) must also be updated
Verify the build passes after all changes

Quick Reference: Common Conversions

HSL	OKLCH	Description
`0 0% 0%`	`0% 0 none`	Black
`0 0% 100%`	`100% 0 none`	White
`0 0% 50%`	`59.82% 0 none`	Mid gray
`0 100% 50%`	`62.80% 0.2577 29.23`	Pure red
`120 100% 50%`	`86.64% 0.2948 142.50`	Pure green
`240 100% 50%`	`45.20% 0.3132 264.05`	Pure blue
`180 100% 50%`	`90.54% 0.1546 194.77`	Pure cyan
`60 100% 50%`	`96.80% 0.2115 109.77`	Pure yellow

このリポジトリの他の Skills

同じリポジトリ

jobcrawl

jona/skills

CLI tool for crawling career pages and job aggregators. Use when the user asks to search for jobs, crawl career pages, find job listings, configure jobcrawl, add companies to config, run aggregator searches (YC), detect ATS providers, discover career page URLs, filter saved jobs, or any task involving the jobcrawl CLI. Triggers on: 'crawl jobs', 'find jobs', 'search careers', 'jobcrawl', 'add company', 'crawl aggregators', 'YC jobs', 'detect provider', 'discover career pages', 'match jobs', 'job search config'.

2026-04-070

html-in-canvas

jona/skills

Implement the WICG HTML-in-Canvas API for rendering HTML/CSS content into 2D canvas, WebGL, and WebGPU contexts with full interactivity, accessibility, and transform synchronization. Use when: (1) drawing HTML elements into a canvas with drawElementImage(), (2) rendering styled text, forms, or rich content in canvas, (3) using layoutsubtree attribute, (4) handling paint events for canvas child elements, (5) using texElementImage2D() for WebGL HTML textures, (6) using copyElementImageToTexture() for WebGPU, (7) transferring element snapshots to OffscreenCanvas workers with captureElementImage(), (8) synchronizing DOM hit-test transforms with canvas-rendered positions, (9) building accessible canvas applications with ARIA and drawFocusIfNeeded(), or (10) any code involving the html-in-canvas or canvas-draw-element Chrome flag APIs.

2026-04-070

seshi

jona/skills

Export Claude Code sessions as readable markdown transcripts. Use when the user says 'seshi', 'export session', 'export transcript', 'save session', 'session to markdown', or wants to convert a past Claude Code conversation into a shareable document.

2026-02-260

OKLCH Color Converter

Overview

OKLCH (Oklab Lightness-Chroma-Hue) is a perceptually uniform color space. Unlike HSL, equal numeric steps produce equal perceived brightness/saturation changes, making it ideal for design systems.

Format

HSL: H S% L% e.g. 192 100% 50% OKLCH: L% C H e.g. 89.03% 0.1739 171.27

L (Lightness): 0% to 100%

C (Chroma): 0 to ~0.4 (most colors fall under 0.3)

H (Hue): 0 to 360 degrees

Achromatic colors (saturation = 0): use none for hue, e.g. 59.82% 0 none

Conversion Script

Run the Node.js script at script/oklch-convert.js to convert HSL values to OKLCH. Edit the colors array in the script with your [name, H, S, L] tuples, then run:

node ~/.claude/skills/oklch-converter/script/oklch-convert.js

How to Apply

When converting a CSS file from HSL to OKLCH:

Run the script with all HSL values from the file to get OKLCH equivalents

Update CSS variable values from H S% L% to L% C H format

Update wrapper functions from hsl(var(--name)) to oklch(var(--name))

Update inline colors in gradients, shadows, and keyframes from hsl(...) to oklch(...)

Search the entire codebase for hsl( in .ts, .tsx, .js, .jsx files — JS/TS code that reads CSS variables and wraps them in template literals (e.g. `hsl(${value})`) must also be updated

Verify the build passes after all changes

Quick Reference: Common Conversions

HSL

OKLCH

Description

0 0% 0%

0% 0 none

Black

0 0% 100%

100% 0 none

White

0 0% 50%

59.82% 0 none

Mid gray

0 100% 50%

62.80% 0.2577 29.23

Pure red

120 100% 50%

86.64% 0.2948 142.50

Pure green

240 100% 50%

45.20% 0.3132 264.05

Pure blue

180 100% 50%

90.54% 0.1546 194.77

Pure cyan

60 100% 50%

96.80% 0.2115 109.77

Pure yellow