Tools / Gradient Generator
CSS Gradient Generator.
Pick a few colors, choose linear or radial, set the angle, and copy the
background rule. Live preview, no signup — and you can seed it
from any of the 378 historical Wada palettes.
—Studio
Taking a gradient off the screen
Gradients band and shift the moment they leave sRGB. Where this one is going decides what it needs next.
-
...onto paper
Start here if the palette gets printed. Screen colour and ink colour are not the same colour, and this is the deck that translates between them.
Pantone
Color Bridge Guide — coated
Listed on Amazon as Pantone Color Bridge Guide Coated | Pantone to CMYK, RGB & HTML Color Matching Fan Deck for Graphic Design, Branding & Print | GG6103B
View on Amazon -
...onto a screen you can trust
Start here if it stays digital. An uncalibrated monitor is the single most common reason a palette that looked right on your desk looks wrong everywhere else.
Calibrite
Display Plus HL colorimeter kit
Listed on Amazon as Calibrite Video Photo Kit with Display Plus HL Colorimeter and ColorChecker Passport Video 2, 10,000 Nit Monitor Calibration, Camera Color Matching
View on Amazon -
...by hand
Start here if you are mixing it. Wada's plates were flat printed colour; gansai pans are the closest everyday medium to them.
Kuretake
Gansai Tambi 36
Listed on Amazon as Kuretake GANSAI TAMBI Watercolor Paint Set 36 Colors
View on Amazon
Amazon Associates affiliate links — your price is unchanged and a small commission keeps the archive free. As an Amazon Associate we earn from qualifying purchases.
How CSS gradients work
Linear vs radial
A linear gradient blends colors along a straight line whose
direction you set with an angle (0deg = upward, 90deg =
rightward). A radial gradient blends outward from a center
point in concentric rings — good for spotlights and soft glows.
Color stops
Each stop is a color plus an optional position (0%–100%).
Two stops give a clean fade; three or more let you build bands and rainbows.
Evenly spaced stops are smoothest; clustering two stops creates a hard edge.