Open source · Author

Resistor colour code calculator

TypeScript10 GitHub starsresistor-color-calculator

A small web utility that turns a resistor's colour bands into its resistance value and tolerance — click a band on the drawn resistor, pick a colour, read the answer.

Why it mattered

Built for my own electronics tinkering, because memorising the colour code is a chore and looking up a table mid-build breaks the flow. It's stayed useful to other people for the same reason. The interface is the point: rather than four dropdowns, you get a resistor drawn in SVG with clickable bands, so the thing on screen matches the component in your hand. It's also my oldest live project — started in 2017 and rewritten as the React ecosystem moved, from Create React App to Vite and on to React 19.

Code contributions

  • Interactive SVG resistor — click a band to change it, and the drawing updates with it
  • Formats the result with SI prefixes, so 4700 Ω reads as 4.7 kΩ
  • Keyboard-accessible colour pickers, with light and dark themes that follow the system
  • Running since 2017; now on React 19, MUI 7 and Vite, deployed to GitHub Pages

Tech

ReactTypeScriptElectronicsWeb appSVGMUIAccessibility

How I use these tools

Links

Other projects

  • react-navigationRouting and navigation for React Native and web apps.
  • react-native-paperMaterial Design components for React Native (Android & iOS).
  • react-multi-carouselA lightweight, production-ready carousel with multi-item and SSR support — no dependencies, 2kb.
  • uiA component library for React Native & Expo that works with any design system — Material Design 3 out of the box.
  • inertiaDeclarative animation primitives for React Native — animations are props, not boilerplate.

Want something like this built?

Get in touch →