[{"data":1,"prerenderedAt":116},["ShallowReactive",2],{"{\"resolve_links\":\"url\",\"resolve_relations\":\"case_list.cases,timeline.roles,role.cases,move.proof\",\"version\":\"published\"}lab\u002Foklch-colour-ramps":3},{"data":4,"headers":94},{"story":5,"cv":91,"rels":92,"links":93},{"name":6,"created_at":7,"published_at":8,"updated_at":9,"id":10,"uuid":11,"content":12,"slug":79,"full_slug":80,"sort_by_date":81,"position":82,"tag_list":83,"is_startpage":86,"parent_id":87,"meta_data":81,"group_id":88,"first_published_at":8,"release_id":81,"lang":89,"path":81,"alternates":90,"default_full_slug":81,"translated_slugs":81},"OKLCH colour ramps","2026-10-15T13:40:40.160Z","2026-10-15T13:40:40.228Z","2026-10-15T13:40:40.245Z",230940836522509,"1b8efeff-f674-4882-a91c-e16c0226397b",{"_uid":13,"body":14,"date":67,"live":68,"repo":73,"intro":75,"title":6,"status":76,"question":77,"component":78},"2c5a61a4-a8f1-4153-96ca-67e3164b023c",{"type":15,"content":16},"doc",[17,25,30,35,63],{"type":18,"attrs":19,"content":21},"heading",{"level":20},2,[22],{"text":23,"type":24},"Why OKLCH","text",{"type":26,"content":27},"paragraph",[28],{"text":29,"type":24},"HSL fibs about lightness. A yellow and a blue at the same L look nothing alike, so a ramp built by nudging L in HSL comes out lumpy. OKLCH is designed so that equal steps in lightness look like equal steps to a person.",{"type":18,"attrs":31,"content":32},{"level":20},[33],{"text":34,"type":24},"How it builds the ramp",{"type":36,"content":37},"bullet_list",[38,45,51,57],{"type":39,"content":40},"list_item",[41],{"type":26,"content":42},[43],{"text":44,"type":24},"Your colour becomes the 500.",{"type":39,"content":46},[47],{"type":26,"content":48},[49],{"text":50,"type":24},"Lighter shades raise lightness towards a set scale and ease off the chroma.",{"type":39,"content":52},[53],{"type":26,"content":54},[55],{"text":56,"type":24},"Darker shades drop lightness as a proportion of the base and hold chroma up, so they don't go muddy.",{"type":39,"content":58},[59],{"type":26,"content":60},[61],{"text":62,"type":24},"Everything is clamped back into valid RGB at the end.",{"type":26,"content":64},[65],{"text":66,"type":24},"It's a single HTML file. Open it, pick a colour, copy the shades you like.","2026-01-11 00:00",{"url":69,"target":70,"linktype":71,"fieldtype":72},"\u002Fx\u002Foklch-ramps\u002F","_blank","url","multilink",{"url":74,"target":70,"linktype":71,"fieldtype":72},"https:\u002F\u002Fgithub.com\u002Fmalcock\u002Fclaude-tailwind-color-test","A palette generator that builds the full 50 to 950 ramp from a single colour. It works in OKLCH, so lightness steps look even whatever the hue.","live","Can one colour give you a Tailwind-style palette where every step looks like the same size jump?","experiment","oklch-colour-ramps","lab\u002Foklch-colour-ramps",null,0,[84,85],"colour","tailwind",false,230940095289416,"889c52c9-c1f4-4b28-ba32-cdfbcd1a485a","default",[],1792072709,[],[],{"cache-control":95,"connection":96,"content-encoding":97,"content-type":98,"date":99,"etag":100,"referrer-policy":101,"sb-be-version":102,"server":103,"transfer-encoding":104,"vary":105,"via":106,"x-amz-cf-id":107,"x-amz-cf-pop":108,"x-cache":109,"x-content-type-options":110,"x-frame-options":111,"x-permitted-cross-domain-policies":112,"x-request-id":113,"x-runtime":114,"x-xss-protection":115},"max-age=0, public, s-maxage=604800, stale-if-error=3600","keep-alive","gzip","application\u002Fjson; charset=utf-8","Thu, 15 Oct 2026 13:59:06 GMT","W\u002F\"1871b55c09d700626b437e651c8c7031\"","strict-origin-when-cross-origin","5.980.1","nginx\u002F1.29.1","chunked","Origin,Accept-Encoding","1.1 7d601aefe5f60f6e064a938234f87992.cloudfront.net (CloudFront)","Ln4rMP4HE5aHlhW96-RI4FMFz1wcAlysypjd87xkMOrI434Ua6BnvA==","MIA50-P7","Miss from cloudfront","nosniff","SAMEORIGIN","none","a4b76ebd-b1ee-468f-9413-d025bd89a115","0.026316","0",1792072745634]