メニュー
OKLCH color space reference for CSS. Use when: choosing colors, building palettes, converting hex/rgb/hsl to oklch, checking perceived lightness, creating accessible color scales, working with P3 or wide-gamut colors.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | oklch-colors |
| description | OKLCH color space reference for CSS. Use when: choosing colors, building palettes, converting hex/rgb/hsl to oklch, checking perceived lightness, creating accessible color scales, working with P3 or wide-gamut colors. |
OKLCH captures perceived Lightness, Chroma, Hue, and Alpha. Values are human-readable and differences are predictable just by reading them. It represents wide-gamut colors (P3, Rec2020) that HSL and RGB cannot.
OKLCH improves on LCH by fixing a bug in the blue chroma range and providing better gamut correction.
.c { color: oklch(0.8 0.12 100 / 100%); }
/* ^ ^ ^ ^
| | | |
lightness | | |
chroma | | |
hue | |
alpha */
0–1: Perceived brightness. 0 = black, 1 = white. Equal steps look equal.0–0.4: Color intensity. 0 = gray, higher = more vivid. Most usable colors sit between 0.05–0.2.0–360: Color wheel angle. 0 = pink/red, 90 = yellow, 150 = green, 225 = blue, 300 = purple.0%–100%: Opacity. Optional, defaults to 100%..bw {
color: oklch(0 0 0); /* black */
color: oklch(1 0 0); /* white */
color: oklch(0.5 0 0); /* gray (any hue at chroma 0 is gray) */
}
.colors {
color: oklch(0.8 0.12 100); /* yellow */
color: oklch(0.6 0.12 100); /* darker yellow — only lightness changed */
color: oklch(0.8 0.05 100); /* grayish yellow — only chroma changed */
color: oklch(0.8 0.12 225); /* blue, same perceived lightness as the yellow */
}
.opacity {
color: oklch(0.8 0.12 100 / 50%); /* 50% transparent yellow */
}
L=0.7 appear equally bright regardless of hue — not true in HSL.To create a color scale with guaranteed contrast:
/* Same hue (250 = violet), decreasing lightness */
--violet-100: oklch(0.95 0.03 250); /* lightest, backgrounds */
--violet-300: oklch(0.80 0.08 250); /* borders, subtle accents */
--violet-500: oklch(0.65 0.15 250); /* primary accent */
--violet-700: oklch(0.45 0.15 250); /* dark foreground on light bg */
--violet-900: oklch(0.25 0.10 250); /* darkest, text on light bg */
Each 0.15 lightness step gives roughly 3:1 contrast between adjacent levels.
Tinted neutrals — warm or cool grays with a subtle hue:
--neutral-warm: oklch(0.95 0.01 60); /* warm off-white */
--neutral-cool: oklch(0.95 0.01 250); /* cool off-white */
Semantic colors — consistent lightness for equal visual weight:
--success: oklch(0.72 0.17 145); /* green */
--warning: oklch(0.80 0.16 75); /* amber */
--error: oklch(0.65 0.20 25); /* red */
--info: oklch(0.70 0.12 240); /* blue */
Dark mode counterparts — same hue/chroma, higher lightness:
/* Light mode accent */
--accent: oklch(0.55 0.20 285);
/* Dark mode — raise lightness to maintain contrast on dark bg */
--accent: oklch(0.75 0.15 285);
npx convert-to-oklch ./src/**/*.cssGenerate type-safe HTML in Rust using the `html` crate's builder pattern. Use when: writing HTML templates, building pages, rendering components, creating server-side HTML, using the html crate, generating HTML from Rust code.
Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.
Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.
Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.
Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.