Skip to main content
Craftkite

Tools

Color Tools (TypeScript)

Converts between hex, RGB and HSL, mixes colours, builds tints and shades, and checks WCAG contrast so text stays readable.

Web appStandard
Use this template

Free to sign up. You approve the plan before anything is built.

A working demo with sample data: add, edit and filter. Your changes stay in your browser.

How it works

  1. Color Tools (TypeScript): the Color Tools screen

    Step 1 · Color Tools

    Hex, RGB and HSL conversion

  2. Color Tools (TypeScript): the Reference screen

    Step 2 · Reference

    WCAG 2.2 contrast ratio and levels

  3. Color Tools (TypeScript): the Quality screen

    Step 3 · Quality

    Tints, shades and mixing

Start in three steps

  1. Step 1

    Start from this template

    Sign up free and open the template in the studio. Change the description to fit your idea if you like.

  2. Step 2

    Approve the plan

    The agent shows you what it will build: screens, data and features. Nothing is built until you agree.

  3. Step 3

    Test and publish

    The app is built, tested in a real browser and ready to publish on your own address.

More Tools templates