Component Code Calculator

A responsive, zero-dependency web tool for calculating 3–6 band resistor values and converting ceramic capacitor markings to capacitance—or capacitance values back to standard markings.

English · 中文

English

What it does

Component Code Calculator combines two electronics reference tools in one static webpage:

• Resistor color code calculator: supports 3, 4, 5, and 6 bands, defaults to the 5-band standard, renders a live resistor preview, and shows resistance, tolerance, practical range, and temperature coefficient when applicable.
• Ceramic capacitor code converter: converts common 3-digit, 4-digit, and R decimal markings such as 104, 1001, 4R7, and tolerance-suffixed codes such as 104K. Reverse lookup converts a capacitance value into a suitable marking and can append a tolerance code.
• Readable unit conversion: capacitor results show the selected or most useful unit together with the neighboring units, including pF, nF, µF, mF, and F.
• Built-in reference: includes resistor calculation guidance, color-to-number mappings, and multiplier references.
• Responsive interface: designed for desktop and mobile screens, with no external fonts, libraries, APIs, tracking, or network requests.

Requirements

A modern web browser with JavaScript enabled. No installation, package manager, build process, account, or network connection is required.

Use locally

1. Download or clone the repository.
2. Open index.html in a browser.
3. Choose Resistor Color Code or Ceramic Capacitor from the tabs at the top.

For resistor calculations, select the band count and each band color. For capacitor conversion, choose a lookup direction and enter either a printed code or a capacitance value.

Examples

• Five-band resistor brown-black-black-red-brown → 10 kΩ ±1%
• Capacitor code 104 → 100 nF → 0.1 µF
• Capacitor code 4R7 → 4.7 pF
• Capacitance 0.1 µF → code 104

Deploy as a static site

The project can be hosted by Cloudflare Pages, GitHub Pages, Netlify, or any static file server. Publish index.html at the site root. For direct ZIP upload, make sure index.html is at the root of the archive rather than inside another folder.

Project structure

.
├── index.html          # Complete application: HTML, CSS, and JavaScript
├── README.md           # English and Chinese documentation
├── CONTRIBUTING.md     # Contribution guide
├── SECURITY.md         # Vulnerability reporting policy
├── CHANGELOG.md        # Version history
├── LICENSE             # MIT License
└── .github/            # Issue and pull-request templates

Development and validation

The application intentionally keeps all code in index.html. Edit the file and refresh the browser to see changes. There is currently no automated test suite or build step.

Before submitting a change, manually verify at least these cases:

• the default five-band resistor displays 10 kΩ ±1%;
• 104K resolves to 100 nF with ±10% tolerance;
• 4R7 resolves to 4.7 pF;
• reverse lookup converts 0.1 µF to 104;
• the controls remain usable at narrow mobile widths.

See CONTRIBUTING.md for contribution details and SECURITY.md for security reporting. Version history is available in CHANGELOG.md.

License

Licensed under the MIT License. Copyright (c) 2026 Minhao Chang.

---

中文

项目功能

Component Code Calculator 将两个常用电子元件查询工具集成在一个静态网页中：

• **色环电阻计算器：**支持 3、4、5、6 色环，默认使用 5 色环标准；实时显示电阻外观，并给出阻值、误差、实际范围，以及适用时的温度系数。
• **瓷片电容代号转换器：**支持 104、1001、4R7 等常见 3 位、4 位和 R 小数代号，也能识别 104K 一类带误差字母的代号。反向查询可将实际电容量转换为适当的数字代号，并可附加误差标记。
• **直观单位换算：**电容结果会同时显示当前或最合适单位及其相邻单位，覆盖 pF、nF、µF、mF 和 F。
• **内置计算说明：**包含色环手动计算步骤、颜色数字对照和倍率速查表。
• **响应式界面：**适配电脑和手机，不使用外部字体、程序库、API、统计服务或网络请求。

使用要求

只需要启用 JavaScript 的现代浏览器。无需安装软件、依赖、构建工具、账户或网络连接。

本地使用

1. 下载或克隆仓库。
2. 用浏览器打开 index.html。
3. 通过网页顶部标签页选择“色环电阻”或“瓷片电容”。

计算电阻时，选择色环数量及各色环颜色。转换电容时，先选择查询方向，再输入印刷代号或实际电容量。

使用示例

• 五色环电阻“棕—黑—黑—红—棕” → 10 kΩ ±1%
• 电容代号 104 → 100 nF → 0.1 µF
• 电容代号 4R7 → 4.7 pF
• 电容量 0.1 µF → 代号 104

静态网站部署

本项目可以部署到 Cloudflare Pages、GitHub Pages、Netlify 或任意静态文件服务器。将 index.html 发布在网站根目录即可。使用 ZIP 直接上传时，请确保 index.html 位于压缩包根目录，而不是嵌套在其他文件夹中。

项目结构

.
├── index.html          # 完整应用，包含 HTML、CSS 和 JavaScript
├── README.md           # 中英文说明文档
├── CONTRIBUTING.md     # 贡献指南
├── SECURITY.md         # 安全问题报告方式
├── CHANGELOG.md        # 版本更新记录
├── LICENSE             # MIT 许可证
└── .github/            # Issue 与 Pull Request 模板

开发与验证

项目有意将全部代码保留在 index.html 中。编辑文件后刷新浏览器即可查看结果。目前没有自动化测试或构建步骤。

提交修改前，请至少手动检查以下情况：

• 默认五色环电阻显示 10 kΩ ±1%；
• 104K 转换为 100 nF，误差为 ±10%；
• 4R7 转换为 4.7 pF；
• 反向查询能将 0.1 µF 转换为 104；
• 在较窄的手机屏幕中仍能正常操作所有控件。

贡献说明请参阅 CONTRIBUTING.md，安全问题报告方式请参阅 SECURITY.md。 版本记录请参阅 CHANGELOG.md。

许可证

本项目采用 MIT License。Copyright (c) 2026 Minhao Chang。