Gridnook

Color & tools

Palette generators, contrast checkers, gradient editors and small utilities that sit next to your design file.

7 resourcesFree · 3Open source · 2Freemium · 1Paid · 1

  • Rampsmith

    NewFeatured

    Generates accessible 11-step color ramps and checks every pair for contrast

    • color ramps
    • accessibility
    • tokens
    FreemiumFree / $6/mo

  • Contrast Ledger

    A Figma plugin that audits every text layer in a file for contrast issues

    • accessibility
    • figma plugin
    • wcag
    Paid$8/mo

  • Nibble SVG

    An in-browser SVG optimizer with a side-by-side diff before you export

    • svg
    • optimization
    • open source
    Open sourceFree

  • Gradient Loom

    A browser-based mesh gradient editor that exports CSS, SVG and PNG

    • gradients
    • css
    • backgrounds
    FreeFree

  • Penumbra

    An open-source generator for layered, realistic box shadows

    • shadows
    • css
    • open source
    Open sourceFree

  • Palette Press

    Pull a usable palette out of any photo, then export it as tokens

    • palettes
    • image
    • tokens
    FreeFree

  • Scalewright

    A type and spacing scale calculator that outputs fluid CSS clamp() values

    • typography
    • css clamp
    • spacing
    FreeFree

Know a resource that belongs in Color & tools?

Submit a resource
Live demo · Gridnook— View template →