All designer tools
Color Converter
hex · rgb · hsl · oklch, from any of them
Accepts hex, rgb()/rgba(), hsl()/hsla(), and oklch(). Alpha is dropped.
All formats
Keep this colour. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.
Preview
On light
#10b981
On dark
#10b981
Tip: click any row to copy its CSS string. Everything runs locally — nothing is uploaded.
Now use it on something
Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.
npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json
- Tailwind ↔ CSSTranslate a stylesheet into utilities or a className back into CSS, with a verdict on every line — exact, arbitrary value, arbitrary property, or why it could not be placed. Nothing is dropped in silence.
- HTML to JSXPaste markup and a stylesheet, take away a component — React, Vue, Svelte, styled-components or Tailwind. The same engine the catalog exports through, pointed at your own code, and it says what changed on the way through rather than leaving you to find out.
- Token GeneratorBuild the CSS custom properties every block in the catalog is styled against — a full light and dark set in the shadcn convention. Colour maths in OKLCH, so one lightness scale works across every hue.