Punnett Square Hair Color Calculator

Punnett Square Hair Color Calculator

Use this calculator to determine the potential hair color genotypes and phenotypes of offspring based on the genotypes of two parents. Note: This uses a simplified single-gene dominant/recessive model (Brown dominant over Blonde).

BB (Homozygous Dominant – Brown) Bb (Heterozygous – Brown) bb (Homozygous Recessive – Blonde)

BB (Homozygous Dominant – Brown) Bb (Heterozygous – Brown) bb (Homozygous Recessive – Blonde)

function calculatePunnett() { var p1 = document.getElementById("parent1Geno").value; var p2 = document.getElementById("parent2Geno").value; if (!p1 || !p2) { alert("Please select genotypes for both parents."); return; } var p1Alleles = p1.split(""); var p2Alleles = p2.split(""); var offspring = []; // Create the 4 combinations offspring.push(normalizeGenotype(p1Alleles[0] + p2Alleles[0])); offspring.push(normalizeGenotype(p1Alleles[0] + p2Alleles[1])); offspring.push(normalizeGenotype(p1Alleles[1] + p2Alleles[0])); offspring.push(normalizeGenotype(p1Alleles[1] + p2Alleles[1])); var countBB = 0; var countBb = 0; var countbb = 0; for (var i = 0; i < offspring.length; i++) { if (offspring[i] === "BB") countBB++; else if (offspring[i] === "Bb") countBb++; else if (offspring[i] === "bb") countbb++; } // Calculate percentages var total = 4; var percBB = (countBB / total) * 100; var percBb = (countBb / total) * 100; var percbb = (countbb / total) * 100; var percBrown = percBB + percBb; var percBlonde = percbb; // Update UI document.getElementById("bbResult").innerText = percBB.toFixed(0); document.getElementById("bblcResult").innerText = percBb.toFixed(0); document.getElementById("lcResult").innerText = percbb.toFixed(0); document.getElementById("brownPhenoResult").innerText = percBrown.toFixed(0); document.getElementById("blondePhenoResult").innerText = percBlonde.toFixed(0); // Render Visual Square var visualHTML = ''; visualHTML += ''; visualHTML += ''; visualHTML += ''; visualHTML += '

	' + p2Alleles[0] + '	' + p2Alleles[1] + '
' + p1Alleles[0] + '	' + offspring[0] + '	' + offspring[1] + '
' + p1Alleles[1] + '	' + offspring[2] + '	' + offspring[3] + '

'; document.getElementById("punnettVisual").innerHTML = visualHTML; document.getElementById("psResult").style.display = "block"; } // Helper to ensure Bb is always written with dominant first function normalizeGenotype(geno) { if (geno === "bB") return "Bb"; return geno; } .ps-calculator-container { font-family: sans-serif; max-width: 600px; margin: 20px auto; padding: 20px; border: 1px solid #eee; border-radius: 8px; background: #f9f9f9; } .ps-calc-box { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .ps-input-group { margin-bottom: 15px; } .ps-input-group label { display: block; margin-bottom: 5px; font-weight: bold; } .ps-select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; } .ps-btn { width: 100%; padding: 12px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } .ps-btn:hover { background-color: #45a049; } .ps-result-box { margin-top: 20px; border-top: 2px solid #eee; padding-top: 20px; } .ps-result-section { margin-bottom: 20px; padding: 10px; background: #f4f4f4; border-radius: 4px; } .ps-result-section h4 { margin-top: 0; } .ps-dominant { color: #5a3a22; font-weight: bold; } .ps-recessive { color: #d4af37; font-weight: bold; } .punnett-table { width: 100%; max-width: 200px; margin: 20px auto; border-collapse: collapse; text-align: center; } .punnett-table th, .punnett-table td { border: 2px solid #333; padding: 15px; font-size: 20px; font-weight: bold; } .punnett-table th { background-color: #e0e0e0; }

Understanding Simplified Hair Color Genetics

While actual human hair color is determined by multiple genes (polygenic inheritance), this calculator uses a simplified Mendelian model to illustrate the basic principles of dominant and recessive inheritance using a Punnett Square.

In this simplified model:

• 'B' represents the dominant allele, which codes for Brown hair.
• 'b' represents the recessive allele, which codes for Blonde hair.

Every individual inherits one allele from each parent, resulting in three possible genotype combinations:

• BB (Homozygous Dominant): The individual has two dominant alleles. Their hair color will be Brown.
• Bb (Heterozygous): The individual has one dominant and one recessive allele. Since 'B' is dominant, their hair color will be Brown, but they are a "carrier" for the blonde allele.
• bb (Homozygous Recessive): The individual has two recessive alleles. This is the only combination that results in Blonde hair in this model.

Example Calculation: Two Heterozygous Parents

Let's assume both parents have Brown hair but carry the recessive blonde allele. Their genotypes are both Bb.

When we cross Bb x Bb using the Punnett Square, the four possibilities for their offspring are BB, Bb, Bb, and bb.

• There is a 25% chance of the child being BB (Brown hair).
• There is a 50% chance of the child being Bb (Brown hair, carrier).
• There is a 25% chance of the child being bb (Blonde hair).

Phenotypically, this means there is a 75% total chance the child will have Brown hair and a 25% chance they will have Blonde hair.