Predict your child's eye color based on family genetics
Parent 1 Side
Brown
Green
Blue
Brown
Green
Blue
Brown
Green
Blue
Parent 2 Side
Brown
Green
Blue
Brown
Green
Blue
Brown
Green
Blue
Predicted Child's Eye Color
Brown:
0%
Green:
0%
Blue:
0%
Note: Genetics are complex; these are probabilities based on simplified Mendelian models.
How the Eye Color Calculator with Grandparents Works
Predicting a baby's eye color involves more than just looking at the parents. While eye color was once thought to be a simple dominant-recessive trait, we now know it is polygenic (influenced by multiple genes). However, the EYE-3 model, which uses the Brown, Green, and Blue hierarchy, provides a highly accurate prediction by incorporating the phenotypes of grandparents.
The Role of Grandparents in Genetics
Why do we ask for grandparent eye colors? Because parents can "carry" genes that are not visible in their own eye color. For example, two brown-eyed parents can have a blue-eyed child if both parents carry the recessive blue gene inherited from their own parents (the grandparents).
Brown (B): Dominant over Green and Blue.
Green (G): Dominant over Blue, but recessive to Brown.
Blue (b): Recessive to both Brown and Green.
Example Scenario
Suppose Parent 1 has Brown eyes, but their father has Blue eyes. We then know Parent 1 must be a carrier of the Blue gene (Genotype: Bb). If Parent 2 has Blue eyes (Genotype: bb), the calculator factors in these hidden alleles to show a 50% chance of the baby having Blue eyes and a 50% chance of Brown eyes.
Frequently Asked Questions
Can two blue-eyed parents have a brown-eyed child? In the simplified Mendelian model, the answer is no. However, because eye color is polygenic (involving genes like OCA2 and HERC2), it is biologically possible, though extremely rare.
When is a baby's permanent eye color determined? Most babies are born with blue or grey eyes. The permanent color usually stabilizes between 6 months and 3 years of age as melanin develops in the iris.
function calculateEyeColor() {
var p1 = document.getElementById('p1_color').value;
var g1a = document.getElementById('g1a_color').value;
var g1b = document.getElementById('g1b_color').value;
var p2 = document.getElementById('p2_color').value;
var g2a = document.getElementById('g2a_color').value;
var g2b = document.getElementById('g2b_color').value;
// Helper to estimate parent's probable alleles
// Returns array of possible alleles they can pass on [Allele1, Allele2]
function getAlleles(pheno, gp1, gp2) {
// Brown: B, Green: G, Blue: b
// Hierarchy: B > G > b
if (pheno === 'blue') {
return ['b', 'b']; // Blue eyes must be bb
}
if (pheno === 'green') {
// Green eyes can be GG or Gb
if (gp1 === 'blue' || gp2 === 'blue') return ['G', 'b'];
return ['G', 'G']; // Default to GG if no blue in ancestry (simplified)
}
if (pheno === 'brown') {
// Brown can be BB, BG, Bb
if (gp1 === 'blue' || gp2 === 'blue') return ['B', 'b'];
if (gp1 === 'green' || gp2 === 'green') return ['B', 'G'];
return ['B', 'B']; // Default to BB
}
return ['b', 'b'];
}
var alleles1 = getAlleles(p1, g1a, g1b);
var alleles2 = getAlleles(p2, g2a, g2b);
var combinations = [];
for (var i = 0; i < 2; i++) {
for (var j = 0; j < 2; j++) {
combinations.push(alleles1[i] + alleles2[j]);
}
}
var brownCount = 0;
var greenCount = 0;
var blueCount = 0;
for (var k = 0; k < combinations.length; k++) {
var combo = combinations[k];
if (combo.indexOf('B') !== -1) {
brownCount++;
} else if (combo.indexOf('G') !== -1) {
greenCount++;
} else {
blueCount++;
}
}
var total = combinations.length;
var brownPerc = Math.round((brownCount / total) * 100);
var greenPerc = Math.round((greenCount / total) * 100);
var bluePerc = Math.round((blueCount / total) * 100);
// Display
document.getElementById('results-area').style.display = 'block';
document.getElementById('bar-brown').style.width = brownPerc + '%';
document.getElementById('val-brown').innerText = brownPerc + '%';
document.getElementById('bar-green').style.width = greenPerc + '%';
document.getElementById('val-green').innerText = greenPerc + '%';
document.getElementById('bar-blue').style.width = bluePerc + '%';
document.getElementById('val-blue').innerText = bluePerc + '%';
// Smooth scroll to result
document.getElementById('results-area').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}