color-lab
Convert hex colors and measure contrast against a background.
newpanecommandtoast
Convert hex colors and measure contrast against a background.
Convert hex colors and measure contrast against a background.
Use it when: Check a foreground and background pair while designing.
Screenshot of this mod's render tree in the fixture preview, with sample data. This is not a capture of the Claude Code application. How previews are made.
claude plugin marketplace add whyashthakker/awesome-claude-code-mods
claude plugin install color-lab@awesome-claude-code-modsRun /reload-plugins in an existing session, then /color-lab. Use Tab and Enter to operate controls; Esc closes the pane. Terminal and Desktop Code tab supported; pane UI is unavailable in claude -p and the VS Code chat panel.
Try the source without installing:
claude --plugin-dir ./mods/color-labWorks on the text you enter, in memory. Uses the clipboard on request. No files, processes, network, persistence, or model calls.
Module variables reset on hot reload. All display output is bounded; viewers may truncate long content to 9,000 characters. Relative file paths and Git commands use the session working directory.
Tested with Claude Code 2.1.288. Minimum documented mods version: 2.1.287. The API can change; validate against your installed version.
claude plugin validate mods/color-lab --strict
claude plugin test mods/color-labTests cover plugin commands, pane isolation, both UI surfaces, and the behavior described in tests/register.test.ts. Drawing tests validate element trees; they do not verify pixels painted by the native apps. Validation details.
MIT licensed. No runtime packages or build step required.
hooks/register.js 49 lines1import { clean, text, code, row, frame, bar, pretty, bounded, entries, safePath } from './ui.js'
2const ID = "color-lab"
3let foreground="#86efac"
4let background="#0f172a"
5let output=""
6
7
8function rgb(s){if(!/^#[0-9a-f]{6}$/i.test(s))throw new Error('Use six-digit #RRGGBB colors.');return [1,3,5].map(i=>parseInt(s.slice(i,i+2),16))}
9function luminance(c){return c.map(x=>{const v=x/255;return v<=0.04045?v/12.92:((v+0.055)/1.055)**2.4}).reduce((s,x,i)=>s+x*[0.2126,0.7152,0.0722][i],0)}
10function transform(){
11 const a=rgb(foreground),b=rgb(background),x=luminance(a),y=luminance(b)
12 const ratio=(Math.max(x,y)+0.05)/(Math.min(x,y)+0.05)
13 return 'Foreground RGB: '+a.join(', ')+'\nBackground RGB: '+b.join(', ')+'\nContrast: '+ratio.toFixed(2)+':1\n'+(ratio>=4.5?'Meets 4.5:1 threshold for normal text.':'Below 4.5:1 threshold for normal text.')
14}
15
16async function calculate($) {
17 try { output=await transform() } catch(error){output='Invalid input: '+error.message}
18 $.ui.invalidate('ui.render')
19}
20
21export function register(on) {
22 on('session.start', async ($, e, next) => {
23
24 await $.command.register({name:ID, description:"Convert hex colors and measure contrast against a background.", immediate:true, argumentHint:""})
25 return next(e)
26 })
27 on('command.run', {command:"color-lab"}, async ($, e) => {
28 await calculate($)
29 await $.ui.open({id:ID,title:"Color Lab",focus:true,closeOnEscape:true})
30 return {}
31 })
32
33 on('ui.render', {component:'Pane'}, async ($, e, next) => {
34 if(e.requestId !== ID) return next(e)
35 const E = $.ui.resolve(e)
36 try {
37 const body = await draw($, E)
38 return frame(E,"Color Lab","Convert hex colors and measure contrast against a background.",body)
39 } catch(error) {
40 return frame(E,"Color Lab",'Unable to inspect this data.',[text(E,error.message,{color:'yellow'}),E.Button({key:'refresh',label:'Refresh',onPress:()=>$.ui.invalidate('ui.render')})])
41 }
42 })
43}
44async function draw($, E) {
45 const refresh = E.Button({key:'refresh',label:'Refresh',hotkey:'r',plain:true,onPress:()=>$.ui.invalidate('ui.render')})
46return [E.Input({key:"foreground",label:"Foreground hex",value:clean(foreground),submitLabel:'apply',onSubmit:async(v)=>{foreground=v;await calculate($)}}),
47E.Input({key:"background",label:"Background hex",value:clean(background),submitLabel:'apply',onSubmit:async(v)=>{background=v;await calculate($)}}),code(E,output),E.Button({key:'copy',label:'Copy result',onPress:async()=>{const r=await $.ui.copy({text:output});if(!r.isCopied)$.ui.toast('Clipboard unavailable.')}})]
48}
49hooks/ui.js 36 lines1// Pure UI helpers. No engine access; each plugin contains its own copy.
2export function clean(value, limit = 9000) {
3 return String(value ?? '').replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f-\u009f]/g, '').slice(0, limit)
4}
5export function text(E, value, props = {}) {
6 return E.Text({ ...props, children: [clean(value)] })
7}
8export function code(E, value, language = 'text') {
9 return E.Code({ source: clean(value), language })
10}
11export function row(E, children) {
12 return E.Box({ flexDirection: 'row', columnGap: 2, flexWrap: 'wrap', children })
13}
14export function frame(E, title, subtitle, children) {
15 return E.Box({ flexDirection: 'column', gap: 1, children: [
16 text(E, title, { bold: true, color: 'cyan' }),
17 text(E, subtitle, { dimColor: true }), ...children,
18 ] })
19}
20export function bar(percent, width = 24) {
21 const p = Math.max(0, Math.min(100, Number(percent) || 0))
22 const n = Math.round(p / 100 * width)
23 return '[' + '#'.repeat(n) + '-'.repeat(width - n) + '] ' + p.toFixed(1) + '%'
24}
25export function pretty(value) { return JSON.stringify(value, null, 2) }
26export function bounded(value, max = 9000) {
27 if (value.length > max) throw new Error('Input exceeds ' + max + ' characters. Use a smaller selection.')
28 return value
29}
30export function entries(value) { return value && typeof value === 'object' ? Object.entries(value) : [] }
31export function safePath(value) {
32 const path = value.trim()
33 if (!path || path.startsWith('-') || /[\x00-\x1f]/.test(path)) throw new Error('Enter a path without control characters or leading flags.')
34 return path
35}
36