When a learner can reproduce a familiar example but a small variation causes confusion, the problem is usually an incomplete model rather than a lack of effort. The fastest useful response is to expose the hidden state and test one boundary at a time.
CSS color-mix() computes a colour by interpolating two colours in a stated colour space. The result depends not only on the two endpoints, but also on percentage normalization, alpha handling and—in cylindrical spaces—the chosen hue route. Mastery means predicting those inputs, using perceptual colour spaces with judgment, providing a usable base declaration, and checking contrast and forced-state meaning rather than assuming every computed tint is readable. This guide begins with that mechanism, then develops it through worked traces, deliberate mistakes, explained practice and transfer decisions.
The aim is independent reasoning. A learner should be able to predict behaviour, locate the earliest wrong assumption, use a safe diagnostic procedure and defend a design choice in a new project.
Punggol families can use the guide in short sessions around homework, CCAs and rest. The activities are proposed learning exercises, not claims about a physical branch, timetable, class size, fee, school relationship or guaranteed result.
Use disposable data and repositories, preserve backups, and check version-sensitive details against the official source. Current documentation settles a technical contract; observation and explanation turn that contract into usable knowledge.
Find your next learning step
Choose the route that matches the present difficulty. Use the complete index for a systematic course.
Build the model
Chapters 1-4 . Begin here, then continue after the learner can predict, verify and explain.
Use the core tools
Chapters 5-8 . Begin here, then continue after the learner can predict, verify and explain.
Handle boundaries
Chapters 9-12 . Begin here, then continue after the learner can predict, verify and explain.
Debug and verify
Chapters 13-16 . Begin here, then continue after the learner can predict, verify and explain.
Transfer with judgment
Chapters 17-20 . Begin here, then continue after the learner can predict, verify and explain.
Open the full chapter index . Jump to capstone practice . Use the How Studying Works hub . Read the official documentation
Complete chapter index
Chapters 1-4 . Build the model
Chapters 5-8 . Use the core tools
Chapters 9-12 . Handle boundaries
Chapters 13-16 . Debug and verify
color-mix takes an interpolation method and exactly two colour values, optionally with percentages. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is reading it as a simple arithmetic average in every colour space. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Name the space, endpoints and weights before predicting the result.
For the color-mix interpolates two colours chapter on CSS color-mix(), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on reading it as a simple arithmetic average in every colour space. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
color:color-mix(in srgb,royalblue 60%,white)Explained result. The computed colour is weighted toward royalblue in sRGB interpolation. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: homework cards. Predict the rule using a calm subject accent mixed with the page surface. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “color-mix takes an interpolation method and exactly two colour values, optionally with percentages.” Apply this procedure: Name the space, endpoints and weights before predicting the result. The expected mechanism is: The computed colour is weighted toward royalblue in sRGB interpolation. For the homework cards, add one near-miss that exposes reading it as a simple arithmetic average in every colour space. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: library interface. Contrast the rule using hover and selected colours derived from one token. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “color-mix takes an interpolation method and exactly two colour values, optionally with percentages.” Apply this procedure: Name the space, endpoints and weights before predicting the result. The expected mechanism is: The computed colour is weighted toward royalblue in sRGB interpolation. For the library interface, add one near-miss that exposes reading it as a simple arithmetic average in every colour space. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: CCA page. Stress-test the rule using team accents that retain readable text. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “color-mix takes an interpolation method and exactly two colour values, optionally with percentages.” Apply this procedure: Name the space, endpoints and weights before predicting the result. The expected mechanism is: The computed colour is weighted toward royalblue in sRGB interpolation. For the CCA page, add one near-miss that exposes reading it as a simple arithmetic average in every colour space. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: science dashboard. Explain the rule using status scales checked for contrast and non-colour cues. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “color-mix takes an interpolation method and exactly two colour values, optionally with percentages.” Apply this procedure: Name the space, endpoints and weights before predicting the result. The expected mechanism is: The computed colour is weighted toward royalblue in sRGB interpolation. For the science dashboard, add one near-miss that exposes reading it as a simple arithmetic average in every colour space. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers reading it as a simple arithmetic average in every colour space.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Name the space, endpoints and weights before predicting the result.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS color-mix() syntax. For this chapter, useful prompts are: “What did you expect from color-mix interpolates two colours?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing reading it as a simple arithmetic average in every colour space be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny family calendar with light and dark theme tokens. Include one ordinary case, one boundary and one deliberate failure caused by reading it as a simple arithmetic average in every colour space. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: color-mix takes an interpolation method and exactly two colour values, optionally with percentages. It shows a trace, not only a final value. The ordinary case should demonstrate “The computed colour is weighted toward royalblue in sRGB interpolation.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Name the space, endpoints and weights before predicting the result. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For color-mix interpolates two colours, separate the documented CSS color-mix() mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
the in clause selects the colour space used for interpolation, and different spaces can produce visibly different midpoints. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is omitting a design reason for srgb, srgb-linear, lab, oklab or oklch. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Compare the same endpoints in two spaces and inspect the computed result.
For the The interpolation space is part of the meaning chapter on CSS color-mix(), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on omitting a design reason for srgb, srgb-linear, lab, oklab or oklch. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
background:color-mix(in oklab,#f00,#00f)Explained result. The midpoint follows Oklab component interpolation rather than sRGB component interpolation. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: CCA page. Contrast the rule using team accents that retain readable text. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “the in clause selects the colour space used for interpolation, and different spaces can produce visibly different midpoints.” Apply this procedure: Compare the same endpoints in two spaces and inspect the computed result. The expected mechanism is: The midpoint follows Oklab component interpolation rather than sRGB component interpolation. For the CCA page, add one near-miss that exposes omitting a design reason for srgb, srgb-linear, lab, oklab or oklch. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: science dashboard. Stress-test the rule using status scales checked for contrast and non-colour cues. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “the in clause selects the colour space used for interpolation, and different spaces can produce visibly different midpoints.” Apply this procedure: Compare the same endpoints in two spaces and inspect the computed result. The expected mechanism is: The midpoint follows Oklab component interpolation rather than sRGB component interpolation. For the science dashboard, add one near-miss that exposes omitting a design reason for srgb, srgb-linear, lab, oklab or oklch. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: revision planner. Explain the rule using currentColor-based borders and fills. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “the in clause selects the colour space used for interpolation, and different spaces can produce visibly different midpoints.” Apply this procedure: Compare the same endpoints in two spaces and inspect the computed result. The expected mechanism is: The midpoint follows Oklab component interpolation rather than sRGB component interpolation. For the revision planner, add one near-miss that exposes omitting a design reason for srgb, srgb-linear, lab, oklab or oklch. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: family calendar. Transfer the rule using light and dark theme tokens. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “the in clause selects the colour space used for interpolation, and different spaces can produce visibly different midpoints.” Apply this procedure: Compare the same endpoints in two spaces and inspect the computed result. The expected mechanism is: The midpoint follows Oklab component interpolation rather than sRGB component interpolation. For the family calendar, add one near-miss that exposes omitting a design reason for srgb, srgb-linear, lab, oklab or oklch. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers omitting a design reason for srgb, srgb-linear, lab, oklab or oklch.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Compare the same endpoints in two spaces and inspect the computed result.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS color-mix() syntax. For this chapter, useful prompts are: “What did you expect from The interpolation space is part of the meaning?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing omitting a design reason for srgb, srgb-linear, lab, oklab or oklch be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny accessibility audit with contrast, forced colours and colour-vision checks. Include one ordinary case, one boundary and one deliberate failure caused by omitting a design reason for srgb, srgb-linear, lab, oklab or oklch. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: the in clause selects the colour space used for interpolation, and different spaces can produce visibly different midpoints. It shows a trace, not only a final value. The ordinary case should demonstrate “The midpoint follows Oklab component interpolation rather than sRGB component interpolation.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Compare the same endpoints in two spaces and inspect the computed result. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For The interpolation space is part of the meaning, separate the documented CSS color-mix() mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
when neither colour supplies a percentage, each contributes fifty percent. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is assuming the first colour is automatically dominant. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write the implicit 50/50 weights in the prediction.
For the Omitted percentages split the mix equally chapter on CSS color-mix(), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on assuming the first colour is automatically dominant. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
color-mix(in srgb,black,white)Explained result. The two colours contribute equally before alpha and gamut processing. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: revision planner. Stress-test the rule using currentColor-based borders and fills. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “when neither colour supplies a percentage, each contributes fifty percent.” Apply this procedure: Write the implicit 50/50 weights in the prediction. The expected mechanism is: The two colours contribute equally before alpha and gamut processing. For the revision planner, add one near-miss that exposes assuming the first colour is automatically dominant. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: family calendar. Explain the rule using light and dark theme tokens. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “when neither colour supplies a percentage, each contributes fifty percent.” Apply this procedure: Write the implicit 50/50 weights in the prediction. The expected mechanism is: The two colours contribute equally before alpha and gamut processing. For the family calendar, add one near-miss that exposes assuming the first colour is automatically dominant. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: accessibility audit. Transfer the rule using contrast, forced colours and colour-vision checks. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “when neither colour supplies a percentage, each contributes fifty percent.” Apply this procedure: Write the implicit 50/50 weights in the prediction. The expected mechanism is: The two colours contribute equally before alpha and gamut processing. For the accessibility audit, add one near-miss that exposes assuming the first colour is automatically dominant. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: browser fixture. Predict the rule using computed styles across spaces, weights and alpha. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “when neither colour supplies a percentage, each contributes fifty percent.” Apply this procedure: Write the implicit 50/50 weights in the prediction. The expected mechanism is: The two colours contribute equally before alpha and gamut processing. For the browser fixture, add one near-miss that exposes assuming the first colour is automatically dominant. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers assuming the first colour is automatically dominant.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write the implicit 50/50 weights in the prediction.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS color-mix() syntax. For this chapter, useful prompts are: “What did you expect from Omitted percentages split the mix equally?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming the first colour is automatically dominant be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny browser fixture with computed styles across spaces, weights and alpha. Include one ordinary case, one boundary and one deliberate failure caused by assuming the first colour is automatically dominant. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: when neither colour supplies a percentage, each contributes fifty percent. It shows a trace, not only a final value. The ordinary case should demonstrate “The two colours contribute equally before alpha and gamut processing.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write the implicit 50/50 weights in the prediction. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Omitted percentages split the mix equally, separate the documented CSS color-mix() mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
when one colour has a percentage and the other does not, the missing percentage becomes one hundred percent minus the stated value. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is adding another full one hundred percent to the omitted side. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Complete the two-part weight equation first.
For the One omitted percentage uses the remainder chapter on CSS color-mix(), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on adding another full one hundred percent to the omitted side. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
color-mix(in srgb,navy 25%,white)Explained result. White receives the remaining 75 percent. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: accessibility audit. Explain the rule using contrast, forced colours and colour-vision checks. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “when one colour has a percentage and the other does not, the missing percentage becomes one hundred percent minus the stated value.” Apply this procedure: Complete the two-part weight equation first. The expected mechanism is: White receives the remaining 75 percent. For the accessibility audit, add one near-miss that exposes adding another full one hundred percent to the omitted side. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: browser fixture. Transfer the rule using computed styles across spaces, weights and alpha. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “when one colour has a percentage and the other does not, the missing percentage becomes one hundred percent minus the stated value.” Apply this procedure: Complete the two-part weight equation first. The expected mechanism is: White receives the remaining 75 percent. For the browser fixture, add one near-miss that exposes adding another full one hundred percent to the omitted side. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: homework cards. Predict the rule using a calm subject accent mixed with the page surface. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “when one colour has a percentage and the other does not, the missing percentage becomes one hundred percent minus the stated value.” Apply this procedure: Complete the two-part weight equation first. The expected mechanism is: White receives the remaining 75 percent. For the homework cards, add one near-miss that exposes adding another full one hundred percent to the omitted side. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: library interface. Contrast the rule using hover and selected colours derived from one token. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “when one colour has a percentage and the other does not, the missing percentage becomes one hundred percent minus the stated value.” Apply this procedure: Complete the two-part weight equation first. The expected mechanism is: White receives the remaining 75 percent. For the library interface, add one near-miss that exposes adding another full one hundred percent to the omitted side. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers adding another full one hundred percent to the omitted side.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Complete the two-part weight equation first.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS color-mix() syntax. For this chapter, useful prompts are: “What did you expect from One omitted percentage uses the remainder?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing adding another full one hundred percent to the omitted side be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny homework cards with a calm subject accent mixed with the page surface. Include one ordinary case, one boundary and one deliberate failure caused by adding another full one hundred percent to the omitted side. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: when one colour has a percentage and the other does not, the missing percentage becomes one hundred percent minus the stated value. It shows a trace, not only a final value. The ordinary case should demonstrate “White receives the remaining 75 percent.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Complete the two-part weight equation first. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For One omitted percentage uses the remainder, separate the documented CSS color-mix() mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
when the supplied percentages total more than one hundred percent, they are proportionally normalized to one hundred percent. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is clamping each percentage independently. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Divide each weight by the total and compare the ratio.
For the Weights above one hundred are normalized chapter on CSS color-mix(), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on clamping each percentage independently. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
color-mix(in srgb,red 80%,blue 40%)Explained result. The effective ratio is two-thirds red to one-third blue after normalization. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: homework cards. Transfer the rule using a calm subject accent mixed with the page surface. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “when the supplied percentages total more than one hundred percent, they are proportionally normalized to one hundred percent.” Apply this procedure: Divide each weight by the total and compare the ratio. The expected mechanism is: The effective ratio is two-thirds red to one-third blue after normalization. For the homework cards, add one near-miss that exposes clamping each percentage independently. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: library interface. Predict the rule using hover and selected colours derived from one token. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “when the supplied percentages total more than one hundred percent, they are proportionally normalized to one hundred percent.” Apply this procedure: Divide each weight by the total and compare the ratio. The expected mechanism is: The effective ratio is two-thirds red to one-third blue after normalization. For the library interface, add one near-miss that exposes clamping each percentage independently. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: CCA page. Contrast the rule using team accents that retain readable text. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “when the supplied percentages total more than one hundred percent, they are proportionally normalized to one hundred percent.” Apply this procedure: Divide each weight by the total and compare the ratio. The expected mechanism is: The effective ratio is two-thirds red to one-third blue after normalization. For the CCA page, add one near-miss that exposes clamping each percentage independently. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: science dashboard. Stress-test the rule using status scales checked for contrast and non-colour cues. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “when the supplied percentages total more than one hundred percent, they are proportionally normalized to one hundred percent.” Apply this procedure: Divide each weight by the total and compare the ratio. The expected mechanism is: The effective ratio is two-thirds red to one-third blue after normalization. For the science dashboard, add one near-miss that exposes clamping each percentage independently. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers clamping each percentage independently.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Divide each weight by the total and compare the ratio.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS color-mix() syntax. For this chapter, useful prompts are: “What did you expect from Weights above one hundred are normalized?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing clamping each percentage independently be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny library interface with hover and selected colours derived from one token. Include one ordinary case, one boundary and one deliberate failure caused by clamping each percentage independently. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: when the supplied percentages total more than one hundred percent, they are proportionally normalized to one hundred percent. It shows a trace, not only a final value. The ordinary case should demonstrate “The effective ratio is two-thirds red to one-third blue after normalization.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Divide each weight by the total and compare the ratio. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Weights above one hundred are normalized, separate the documented CSS color-mix() mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 6 OF 20 . Use the core tools
6. A total below one hundred introduces transparency
when nonzero weights total less than one hundred percent, they normalize for colour interpolation and apply an alpha multiplier equal to the original total. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is treating the missing percentage as an automatic third white colour. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Predict colour ratio and output alpha separately.
For the A total below one hundred introduces transparency chapter on CSS color-mix(), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on treating the missing percentage as an automatic third white colour. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
color-mix(in srgb,red 30%,blue 30%)Explained result. The red-blue ratio is equal, while the result carries 60 percent alpha before later compositing. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: CCA page. Predict the rule using team accents that retain readable text. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “when nonzero weights total less than one hundred percent, they normalize for colour interpolation and apply an alpha multiplier equal to the original total.” Apply this procedure: Predict colour ratio and output alpha separately. The expected mechanism is: The red-blue ratio is equal, while the result carries 60 percent alpha before later compositing. For the CCA page, add one near-miss that exposes treating the missing percentage as an automatic third white colour. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: science dashboard. Contrast the rule using status scales checked for contrast and non-colour cues. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “when nonzero weights total less than one hundred percent, they normalize for colour interpolation and apply an alpha multiplier equal to the original total.” Apply this procedure: Predict colour ratio and output alpha separately. The expected mechanism is: The red-blue ratio is equal, while the result carries 60 percent alpha before later compositing. For the science dashboard, add one near-miss that exposes treating the missing percentage as an automatic third white colour. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: revision planner. Stress-test the rule using currentColor-based borders and fills. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “when nonzero weights total less than one hundred percent, they normalize for colour interpolation and apply an alpha multiplier equal to the original total.” Apply this procedure: Predict colour ratio and output alpha separately. The expected mechanism is: The red-blue ratio is equal, while the result carries 60 percent alpha before later compositing. For the revision planner, add one near-miss that exposes treating the missing percentage as an automatic third white colour. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: family calendar. Explain the rule using light and dark theme tokens. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “when nonzero weights total less than one hundred percent, they normalize for colour interpolation and apply an alpha multiplier equal to the original total.” Apply this procedure: Predict colour ratio and output alpha separately. The expected mechanism is: The red-blue ratio is equal, while the result carries 60 percent alpha before later compositing. For the family calendar, add one near-miss that exposes treating the missing percentage as an automatic third white colour. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers treating the missing percentage as an automatic third white colour.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Predict colour ratio and output alpha separately.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS color-mix() syntax. For this chapter, useful prompts are: “What did you expect from A total below one hundred introduces transparency?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing treating the missing percentage as an automatic third white colour be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny CCA page with team accents that retain readable text. Include one ordinary case, one boundary and one deliberate failure caused by treating the missing percentage as an automatic third white colour. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: when nonzero weights total less than one hundred percent, they normalize for colour interpolation and apply an alpha multiplier equal to the original total. It shows a trace, not only a final value. The ordinary case should demonstrate “The red-blue ratio is equal, while the result carries 60 percent alpha before later compositing.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Predict colour ratio and output alpha separately. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For A total below one hundred introduces transparency, separate the documented CSS color-mix() mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
the mix cannot produce a colour when both contributions sum to zero. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is expecting transparent black from two zero-percent colours. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Reject the declaration or provide a meaningful nonzero weight.
For the A zero total is invalid chapter on CSS color-mix(), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on expecting transparent black from two zero-percent colours. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
color-mix(in srgb,red 0%,blue 0%)Explained result. The function is invalid rather than a useful transparent mix. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: revision planner. Contrast the rule using currentColor-based borders and fills. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “the mix cannot produce a colour when both contributions sum to zero.” Apply this procedure: Reject the declaration or provide a meaningful nonzero weight. The expected mechanism is: The function is invalid rather than a useful transparent mix. For the revision planner, add one near-miss that exposes expecting transparent black from two zero-percent colours. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: family calendar. Stress-test the rule using light and dark theme tokens. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “the mix cannot produce a colour when both contributions sum to zero.” Apply this procedure: Reject the declaration or provide a meaningful nonzero weight. The expected mechanism is: The function is invalid rather than a useful transparent mix. For the family calendar, add one near-miss that exposes expecting transparent black from two zero-percent colours. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: accessibility audit. Explain the rule using contrast, forced colours and colour-vision checks. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “the mix cannot produce a colour when both contributions sum to zero.” Apply this procedure: Reject the declaration or provide a meaningful nonzero weight. The expected mechanism is: The function is invalid rather than a useful transparent mix. For the accessibility audit, add one near-miss that exposes expecting transparent black from two zero-percent colours. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: browser fixture. Transfer the rule using computed styles across spaces, weights and alpha. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “the mix cannot produce a colour when both contributions sum to zero.” Apply this procedure: Reject the declaration or provide a meaningful nonzero weight. The expected mechanism is: The function is invalid rather than a useful transparent mix. For the browser fixture, add one near-miss that exposes expecting transparent black from two zero-percent colours. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers expecting transparent black from two zero-percent colours.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Reject the declaration or provide a meaningful nonzero weight.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS color-mix() syntax. For this chapter, useful prompts are: “What did you expect from A zero total is invalid?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing expecting transparent black from two zero-percent colours be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny science dashboard with status scales checked for contrast and non-colour cues. Include one ordinary case, one boundary and one deliberate failure caused by expecting transparent black from two zero-percent colours. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: the mix cannot produce a colour when both contributions sum to zero. It shows a trace, not only a final value. The ordinary case should demonstrate “The function is invalid rather than a useful transparent mix.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Reject the declaration or provide a meaningful nonzero weight. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For A zero total is invalid, separate the documented CSS color-mix() mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
colour interpolation accounts for alpha with premultiplied components so transparent endpoints do not inject arbitrary hidden RGB as ordinary channels. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is averaging RGB first and opacity later with a homemade formula. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Test opaque-to-transparent cases against computed style.
For the Alpha is premultiplied during interpolation chapter on CSS color-mix(), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on averaging RGB first and opacity later with a homemade formula. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
color-mix(in srgb,red,transparent)Explained result. The result behaves like a partially transparent red rather than a muddy mix with transparent black. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: accessibility audit. Stress-test the rule using contrast, forced colours and colour-vision checks. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “colour interpolation accounts for alpha with premultiplied components so transparent endpoints do not inject arbitrary hidden RGB as ordinary channels.” Apply this procedure: Test opaque-to-transparent cases against computed style. The expected mechanism is: The result behaves like a partially transparent red rather than a muddy mix with transparent black. For the accessibility audit, add one near-miss that exposes averaging RGB first and opacity later with a homemade formula. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: browser fixture. Explain the rule using computed styles across spaces, weights and alpha. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “colour interpolation accounts for alpha with premultiplied components so transparent endpoints do not inject arbitrary hidden RGB as ordinary channels.” Apply this procedure: Test opaque-to-transparent cases against computed style. The expected mechanism is: The result behaves like a partially transparent red rather than a muddy mix with transparent black. For the browser fixture, add one near-miss that exposes averaging RGB first and opacity later with a homemade formula. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: homework cards. Transfer the rule using a calm subject accent mixed with the page surface. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “colour interpolation accounts for alpha with premultiplied components so transparent endpoints do not inject arbitrary hidden RGB as ordinary channels.” Apply this procedure: Test opaque-to-transparent cases against computed style. The expected mechanism is: The result behaves like a partially transparent red rather than a muddy mix with transparent black. For the homework cards, add one near-miss that exposes averaging RGB first and opacity later with a homemade formula. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: library interface. Predict the rule using hover and selected colours derived from one token. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “colour interpolation accounts for alpha with premultiplied components so transparent endpoints do not inject arbitrary hidden RGB as ordinary channels.” Apply this procedure: Test opaque-to-transparent cases against computed style. The expected mechanism is: The result behaves like a partially transparent red rather than a muddy mix with transparent black. For the library interface, add one near-miss that exposes averaging RGB first and opacity later with a homemade formula. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers averaging RGB first and opacity later with a homemade formula.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Test opaque-to-transparent cases against computed style.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS color-mix() syntax. For this chapter, useful prompts are: “What did you expect from Alpha is premultiplied during interpolation?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing averaging RGB first and opacity later with a homemade formula be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny revision planner with currentColor-based borders and fills. Include one ordinary case, one boundary and one deliberate failure caused by averaging RGB first and opacity later with a homemade formula. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: colour interpolation accounts for alpha with premultiplied components so transparent endpoints do not inject arbitrary hidden RGB as ordinary channels. It shows a trace, not only a final value. The ordinary case should demonstrate “The result behaves like a partially transparent red rather than a muddy mix with transparent black.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Test opaque-to-transparent cases against computed style. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Alpha is premultiplied during interpolation, separate the documented CSS color-mix() mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 9 OF 20 . Handle boundaries
9. Rectangular spaces interpolate components directly
spaces such as srgb, srgb-linear, lab and oklab use rectangular component interpolation under the colour rules. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is applying hue-route keywords to a rectangular space. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Use hue methods only with a polar colour space.
For the Rectangular spaces interpolate components directly chapter on CSS color-mix(), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on applying hue-route keywords to a rectangular space. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
color-mix(in oklab,var(--a),var(--b))Explained result. Lightness and opponent components are interpolated without a hue-angle route. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: homework cards. Explain the rule using a calm subject accent mixed with the page surface. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “spaces such as srgb, srgb-linear, lab and oklab use rectangular component interpolation under the colour rules.” Apply this procedure: Use hue methods only with a polar colour space. The expected mechanism is: Lightness and opponent components are interpolated without a hue-angle route. For the homework cards, add one near-miss that exposes applying hue-route keywords to a rectangular space. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: library interface. Transfer the rule using hover and selected colours derived from one token. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “spaces such as srgb, srgb-linear, lab and oklab use rectangular component interpolation under the colour rules.” Apply this procedure: Use hue methods only with a polar colour space. The expected mechanism is: Lightness and opponent components are interpolated without a hue-angle route. For the library interface, add one near-miss that exposes applying hue-route keywords to a rectangular space. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: CCA page. Predict the rule using team accents that retain readable text. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “spaces such as srgb, srgb-linear, lab and oklab use rectangular component interpolation under the colour rules.” Apply this procedure: Use hue methods only with a polar colour space. The expected mechanism is: Lightness and opponent components are interpolated without a hue-angle route. For the CCA page, add one near-miss that exposes applying hue-route keywords to a rectangular space. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: science dashboard. Contrast the rule using status scales checked for contrast and non-colour cues. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “spaces such as srgb, srgb-linear, lab and oklab use rectangular component interpolation under the colour rules.” Apply this procedure: Use hue methods only with a polar colour space. The expected mechanism is: Lightness and opponent components are interpolated without a hue-angle route. For the science dashboard, add one near-miss that exposes applying hue-route keywords to a rectangular space. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers applying hue-route keywords to a rectangular space.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Use hue methods only with a polar colour space.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS color-mix() syntax. For this chapter, useful prompts are: “What did you expect from Rectangular spaces interpolate components directly?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing applying hue-route keywords to a rectangular space be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny family calendar with light and dark theme tokens. Include one ordinary case, one boundary and one deliberate failure caused by applying hue-route keywords to a rectangular space. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: spaces such as srgb, srgb-linear, lab and oklab use rectangular component interpolation under the colour rules. It shows a trace, not only a final value. The ordinary case should demonstrate “Lightness and opponent components are interpolated without a hue-angle route.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Use hue methods only with a polar colour space. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Rectangular spaces interpolate components directly, separate the documented CSS color-mix() mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
spaces such as hsl, hwb, lch and oklch interpolate hue angles and accept a hue interpolation method. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is assuming the numerical midpoint is always the intended journey around the circle. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Draw both arcs between the hues and select a route.
For the Polar spaces need a hue route chapter on CSS color-mix(), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on assuming the numerical midpoint is always the intended journey around the circle. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
color-mix(in oklch shorter hue,red,blue)Explained result. The hue follows the shorter angular path between the endpoints. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: CCA page. Transfer the rule using team accents that retain readable text. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “spaces such as hsl, hwb, lch and oklch interpolate hue angles and accept a hue interpolation method.” Apply this procedure: Draw both arcs between the hues and select a route. The expected mechanism is: The hue follows the shorter angular path between the endpoints. For the CCA page, add one near-miss that exposes assuming the numerical midpoint is always the intended journey around the circle. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: science dashboard. Predict the rule using status scales checked for contrast and non-colour cues. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “spaces such as hsl, hwb, lch and oklch interpolate hue angles and accept a hue interpolation method.” Apply this procedure: Draw both arcs between the hues and select a route. The expected mechanism is: The hue follows the shorter angular path between the endpoints. For the science dashboard, add one near-miss that exposes assuming the numerical midpoint is always the intended journey around the circle. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: revision planner. Contrast the rule using currentColor-based borders and fills. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “spaces such as hsl, hwb, lch and oklch interpolate hue angles and accept a hue interpolation method.” Apply this procedure: Draw both arcs between the hues and select a route. The expected mechanism is: The hue follows the shorter angular path between the endpoints. For the revision planner, add one near-miss that exposes assuming the numerical midpoint is always the intended journey around the circle. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: family calendar. Stress-test the rule using light and dark theme tokens. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “spaces such as hsl, hwb, lch and oklch interpolate hue angles and accept a hue interpolation method.” Apply this procedure: Draw both arcs between the hues and select a route. The expected mechanism is: The hue follows the shorter angular path between the endpoints. For the family calendar, add one near-miss that exposes assuming the numerical midpoint is always the intended journey around the circle. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers assuming the numerical midpoint is always the intended journey around the circle.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Draw both arcs between the hues and select a route.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS color-mix() syntax. For this chapter, useful prompts are: “What did you expect from Polar spaces need a hue route?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming the numerical midpoint is always the intended journey around the circle be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny accessibility audit with contrast, forced colours and colour-vision checks. Include one ordinary case, one boundary and one deliberate failure caused by assuming the numerical midpoint is always the intended journey around the circle. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: spaces such as hsl, hwb, lch and oklch interpolate hue angles and accept a hue interpolation method. It shows a trace, not only a final value. The ordinary case should demonstrate “The hue follows the shorter angular path between the endpoints.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Draw both arcs between the hues and select a route. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Polar spaces need a hue route, separate the documented CSS color-mix() mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 11 OF 20 . Handle boundaries
11. Longer, increasing and decreasing hue are distinct
polar interpolation can request longer hue, increasing hue or decreasing hue, producing different paths and intermediate colours. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is using longer hue as a synonym for more saturated. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Separate angular route from chroma magnitude.
For the Longer, increasing and decreasing hue are distinct chapter on CSS color-mix(), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using longer hue as a synonym for more saturated. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
color-mix(in hsl longer hue,hsl(30 100% 50%),hsl(300 100% 50%))Explained result. The hue travels around the longer side of the circle; saturation follows its own components. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: revision planner. Predict the rule using currentColor-based borders and fills. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “polar interpolation can request longer hue, increasing hue or decreasing hue, producing different paths and intermediate colours.” Apply this procedure: Separate angular route from chroma magnitude. The expected mechanism is: The hue travels around the longer side of the circle; saturation follows its own components. For the revision planner, add one near-miss that exposes using longer hue as a synonym for more saturated. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: family calendar. Contrast the rule using light and dark theme tokens. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “polar interpolation can request longer hue, increasing hue or decreasing hue, producing different paths and intermediate colours.” Apply this procedure: Separate angular route from chroma magnitude. The expected mechanism is: The hue travels around the longer side of the circle; saturation follows its own components. For the family calendar, add one near-miss that exposes using longer hue as a synonym for more saturated. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: accessibility audit. Stress-test the rule using contrast, forced colours and colour-vision checks. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “polar interpolation can request longer hue, increasing hue or decreasing hue, producing different paths and intermediate colours.” Apply this procedure: Separate angular route from chroma magnitude. The expected mechanism is: The hue travels around the longer side of the circle; saturation follows its own components. For the accessibility audit, add one near-miss that exposes using longer hue as a synonym for more saturated. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: browser fixture. Explain the rule using computed styles across spaces, weights and alpha. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “polar interpolation can request longer hue, increasing hue or decreasing hue, producing different paths and intermediate colours.” Apply this procedure: Separate angular route from chroma magnitude. The expected mechanism is: The hue travels around the longer side of the circle; saturation follows its own components. For the browser fixture, add one near-miss that exposes using longer hue as a synonym for more saturated. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers using longer hue as a synonym for more saturated.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Separate angular route from chroma magnitude.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS color-mix() syntax. For this chapter, useful prompts are: “What did you expect from Longer, increasing and decreasing hue are distinct?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using longer hue as a synonym for more saturated be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny browser fixture with computed styles across spaces, weights and alpha. Include one ordinary case, one boundary and one deliberate failure caused by using longer hue as a synonym for more saturated. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: polar interpolation can request longer hue, increasing hue or decreasing hue, producing different paths and intermediate colours. It shows a trace, not only a final value. The ordinary case should demonstrate “The hue travels around the longer side of the circle; saturation follows its own components.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Separate angular route from chroma magnitude. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Longer, increasing and decreasing hue are distinct, separate the documented CSS color-mix() mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 12 OF 20 . Handle boundaries
12. Missing colour components have special rules
a missing component represented by none can borrow or remain analogous according to the interpolation process rather than behaving like numeric zero. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is replacing every none with zero before reasoning. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Follow missing-component handling in the selected space.
For the Missing colour components have special rules chapter on CSS color-mix(), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on replacing every none with zero before reasoning. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
color-mix(in oklch,oklch(60% none 40),oklch(80% .2 40))Explained result. The missing chroma is handled through the interpolation rules, not blindly as zero. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: accessibility audit. Contrast the rule using contrast, forced colours and colour-vision checks. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “a missing component represented by none can borrow or remain analogous according to the interpolation process rather than behaving like numeric zero.” Apply this procedure: Follow missing-component handling in the selected space. The expected mechanism is: The missing chroma is handled through the interpolation rules, not blindly as zero. For the accessibility audit, add one near-miss that exposes replacing every none with zero before reasoning. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: browser fixture. Stress-test the rule using computed styles across spaces, weights and alpha. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “a missing component represented by none can borrow or remain analogous according to the interpolation process rather than behaving like numeric zero.” Apply this procedure: Follow missing-component handling in the selected space. The expected mechanism is: The missing chroma is handled through the interpolation rules, not blindly as zero. For the browser fixture, add one near-miss that exposes replacing every none with zero before reasoning. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: homework cards. Explain the rule using a calm subject accent mixed with the page surface. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “a missing component represented by none can borrow or remain analogous according to the interpolation process rather than behaving like numeric zero.” Apply this procedure: Follow missing-component handling in the selected space. The expected mechanism is: The missing chroma is handled through the interpolation rules, not blindly as zero. For the homework cards, add one near-miss that exposes replacing every none with zero before reasoning. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: library interface. Transfer the rule using hover and selected colours derived from one token. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “a missing component represented by none can borrow or remain analogous according to the interpolation process rather than behaving like numeric zero.” Apply this procedure: Follow missing-component handling in the selected space. The expected mechanism is: The missing chroma is handled through the interpolation rules, not blindly as zero. For the library interface, add one near-miss that exposes replacing every none with zero before reasoning. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers replacing every none with zero before reasoning.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Follow missing-component handling in the selected space.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS color-mix() syntax. For this chapter, useful prompts are: “What did you expect from Missing colour components have special rules?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing replacing every none with zero before reasoning be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny homework cards with a calm subject accent mixed with the page surface. Include one ordinary case, one boundary and one deliberate failure caused by replacing every none with zero before reasoning. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: a missing component represented by none can borrow or remain analogous according to the interpolation process rather than behaving like numeric zero. It shows a trace, not only a final value. The ordinary case should demonstrate “The missing chroma is handled through the interpolation rules, not blindly as zero.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Follow missing-component handling in the selected space. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Missing colour components have special rules, separate the documented CSS color-mix() mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 13 OF 20 . Debug and verify
13. currentColor connects a mix to inherited text colour
currentColor can serve as an endpoint, allowing a border, shadow or fill to derive from the element’s computed color. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is forgetting that a descendant or state can change currentColor. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Inspect computed color and the derived property together.
For the currentColor connects a mix to inherited text colour chapter on CSS color-mix(), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on forgetting that a descendant or state can change currentColor. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
border-color:color-mix(in srgb,currentColor 35%,transparent)Explained result. The border tracks the element’s current text colour with reduced alpha. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: homework cards. Stress-test the rule using a calm subject accent mixed with the page surface. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “currentColor can serve as an endpoint, allowing a border, shadow or fill to derive from the element’s computed color.” Apply this procedure: Inspect computed color and the derived property together. The expected mechanism is: The border tracks the element’s current text colour with reduced alpha. For the homework cards, add one near-miss that exposes forgetting that a descendant or state can change currentColor. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: library interface. Explain the rule using hover and selected colours derived from one token. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “currentColor can serve as an endpoint, allowing a border, shadow or fill to derive from the element’s computed color.” Apply this procedure: Inspect computed color and the derived property together. The expected mechanism is: The border tracks the element’s current text colour with reduced alpha. For the library interface, add one near-miss that exposes forgetting that a descendant or state can change currentColor. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: CCA page. Transfer the rule using team accents that retain readable text. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “currentColor can serve as an endpoint, allowing a border, shadow or fill to derive from the element’s computed color.” Apply this procedure: Inspect computed color and the derived property together. The expected mechanism is: The border tracks the element’s current text colour with reduced alpha. For the CCA page, add one near-miss that exposes forgetting that a descendant or state can change currentColor. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: science dashboard. Predict the rule using status scales checked for contrast and non-colour cues. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “currentColor can serve as an endpoint, allowing a border, shadow or fill to derive from the element’s computed color.” Apply this procedure: Inspect computed color and the derived property together. The expected mechanism is: The border tracks the element’s current text colour with reduced alpha. For the science dashboard, add one near-miss that exposes forgetting that a descendant or state can change currentColor. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers forgetting that a descendant or state can change currentColor.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Inspect computed color and the derived property together.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS color-mix() syntax. For this chapter, useful prompts are: “What did you expect from currentColor connects a mix to inherited text colour?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing forgetting that a descendant or state can change currentColor be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny library interface with hover and selected colours derived from one token. Include one ordinary case, one boundary and one deliberate failure caused by forgetting that a descendant or state can change currentColor. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: currentColor can serve as an endpoint, allowing a border, shadow or fill to derive from the element’s computed color. It shows a trace, not only a final value. The ordinary case should demonstrate “The border tracks the element’s current text colour with reduced alpha.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Inspect computed color and the derived property together. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For currentColor connects a mix to inherited text colour, separate the documented CSS color-mix() mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
colour tokens and percentage variables can expose the design decision instead of hiding repeated literals. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is scattering slightly different mixes across many selectors. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Name the role and the weight once.
For the Custom properties make weights auditable chapter on CSS color-mix(), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on scattering slightly different mixes across many selectors. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
--selected-bg:color-mix(in oklab,var(--accent) 18%,var(--surface));Explained result. The token states both the endpoints and the intended accent contribution. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: CCA page. Explain the rule using team accents that retain readable text. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “colour tokens and percentage variables can expose the design decision instead of hiding repeated literals.” Apply this procedure: Name the role and the weight once. The expected mechanism is: The token states both the endpoints and the intended accent contribution. For the CCA page, add one near-miss that exposes scattering slightly different mixes across many selectors. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: science dashboard. Transfer the rule using status scales checked for contrast and non-colour cues. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “colour tokens and percentage variables can expose the design decision instead of hiding repeated literals.” Apply this procedure: Name the role and the weight once. The expected mechanism is: The token states both the endpoints and the intended accent contribution. For the science dashboard, add one near-miss that exposes scattering slightly different mixes across many selectors. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: revision planner. Predict the rule using currentColor-based borders and fills. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “colour tokens and percentage variables can expose the design decision instead of hiding repeated literals.” Apply this procedure: Name the role and the weight once. The expected mechanism is: The token states both the endpoints and the intended accent contribution. For the revision planner, add one near-miss that exposes scattering slightly different mixes across many selectors. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: family calendar. Contrast the rule using light and dark theme tokens. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “colour tokens and percentage variables can expose the design decision instead of hiding repeated literals.” Apply this procedure: Name the role and the weight once. The expected mechanism is: The token states both the endpoints and the intended accent contribution. For the family calendar, add one near-miss that exposes scattering slightly different mixes across many selectors. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers scattering slightly different mixes across many selectors.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Name the role and the weight once.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS color-mix() syntax. For this chapter, useful prompts are: “What did you expect from Custom properties make weights auditable?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing scattering slightly different mixes across many selectors be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny CCA page with team accents that retain readable text. Include one ordinary case, one boundary and one deliberate failure caused by scattering slightly different mixes across many selectors. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: colour tokens and percentage variables can expose the design decision instead of hiding repeated literals. It shows a trace, not only a final value. The ordinary case should demonstrate “The token states both the endpoints and the intended accent contribution.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Name the role and the weight once. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Custom properties make weights auditable, separate the documented CSS color-mix() mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
an earlier supported colour declaration remains when a later color-mix declaration is unsupported or invalid. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is placing the fallback after the enhancement and overriding it. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write base first, enhancement second, and test computed style.
For the The cascade provides a natural fallback chapter on CSS color-mix(), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on placing the fallback after the enhancement and overriding it. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
background:#eef2ff;
background:color-mix(in oklab,var(--accent) 14%,white);Explained result. Supporting browsers use the mix; otherwise the earlier solid colour remains. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: revision planner. Transfer the rule using currentColor-based borders and fills. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “an earlier supported colour declaration remains when a later color-mix declaration is unsupported or invalid.” Apply this procedure: Write base first, enhancement second, and test computed style. The expected mechanism is: Supporting browsers use the mix; otherwise the earlier solid colour remains. For the revision planner, add one near-miss that exposes placing the fallback after the enhancement and overriding it. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: family calendar. Predict the rule using light and dark theme tokens. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “an earlier supported colour declaration remains when a later color-mix declaration is unsupported or invalid.” Apply this procedure: Write base first, enhancement second, and test computed style. The expected mechanism is: Supporting browsers use the mix; otherwise the earlier solid colour remains. For the family calendar, add one near-miss that exposes placing the fallback after the enhancement and overriding it. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: accessibility audit. Contrast the rule using contrast, forced colours and colour-vision checks. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “an earlier supported colour declaration remains when a later color-mix declaration is unsupported or invalid.” Apply this procedure: Write base first, enhancement second, and test computed style. The expected mechanism is: Supporting browsers use the mix; otherwise the earlier solid colour remains. For the accessibility audit, add one near-miss that exposes placing the fallback after the enhancement and overriding it. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: browser fixture. Stress-test the rule using computed styles across spaces, weights and alpha. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “an earlier supported colour declaration remains when a later color-mix declaration is unsupported or invalid.” Apply this procedure: Write base first, enhancement second, and test computed style. The expected mechanism is: Supporting browsers use the mix; otherwise the earlier solid colour remains. For the browser fixture, add one near-miss that exposes placing the fallback after the enhancement and overriding it. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers placing the fallback after the enhancement and overriding it.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write base first, enhancement second, and test computed style.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS color-mix() syntax. For this chapter, useful prompts are: “What did you expect from The cascade provides a natural fallback?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing placing the fallback after the enhancement and overriding it be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny science dashboard with status scales checked for contrast and non-colour cues. Include one ordinary case, one boundary and one deliberate failure caused by placing the fallback after the enhancement and overriding it. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: an earlier supported colour declaration remains when a later color-mix declaration is unsupported or invalid. It shows a trace, not only a final value. The ordinary case should demonstrate “Supporting browsers use the mix; otherwise the earlier solid colour remains.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write base first, enhancement second, and test computed style. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For The cascade provides a natural fallback, separate the documented CSS color-mix() mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
@supports color: color-mix(…) can guard related design rules while the base component stays usable. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is hiding essential content inside a feature query. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Keep structure and essential contrast outside the optional block.
For the @supports can gate a larger enhancement chapter on CSS color-mix(), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on hiding essential content inside a feature query. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
@supports (color:color-mix(in srgb,red,blue)){.card{...}}Explained result. Only the enhanced colour system depends on support for the function. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: accessibility audit. Predict the rule using contrast, forced colours and colour-vision checks. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “@supports color: color-mix(…) can guard related design rules while the base component stays usable.” Apply this procedure: Keep structure and essential contrast outside the optional block. The expected mechanism is: Only the enhanced colour system depends on support for the function. For the accessibility audit, add one near-miss that exposes hiding essential content inside a feature query. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: browser fixture. Contrast the rule using computed styles across spaces, weights and alpha. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “@supports color: color-mix(…) can guard related design rules while the base component stays usable.” Apply this procedure: Keep structure and essential contrast outside the optional block. The expected mechanism is: Only the enhanced colour system depends on support for the function. For the browser fixture, add one near-miss that exposes hiding essential content inside a feature query. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: homework cards. Stress-test the rule using a calm subject accent mixed with the page surface. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “@supports color: color-mix(…) can guard related design rules while the base component stays usable.” Apply this procedure: Keep structure and essential contrast outside the optional block. The expected mechanism is: Only the enhanced colour system depends on support for the function. For the homework cards, add one near-miss that exposes hiding essential content inside a feature query. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: library interface. Explain the rule using hover and selected colours derived from one token. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “@supports color: color-mix(…) can guard related design rules while the base component stays usable.” Apply this procedure: Keep structure and essential contrast outside the optional block. The expected mechanism is: Only the enhanced colour system depends on support for the function. For the library interface, add one near-miss that exposes hiding essential content inside a feature query. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers hiding essential content inside a feature query.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Keep structure and essential contrast outside the optional block.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS color-mix() syntax. For this chapter, useful prompts are: “What did you expect from @supports can gate a larger enhancement?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing hiding essential content inside a feature query be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny revision planner with currentColor-based borders and fills. Include one ordinary case, one boundary and one deliberate failure caused by hiding essential content inside a feature query. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: @supports color: color-mix(…) can guard related design rules while the base component stays usable. It shows a trace, not only a final value. The ordinary case should demonstrate “Only the enhanced colour system depends on support for the function.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Keep structure and essential contrast outside the optional block. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For @supports can gate a larger enhancement, separate the documented CSS color-mix() mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 17 OF 20 . Transfer with judgment
17. Nested mixes compose but can hide intent
one color-mix result can be an endpoint of another, allowing multi-step systems at the cost of harder mental tracing. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is building a long chain that no maintainer can audit. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Name intermediate tokens and record each space and weight.
For the Nested mixes compose but can hide intent chapter on CSS color-mix(), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on building a long chain that no maintainer can audit. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
--soft:color-mix(in oklab,var(--accent),white 80%);Explained result. The intermediate soft token can be tested before it enters another mix. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: homework cards. Contrast the rule using a calm subject accent mixed with the page surface. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “one color-mix result can be an endpoint of another, allowing multi-step systems at the cost of harder mental tracing.” Apply this procedure: Name intermediate tokens and record each space and weight. The expected mechanism is: The intermediate soft token can be tested before it enters another mix. For the homework cards, add one near-miss that exposes building a long chain that no maintainer can audit. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: library interface. Stress-test the rule using hover and selected colours derived from one token. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “one color-mix result can be an endpoint of another, allowing multi-step systems at the cost of harder mental tracing.” Apply this procedure: Name intermediate tokens and record each space and weight. The expected mechanism is: The intermediate soft token can be tested before it enters another mix. For the library interface, add one near-miss that exposes building a long chain that no maintainer can audit. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: CCA page. Explain the rule using team accents that retain readable text. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “one color-mix result can be an endpoint of another, allowing multi-step systems at the cost of harder mental tracing.” Apply this procedure: Name intermediate tokens and record each space and weight. The expected mechanism is: The intermediate soft token can be tested before it enters another mix. For the CCA page, add one near-miss that exposes building a long chain that no maintainer can audit. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: science dashboard. Transfer the rule using status scales checked for contrast and non-colour cues. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “one color-mix result can be an endpoint of another, allowing multi-step systems at the cost of harder mental tracing.” Apply this procedure: Name intermediate tokens and record each space and weight. The expected mechanism is: The intermediate soft token can be tested before it enters another mix. For the science dashboard, add one near-miss that exposes building a long chain that no maintainer can audit. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers building a long chain that no maintainer can audit.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Name intermediate tokens and record each space and weight.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS color-mix() syntax. For this chapter, useful prompts are: “What did you expect from Nested mixes compose but can hide intent?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing building a long chain that no maintainer can audit be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny family calendar with light and dark theme tokens. Include one ordinary case, one boundary and one deliberate failure caused by building a long chain that no maintainer can audit. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: one color-mix result can be an endpoint of another, allowing multi-step systems at the cost of harder mental tracing. It shows a trace, not only a final value. The ordinary case should demonstrate “The intermediate soft token can be tested before it enters another mix.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Name intermediate tokens and record each space and weight. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Nested mixes compose but can hide intent, separate the documented CSS color-mix() mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 18 OF 20 . Transfer with judgment
18. Gamut mapping can change the displayed result
interpolation may produce colours outside a destination device gamut, and conversion or mapping affects the final displayed colour. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is treating a wide-gamut computed colour as identical on every display. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Inspect computed values and test representative devices or emulation.
For the Gamut mapping can change the displayed result chapter on CSS color-mix(), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on treating a wide-gamut computed colour as identical on every display. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
color:color-mix(in oklch,color(display-p3 1 0 0),blue)Explained result. The authored result may require mapping when the output gamut cannot represent it directly. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: CCA page. Stress-test the rule using team accents that retain readable text. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “interpolation may produce colours outside a destination device gamut, and conversion or mapping affects the final displayed colour.” Apply this procedure: Inspect computed values and test representative devices or emulation. The expected mechanism is: The authored result may require mapping when the output gamut cannot represent it directly. For the CCA page, add one near-miss that exposes treating a wide-gamut computed colour as identical on every display. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: science dashboard. Explain the rule using status scales checked for contrast and non-colour cues. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “interpolation may produce colours outside a destination device gamut, and conversion or mapping affects the final displayed colour.” Apply this procedure: Inspect computed values and test representative devices or emulation. The expected mechanism is: The authored result may require mapping when the output gamut cannot represent it directly. For the science dashboard, add one near-miss that exposes treating a wide-gamut computed colour as identical on every display. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: revision planner. Transfer the rule using currentColor-based borders and fills. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “interpolation may produce colours outside a destination device gamut, and conversion or mapping affects the final displayed colour.” Apply this procedure: Inspect computed values and test representative devices or emulation. The expected mechanism is: The authored result may require mapping when the output gamut cannot represent it directly. For the revision planner, add one near-miss that exposes treating a wide-gamut computed colour as identical on every display. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: family calendar. Predict the rule using light and dark theme tokens. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “interpolation may produce colours outside a destination device gamut, and conversion or mapping affects the final displayed colour.” Apply this procedure: Inspect computed values and test representative devices or emulation. The expected mechanism is: The authored result may require mapping when the output gamut cannot represent it directly. For the family calendar, add one near-miss that exposes treating a wide-gamut computed colour as identical on every display. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers treating a wide-gamut computed colour as identical on every display.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Inspect computed values and test representative devices or emulation.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS color-mix() syntax. For this chapter, useful prompts are: “What did you expect from Gamut mapping can change the displayed result?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing treating a wide-gamut computed colour as identical on every display be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny accessibility audit with contrast, forced colours and colour-vision checks. Include one ordinary case, one boundary and one deliberate failure caused by treating a wide-gamut computed colour as identical on every display. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: interpolation may produce colours outside a destination device gamut, and conversion or mapping affects the final displayed colour. It shows a trace, not only a final value. The ordinary case should demonstrate “The authored result may require mapping when the output gamut cannot represent it directly.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Inspect computed values and test representative devices or emulation. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Gamut mapping can change the displayed result, separate the documented CSS color-mix() mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 19 OF 20 . Transfer with judgment
19. Contrast is not guaranteed by mathematical mixing
a tint produced from brand colours can still fail text contrast, focus visibility or state differentiation. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is assuming an oklab or oklch mix is automatically accessible. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Measure the actual foreground-background pair and add non-colour cues.
For the Contrast is not guaranteed by mathematical mixing chapter on CSS color-mix(), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on assuming an oklab or oklch mix is automatically accessible. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
outline:2px solid currentColorExplained result. A visible outline can preserve focus meaning even when a mixed background shifts across themes. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: revision planner. Explain the rule using currentColor-based borders and fills. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “a tint produced from brand colours can still fail text contrast, focus visibility or state differentiation.” Apply this procedure: Measure the actual foreground-background pair and add non-colour cues. The expected mechanism is: A visible outline can preserve focus meaning even when a mixed background shifts across themes. For the revision planner, add one near-miss that exposes assuming an oklab or oklch mix is automatically accessible. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: family calendar. Transfer the rule using light and dark theme tokens. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “a tint produced from brand colours can still fail text contrast, focus visibility or state differentiation.” Apply this procedure: Measure the actual foreground-background pair and add non-colour cues. The expected mechanism is: A visible outline can preserve focus meaning even when a mixed background shifts across themes. For the family calendar, add one near-miss that exposes assuming an oklab or oklch mix is automatically accessible. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: accessibility audit. Predict the rule using contrast, forced colours and colour-vision checks. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “a tint produced from brand colours can still fail text contrast, focus visibility or state differentiation.” Apply this procedure: Measure the actual foreground-background pair and add non-colour cues. The expected mechanism is: A visible outline can preserve focus meaning even when a mixed background shifts across themes. For the accessibility audit, add one near-miss that exposes assuming an oklab or oklch mix is automatically accessible. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: browser fixture. Contrast the rule using computed styles across spaces, weights and alpha. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “a tint produced from brand colours can still fail text contrast, focus visibility or state differentiation.” Apply this procedure: Measure the actual foreground-background pair and add non-colour cues. The expected mechanism is: A visible outline can preserve focus meaning even when a mixed background shifts across themes. For the browser fixture, add one near-miss that exposes assuming an oklab or oklch mix is automatically accessible. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers assuming an oklab or oklch mix is automatically accessible.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Measure the actual foreground-background pair and add non-colour cues.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS color-mix() syntax. For this chapter, useful prompts are: “What did you expect from Contrast is not guaranteed by mathematical mixing?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming an oklab or oklch mix is automatically accessible be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny browser fixture with computed styles across spaces, weights and alpha. Include one ordinary case, one boundary and one deliberate failure caused by assuming an oklab or oklch mix is automatically accessible. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: a tint produced from brand colours can still fail text contrast, focus visibility or state differentiation. It shows a trace, not only a final value. The ordinary case should demonstrate “A visible outline can preserve focus meaning even when a mixed background shifts across themes.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Measure the actual foreground-background pair and add non-colour cues. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Contrast is not guaranteed by mathematical mixing, separate the documented CSS color-mix() mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 20 OF 20 . Transfer with judgment
20. A computed-style matrix proves the design
a robust fixture varies spaces, percentages, alpha, hue routes, themes and fallbacks while recording computed colour and accessibility checks. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is approving one screenshot on one monitor. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Assert supported declarations and review contrast at every state boundary.
For the A computed-style matrix proves the design chapter on CSS color-mix(), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on approving one screenshot on one monitor. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
getComputedStyle(card).backgroundColorExplained result. The computed value is evidence for the browser result, while visual and contrast checks test the user-facing design. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: accessibility audit. Transfer the rule using contrast, forced colours and colour-vision checks. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “a robust fixture varies spaces, percentages, alpha, hue routes, themes and fallbacks while recording computed colour and accessibility checks.” Apply this procedure: Assert supported declarations and review contrast at every state boundary. The expected mechanism is: The computed value is evidence for the browser result, while visual and contrast checks test the user-facing design. For the accessibility audit, add one near-miss that exposes approving one screenshot on one monitor. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: browser fixture. Predict the rule using computed styles across spaces, weights and alpha. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “a robust fixture varies spaces, percentages, alpha, hue routes, themes and fallbacks while recording computed colour and accessibility checks.” Apply this procedure: Assert supported declarations and review contrast at every state boundary. The expected mechanism is: The computed value is evidence for the browser result, while visual and contrast checks test the user-facing design. For the browser fixture, add one near-miss that exposes approving one screenshot on one monitor. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: homework cards. Contrast the rule using a calm subject accent mixed with the page surface. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “a robust fixture varies spaces, percentages, alpha, hue routes, themes and fallbacks while recording computed colour and accessibility checks.” Apply this procedure: Assert supported declarations and review contrast at every state boundary. The expected mechanism is: The computed value is evidence for the browser result, while visual and contrast checks test the user-facing design. For the homework cards, add one near-miss that exposes approving one screenshot on one monitor. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: library interface. Stress-test the rule using hover and selected colours derived from one token. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “a robust fixture varies spaces, percentages, alpha, hue routes, themes and fallbacks while recording computed colour and accessibility checks.” Apply this procedure: Assert supported declarations and review contrast at every state boundary. The expected mechanism is: The computed value is evidence for the browser result, while visual and contrast checks test the user-facing design. For the library interface, add one near-miss that exposes approving one screenshot on one monitor. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers approving one screenshot on one monitor.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Assert supported declarations and review contrast at every state boundary.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS color-mix() syntax. For this chapter, useful prompts are: “What did you expect from A computed-style matrix proves the design?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing approving one screenshot on one monitor be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny homework cards with a calm subject accent mixed with the page surface. Include one ordinary case, one boundary and one deliberate failure caused by approving one screenshot on one monitor. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: a robust fixture varies spaces, percentages, alpha, hue routes, themes and fallbacks while recording computed colour and accessibility checks. It shows a trace, not only a final value. The ordinary case should demonstrate “The computed value is evidence for the browser result, while visual and contrast checks test the user-facing design.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Assert supported declarations and review contrast at every state boundary. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For A computed-style matrix proves the design, separate the documented CSS color-mix() mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
Parent guide: choose the next useful step
Start with evidence, not a label such as careless. Ask for one prediction and one trace. If the first transition is wrong, rebuild the model. If the model is sound but syntax fails, practise reference use. If routine cases are correct but boundaries fail, vary ties, defaults, unsupported inputs, ownership or missing paths. If explanations transfer, move to a small project.
Keep a weekly record with four lines: concept, prediction, observed difference and next test. Stop when fatigue replaces reasoning. A smaller case tomorrow is more useful than another hour of copying tonight.
Seek specialist help when cause and effect remain invisible after examples are reduced, when accessibility or data-loss implications are unclear, or when an important repository, database or application state may be at risk. Good support should make the learner’s reasoning more independent.
Capstone practice with explained routes
1. homework cards: model, boundary and recovery
Create a small homework cards using a calm subject accent mixed with the page surface. Combine “color-mix interpolates two colours” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: color-mix takes an interpolation method and exactly two colour values, optionally with percentages. Apply: Name the space, endpoints and weights before predicting the result. Verify: The computed colour is weighted toward royalblue in sRGB interpolation. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
2. library interface: model, boundary and recovery
Create a small library interface using hover and selected colours derived from one token. Combine “One omitted percentage uses the remainder” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: when one colour has a percentage and the other does not, the missing percentage becomes one hundred percent minus the stated value. Apply: Complete the two-part weight equation first. Verify: White receives the remaining 75 percent. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
3. CCA page: model, boundary and recovery
Create a small CCA page using team accents that retain readable text. Combine “A zero total is invalid” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: the mix cannot produce a colour when both contributions sum to zero. Apply: Reject the declaration or provide a meaningful nonzero weight. Verify: The function is invalid rather than a useful transparent mix. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
4. science dashboard: model, boundary and recovery
Create a small science dashboard using status scales checked for contrast and non-colour cues. Combine “Polar spaces need a hue route” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: spaces such as hsl, hwb, lch and oklch interpolate hue angles and accept a hue interpolation method. Apply: Draw both arcs between the hues and select a route. Verify: The hue follows the shorter angular path between the endpoints. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
5. revision planner: model, boundary and recovery
Create a small revision planner using currentColor-based borders and fills. Combine “currentColor connects a mix to inherited text colour” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: currentColor can serve as an endpoint, allowing a border, shadow or fill to derive from the element’s computed color. Apply: Inspect computed color and the derived property together. Verify: The border tracks the element’s current text colour with reduced alpha. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
6. family calendar: model, boundary and recovery
Create a small family calendar using light and dark theme tokens. Combine “@supports can gate a larger enhancement” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: @supports color: color-mix(…) can guard related design rules while the base component stays usable. Apply: Keep structure and essential contrast outside the optional block. Verify: Only the enhanced colour system depends on support for the function. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
7. accessibility audit: model, boundary and recovery
Create a small accessibility audit using contrast, forced colours and colour-vision checks. Combine “Contrast is not guaranteed by mathematical mixing” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: a tint produced from brand colours can still fail text contrast, focus visibility or state differentiation. Apply: Measure the actual foreground-background pair and add non-colour cues. Verify: A visible outline can preserve focus meaning even when a mixed background shifts across themes. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
8. browser fixture: model, boundary and recovery
Create a small browser fixture using computed styles across spaces, weights and alpha. Combine “The interpolation space is part of the meaning” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: the in clause selects the colour space used for interpolation, and different spaces can produce visibly different midpoints. Apply: Compare the same endpoints in two spaces and inspect the computed result. Verify: The midpoint follows Oklab component interpolation rather than sRGB component interpolation. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
Frequently asked questions
How long should a practice session be?
Use one complete prediction–observation–explanation cycle while attention remains good. Ten to twenty focused minutes can be enough.
Should every option or function be memorised?
No. Memorise the governing distinctions and practise retrieving the official reference. Understanding means predicting and explaining, not reciting a parameter list.
What if the result is correct but the explanation is weak?
Treat it as partial success. Ask for a trace and change one boundary. A reliable model survives controlled variation.
Is the shortest solution the best?
Not automatically. Prefer the solution whose semantics, failure modes and maintenance cost are easiest to justify for the actual project.
When should official documentation be used?
Use it whenever syntax, supported types, SQL dialect behaviour or Git version details matter. Primary documentation settles the current contract.
How can a parent help without technical expertise?
Ask what was predicted, where the first difference appeared, what evidence matters and which smaller example could isolate it.
How do we test transfer?
Change the context, vocabulary and one boundary. Require the learner to identify the invariant before using a tool.
What should be saved after practice?
Keep the corrected rule, one trace, one boundary case and the next question. Avoid storing pages of unexplained output.
Can these exercises replace backups?
No. Use disposable examples and proper backups. Learning should not endanger schoolwork, repositories or personal data.
What counts as mastery?
The learner can predict, verify, diagnose, recover and justify a choice across more than one context, while knowing when to consult the current reference.
