<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The Cosmetics Lab | Powerful Soap Calculator & DIY Tool</title>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YCKXPTXKRJ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-YCKXPTXKRJ');
</script>
<script>
window.isUserLoggedIn = false;
</script>
<script src="/js/min/pages/layout.min.js?v=J4Os4NzuCk7amT84UMGQF9-uvR6EktvCHkBtMRDYV7g"></script>
<link href="/css/min/pages/layout.min.css?v=xFmp4KF-n0Z1zNhZZeYD_2OLANCNZretwMqGwRSh-6Q" rel="stylesheet" />
<link href="/lib/font-awesome/css/all.min.css" rel="stylesheet" />
<meta name="description" content='Welcome to The Cosmetics Lab — home of the popular Soap Calculator for cold process soaps. Perfect for beginners and pros. Start crafting your own recipes today!' />
<link rel="canonical" href="https://www.thecosmeticslab.com" />
<meta name="robots" content="index,follow" />
<meta property="og:image" content="https://www.thecosmeticslab.com/images/source_images/screenshots/soap_calculator/combined_screenshots_desktop_and_mobile_only_og.png" />
<meta property="og:title" content="The Cosmetics Lab | Powerful Soap Calculator & DIY Tool" />
<meta property="og:description" content="The Cosmetics Lab | Powerful Soap Calculator & DIY Tool" />
<meta property="og:url" content="https://www.thecosmeticslab.com" />
<meta property="og:site_name" content="The Cosmetics Lab" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#9f00a7">
<meta name="msapplication-TileColor" content="#9f00a7">
<meta name="theme-color" content="#ddddff">
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@graph": [ {"@type":"Organization","name":"thecosmeticslab","legalName":"thecosmeticslab","url":"https://www.thecosmeticslab.com","logo":"https://www.thecosmeticslab.com/images/logo.png","areaServed":null,"contactPoint":{"@type":"ContactPoint","email":"info@thecosmeticslab.com","telephone":null,"contactType":"general information and inquiries"},"sameAs":["https://www.facebook.com/the.cosmetics.laboratory/"]},{"@type":"WebSite","url":"https://www.thecosmeticslab.com","name":"thecosmeticslab","description":"The Cosmetics Lab - learn how to make home-made cosmetics of all types","inLanguage":"en-US","publisher":{"@type":"Organization"}} ]
}
</script>
<link href="/css/min/pages/home.min.css?v=IvBCgP43Br2mdaQhYQRz2ZirQLHGqPsONYw0bgDv8oY" rel="stylesheet" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
<div class="container-fluid">
<a class="logo" href="/">
<span class="visually-hidden">The Cosmetics Lab</span>
<img src="/favicon-32x32.png" alt="The cosmetics lab logo" width="32" height="32">
</a>
<a class="navbar-brand" href="/">The Cosmetics Lab</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse main-menu-bar" id="navbarColor02">
<!-- Left section (always stacked in mobile) -->
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="/soap-recipe-lye-calculator">Soap Calculator</a>
</li>
</ul>
<!-- Right section (joins collapse on mobile) -->
<div id="navBarUserMenu">
<ul class="navbar-nav ms-lg-auto">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a href="/Account/Login">Log in</a></li>
</ul>
</ul>
</div>
</div>
</div>
</nav>
</header>
<div class="container">
<style>
.announcement-modal-backdrop {
display: none;
position: fixed;
inset: 0;
z-index: 99999;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
padding: 1rem;
}
.announcement-modal {
background-color: #fff;
max-width: 500px;
width: 100%;
border-radius: 8px;
padding: 24px;
position: relative;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
animation: scale-in 0.3s ease-out;
}
.announcement-modal-title {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1rem;
color: #222;
margin-right: 25px;
}
.announcement-modal-body {
font-size: 1rem;
margin-bottom: 1.5rem;
color: #444;
}
.announcement-modal-close {
position: absolute;
top: 12px;
right: 12px;
font-size: 1.4rem;
background: none;
border: none;
color: #888;
cursor: pointer;
}
.announcement-modal-close:hover {
color: #333;
}
@keyframes scale-in {
from {
transform: scale(0.9);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
@media (max-width: 576px) {
.announcement-modal {
max-height: 90vh;
overflow-y: auto;
padding: 16px;
}
}
</style>
<div class="announcement-modal-backdrop" data-announcement-id="1007">
<div class="announcement-modal">
<button class="announcement-modal-close" aria-label="Dismiss Announcement">×</button>
<h2 class="announcement-modal-title">Recipe Limit Doubled!</h2>
<div class="announcement-modal-body">
<p>You can now save up to <strong>20 recipes in your account</strong>! </p>
<p>More ideas, more inspiration, more soaps!</p>
</div>
<a href="/blog/soap-calculator-whats-new" class="btn btn-success" target="_blank" data-announcement-cta>
Read more
</a>
</div>
</div>
<script>
(function () {
const modalEl = document.querySelector('.announcement-modal-backdrop');
if (!modalEl) return;
const id = modalEl.getAttribute('data-announcement-id');
if (localStorage.getItem(`announcement-dismissed-${id}`) === '1') {
modalEl.remove();
return;
}
setTimeout(() => {
modalEl.style.display = 'flex';
}, 800);
modalEl.querySelector('.announcement-modal-close')?.addEventListener('click', () => {
modalEl.remove();
localStorage.setItem(`announcement-dismissed-${id}`, '1');
});
modalEl.querySelector('[data-announcement-cta]')?.addEventListener('click', () => {
modalEl.remove();
localStorage.setItem(`announcement-dismissed-${id}`, '1');
});
})();
</script>
<!-- This wraps user layout parts -->
<!-- First Card Row (Hero) -->
<div class="row justify-content-center mt-4">
<div class="col-12">
<div class="card hero-card shadow-lg border-0 text-start p-4">
<!-- Full width heading -->
<div class="card-header hero-header text-uppercase mb-3">
<h1 class="display-6 mb-0 mt-0">Advanced Soap & Lye Calculator for soap makers</h1>
</div>
<!-- Split row: text left, image right -->
<div class="row align-items-center g-4">
<div class="col-lg-6">
<div class="card-body fs-5 p-0">
<p class="hero-tagline">
Easy to use. Powerful. Free. No ads.
</p>
<p>The Cosmetics Lab Soap Calculator offers the perfect balance of simplicity and power:</p>
<ul class="hero-points">
<li><strong>Clear, clutter-free UI</strong> — focus on your recipe, not the noise.</li>
<li>Save up to <strong>20 recipes and 5 templates</strong> — all your recipes in one place.</li>
<li><strong>Guided Wizards</strong> — perfect for beginners who need guidance.</li>
<li><strong>One-Page Mode</strong> — full control when you want advanced options.</li>
<li><strong>Neat bar graphs</strong> — check your soap’s properties at a glance.</li>
<li><strong>Extensive additives list</strong>.</li>
<li class="d-md-list-item">
Learn fast —
<a href="/instructions/soap-calculator-tutorials" class="text-decoration-underline" target="_blank">browse our tutorials</a>
</li>
</ul>
<a href="/soap-recipe-lye-calculator" class="btn btn-success mt-3">Start Creating Your Soap Recipe</a>
</div>
</div>
<div class="col-lg-6">
<a class="alt-media tall" href="/soap-recipe-lye-calculator" aria-label="Hero screenshot of the Soap Calculator">
<picture class="alt-media tall">
<!-- AVIF -->
<source
type="image/avif"
srcset="/images/home/hero-400.avif 400w,
/images/home/hero-1200.avif 1200w,
/images/home/hero-1600.avif 1600w"
sizes="(min-width: 992px) 612px, 100vw">
<!-- WebP -->
<source
type="image/webp"
srcset="/images/home/hero-400.webp 400w,
/images/home/hero-1200.webp 1200w,
/images/home/hero-1600.webp 1600w"
sizes="(min-width: 992px) 612px, 100vw">
<!-- Fallback -->
<img
src="/images/home/hero-1200.jpg"
width="1200" height="675"
alt="The Cosmetics Lab Soap Calculator — clean UI with property graphs"
loading="eager" decoding="async" fetchpriority="high">
</picture>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Alternating Sections -->
<div class="alt-sections">
<!-- Block 1: Ease of Use & Layout (Image LEFT) -->
<section class="alt-section">
<div class="row align-items-center g-4">
<div class="col-lg-6 order-lg-1">
<a class="alt-media tall" href="/soap-recipe-lye-calculator" aria-label="Screenshot of the guided wizard for creating soap recipes">
<picture class="alt-media tall">
<!-- AVIF -->
<source
type="image/avif"
srcset="/images/home/clean-layout-600.avif 600w,
/images/home/clean-layout-1200.avif 1200w"
sizes="(min-width: 992px) 612px, 100vw">
<!-- WebP -->
<source
type="image/webp"
srcset="/images/home/clean-layout-600.webp 600w,
/images/home/clean-layout-1200.webp 1200w"
sizes="(min-width: 992px) 612px, 100vw">
<!-- Fallback -->
<img
src="/images/home/clean-layout-1200.jpg"
width="1200" height="675"
alt="Guided wizard interface for creating a soap recipe"
loading="lazy" decoding="async">
</picture>
</a>
</div>
<div class="col-lg-6 order-lg-2">
<div class="alt-eyebrow">Quick Start</div>
<h2 class="alt-title">Ease of use, clean layout</h2>
<p class="alt-lead">Create recipes in just a few clicks with a clean, guided layout that works seamlessly on desktop and mobile.</p>
<li>Intuitive layout with clearly organized sections</li>
<ul class="alt-list">
<li>
Create a new recipe in just a few clicks
<a href="https://youtu.be/WACaAlWGuTc"
target="_blank"
rel="noopener"
class="demo-link">
( watch demo <i class="fa-solid fa-circle-play"></i> )
</a>
</li>
<li>Fully optimized for mobile devices</li>
</ul>
<a class="btn btn-outline-brand" href="/soap-recipe-lye-calculator">Experience the clean layout</a>
</div>
</div>
</section>
<!-- Block 2: Space for Your Soap Ideas (Image RIGHT) -->
<section class="alt-section">
<div class="row align-items-center g-4">
<div class="col-lg-6 order-lg-2">
<a class="alt-media tall" href="/soap-recipe-lye-calculator" aria-label="Screenshot of the recipe management interface">
<picture class="alt-media tall">
<!-- AVIF -->
<source
type="image/avif"
srcset="/images/home/manage-recipes-img-600.avif 600w,
/images/home/manage-recipes-img-1200.avif 1200w"
sizes="(min-width: 992px) 612px, 100vw">
<!-- WebP -->
<source
type="image/webp"
srcset="/images/home/manage-recipes-img-600.webp 600w,
/images/home/manage-recipes-img-1200.webp 1200w"
sizes="(min-width: 992px) 612px, 100vw">
<!-- Fallback -->
<img
src="/images/home/manage-recipes-img-1200.jpg"
width="1200" height="675"
alt="Recipe management screen showing saved soap recipes and templates"
loading="lazy" decoding="async">
</picture>
</a>
</div>
<div class="col-lg-6 order-lg-1">
<div class="alt-eyebrow">Save & organize</div>
<h2 class="alt-title">Space for your soap ideas</h2>
<p class="alt-lead">Keep up to 20 recipes and 5 templates, manage them all in one place, and adapt them into new variations with ease.</p>
<ul class="alt-list">
<li>Save up to <strong>20 recipes</strong> and <strong>5 templates</strong></li>
<li>Templates let you spin off variations in seconds</li>
<li>Manage all your recipes from a single page</li>
<li>Edit, copy, rename, or print with ease</li>
<li>Export your recipes to Excel</li>
</ul>
<a class="btn btn-outline-brand" href="/soap-recipe-lye-calculator">Start your recipe</a>
</div>
</div>
</section>
<!-- Block 3: Easy Ingredient Selection (Image LEFT) -->
<section class="alt-section">
<div class="row align-items-center g-4">
<div class="col-lg-6 order-lg-1">
<a class="alt-media tall" href="/soap-recipe-lye-calculator" aria-label="Screenshot of ingredient selection screen">
<picture class="alt-media tall">
<!-- AVIF -->
<source
type="image/avif"
srcset="/images/home/easy-ingredient-selection-600.avif 600w,
/images/home/easy-ingredient-selection-1200.avif 1200w"
sizes="(min-width: 992px) 612px, 100vw">
<!-- WebP -->
<source
type="image/webp"
srcset="/images/home/easy-ingredient-selection-600.webp 600w,
/images/home/easy-ingredient-selection-1200.webp 1200w"
sizes="(min-width: 992px) 612px, 100vw">
<!-- Fallback -->
<img
src="/images/home/easy-ingredient-selection-1200.jpg"
width="1200" height="675"
alt="Ingredient selection interface with categorized oils and additives"
loading="lazy" decoding="async">
</picture>
</a>
</div>
<div class="col-lg-6 order-lg-2">
<div class="alt-eyebrow">Smart ingredient picker</div>
<h2 class="alt-title">Easy ingredient selection</h2>
<p class="alt-lead">Browse an extensive, categorized ingredient library with tips, sorting options, and clear safety alerts.</p>
<ul class="alt-list">
<li>Extensive, categorized ingredient library</li>
<li>Flexible sorting of selected oils and additives</li>
<li>Helpful tips and warnings at every step</li>
<li>Clear alerts for ingredients needing special care (e.g., water discount or extra lye)</li>
</ul>
<a class="btn btn-outline-brand" href="/soap-recipe-lye-calculator">Choose your ingredients</a>
</div>
</div>
</section>
<!-- Block 4: Results That Work (Image RIGHT) -->
<section class="alt-section">
<div class="row align-items-center g-4">
<div class="col-lg-6 order-lg-2">
<a class="alt-media tall" href="/soap-recipe-lye-calculator" aria-label="Screenshot of soap recipe printout with graphs">
<picture class="alt-media tall">
<!-- AVIF -->
<source
type="image/avif"
srcset="/images/home/clean-printout-600.avif 600w,
/images/home/clean-printout-1200.avif 1200w"
sizes="(min-width: 992px) 612px, 100vw">
<!-- WebP -->
<source
type="image/webp"
srcset="/images/home/clean-printout-600.webp 600w,
/images/home/clean-printout-1200.webp 1200w"
sizes="(min-width: 992px) 612px, 100vw">
<!-- Fallback -->
<img
src="/images/home/clean-printout-1200.jpg"
width="1200" height="675"
alt="Printout view showing soap recipe details with bar graphs for properties and fatty acids"
loading="lazy" decoding="async">
</picture>
</a>
</div>
<div class="col-lg-6 order-lg-1">
<div class="alt-eyebrow">Clear results</div>
<h2 class="alt-title">Neat & easy-to-read results</h2>
<p class="alt-lead">Get clean, accurate printouts with all the details you need, plus property graphs at a glance and print settings remembered for next time.</p>
<ul class="alt-list">
<li>Clean, well-organized, easy-to-read printouts</li>
<li>Includes all critical details to minimize mistakes</li>
<li>Property and fatty acid bar graphs at a glance</li>
<li>Rich print settings to tailor your output</li>
<li>Print preferences remembered for next time</li>
</ul>
<a class="btn btn-outline-brand" href="/soap-recipe-lye-calculator">See recipe results instantly</a>
</div>
</div>
</section>
<!-- Block 5: -->
<section class="alt-section">
<div class="row align-items-center g-4">
<div class="col-lg-6 order-lg-1">
<a class="alt-media" href="/instructions/soap-calculator-tutorials" aria-label="Learning resources overview">
<picture class="alt-media tall">
<!-- AVIF -->
<source
type="image/avif"
srcset="/images/home/tutorials-600.avif 600w,
/images/home/tutorials-1200.avif 1200w"
sizes="(min-width: 992px) 612px, 100vw">
<!-- WebP -->
<source
type="image/webp"
srcset="/images/home/tutorials-600.webp 600w,
/images/home/tutorials-1200.webp 1200w"
sizes="(min-width: 992px) 612px, 100vw">
<!-- Fallback -->
<img
src="/images/home/tutorials-1200.jpg"
width="1200" height="675"
alt="Article and video resources with chapters"
loading="lazy" decoding="async">
</picture>
</a>
</div>
<div class="col-lg-6 order-lg-2">
<div class="alt-eyebrow">Learn fast</div>
<h2 class="alt-title">Step-by-step guide and full video walkthrough</h2>
<p class="alt-lead">Whether you’re new or returning, get up to speed quickly with a concise article and a chaptered video tutorial.</p>
<ul class="alt-list">
<li>Quick start short video</li>
<li>Actionable, beginner-friendly guide</li>
<li>Full video tutorial with chapters</li>
</ul>
<a class="btn btn-outline-brand" href="/instructions/soap-calculator-tutorials">Browse resources</a>
</div>
</div>
</section>
<!-- Standalone CTA -->
<section class="cta-standalone" aria-labelledby="ctaTitle">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-8 col-lg-9">
<div class="cta-card">
<h2 id="ctaTitle" class="h3 mb-2">Ready to make your next soap recipe?</h2>
<p class="lead mb-4">Effortless to use — accurate and reliable.</p>
<a href="/soap-recipe-lye-calculator" class="btn btn-outline-success"
title="Open the Soap Calculator">Try the Soap Calculator</a>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<footer class="border-top text-muted">
<div class="container">
<div class="row">
<div class="col-12 text-center mb-2">
<span class="mx-2">© 2012-2025 The Cosmetics Lab</span>
<div class="d-inline d-print-none">
<span>|</span>
<a href="/about" class="text-muted mx-1">About</a>
<span>|</span>
<a rel="nofollow" href="/contact" class="text-muted mx-1">Contact Us</a>
<span>|</span>
<a rel="nofollow" href="/terms-of-service" class="text-muted mx-1">Terms of Service</a>
<span>|</span>
<a rel="nofollow" href="/privacy-policy" class="text-muted mx-1">Privacy Policy</a>
<span>|</span>
<a href="https://www.facebook.com/TCLSoapCalculator"
target="_blank"
rel="noopener noreferrer"
class="facebook text-muted mx-1">
<i class="fa-brands fa-facebook"></i>
<span class="d-none d-sm-inline">Facebook</span>
</a>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>