Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →jezweb/color-palette
Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS output, WCAG contrast checks.
Passed 18 of 21 test cases with the skill, and 13 of 21 without it.
and 8 more in the full report
7 fixed12 passed either way1 still failing2 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 7 test cases the skill fixed. Same model, same prompt, with and without the skill.
What exact lightness percentages are assigned to shade 200, shade 500, and shade 800 in the 11-shade scale generator?
| Checked | Without skill | With skill |
|---|---|---|
| Shade 200 lightness is set to 87%. | Missed | Passed |
| Shade 500 lightness is set to 48%. | Missed | Passed |
| Shade 800 lightness is set to 27%. | Missed | Passed |
The instructions your model reads when the skill loads.
Generate a complete, accessible colour system from a single brand hex. Produces Tailwind v4 CSS ready to paste into your project.
Ask for the primary brand colour. A single hex like #0D9488 is enough.
Convert hex to HSL, then generate shades by varying lightness while keeping hue constant.
function hexToHSL(hex) {
hex = hex.replace(/^#/, '');
const r = parseInt(hex.substring(0, 2), 16) / 255;
const g = parseInt(hex.substring(2, 4), 16) / 255;
const b = parseInt(hex.substring(4, 6), 16) / 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const diff = max - min;
let l = (max + min) / 2;
let s = 0;
if (diff !== 0) {
s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min);
}
let h = 0;
if (diff !== 0) {
if (max === r) h = ((g - b) / diff + (g < b ? 6 : 0)) / 6;
else if (max === g) h = ((b - r) / diff + 2) / 6;
else h = ((r - g) / diff + 4) / 6;
}
test cases passed, vs 13 / 21 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.