Refract

Roadmap

What's next for Refract

Everything we've shipped, what we're building right now, and the ideas we're exploring. Free tools stay free, and new ones arrive about every week or two.

Building now

In progress and coming next.

  • BuildingImages

    Image to Base64

    Turn images into data URIs for CSS, HTML and email templates, and decode Base64 back into a file. Batch support, nothing uploaded.

  • BuildingData

    CSV ↔ JSON converter

    Convert in either direction with delimiter detection, nested keys and a table preview. Handles large files in your browser.

Exploring

Ideas we're weighing up. Not promises, and in no particular order.

New tools

  • ExploringWeb & SEO

    Open Graph image generator

    Design 1200×630 share images from templates and export PNGs. Pairs with the meta tag generator.

  • ExploringData

    JSON formatter and validator

    Format, minify and validate JSON with clear error messages that point at the exact line.

  • ExploringCSS

    Cubic-bezier easing editor

    Drag curve handles, preview the motion, and copy the timing function or a full transition.

  • ExploringCSS

    CSS grid generator

    Draw a layout visually and get grid-template-areas code you can actually read.

  • ExploringColour

    Colour converter

    Convert between HEX, RGB, HSL and OKLCH, with gamut warnings for wide-gamut colours.

  • ExploringImages

    QR code generator

    Clean, scannable QR codes as SVG or PNG, with colour and margin controls.

Across every tool

  • Shareable links

    Every setting saved in the URL, so you can send someone the exact gradient or shadow you made.

  • Presets and favourites

    Save the settings you use most, stored in your browser with no account needed.

  • Command palette

    Press ⌘K (or Ctrl K) anywhere to jump straight to any tool.

  • Send to another tool

    Take a palette into the gradient generator, then check its contrast, without copying values by hand.

Bigger ideas

  • Longer term

    Refract Kit

    Build a palette, type scale, spacing, radius and shadows together, preview them on a live interface, and export design tokens for CSS, Tailwind or Figma.

  • Longer term

    Refract Audit

    A page speed and front-end quality report for any URL: what is heavy, what is slow and what to fix first.

Shipped

Live now and free to use.

  1. Colour, SVG and SEO update 3 tools

    A contrast checker with palette generator, an SVG optimiser and a meta tag generator with social previews.

  2. Launch 10 tools

    Refract opens with ten CSS and image tools, all free and all running in your browser.

Missing a tool you need?

Tell us what you'd use. Suggestions shape what we explore next, and the most requested ideas move up the list.

Suggest a tool