Skip to content

Instantly share code, notes, and snippets.

@lucasmrdt

lucasmrdt/interpolateColor.js

Last active September 26, 2018 11:39
Show Gist options
  • Save lucasmrdt/79c82e6a715c153d86b13d7ced9a6be4 to your computer and use it in GitHub Desktop.
Save lucasmrdt/79c82e6a715c153d86b13d7ced9a6be4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. lucasmrdt revised this gist Sep 26, 2018. 1 changed file with 5 additions and 4 deletions.
    9 changes: 5 additions & 4 deletions interpolateColor.js
    View file
    Original file line number Diff line number Diff line change
    @@ -10,8 +10,9 @@ const parseHexColor = hexColor => hexColor
    const interpolateColor = (beginColor, endColor, percent) => {
    const bColor = parseHexColor(beginColor);
    const eColor = parseHexColor(endColor);
    const output = bColor
    .map((c, i) => Math.round((c + eColor[i]) * percent))
    .map(c => c.toString(16));
    const output = [...new Array(3)].map((_, ii) =>
    Math.round(bColor[ii] + (eColor[ii] - bColor[ii]) * percent)
    .toString(16)
    )
    return `#${output.join('')}`;
    }
    }
  2. lucasmrdt renamed this gist Sep 26, 2018. 1 changed file with 0 additions and 0 deletions.
    0 Color interpolate → interpolateColor.js
    View file
    File renamed without changes.
  3. lucasmrdt revised this gist Sep 26, 2018. No changes.
  4. lucasmrdt created this gist Sep 26, 2018.
    17 changes: 17 additions & 0 deletions Color interpolate
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    const parseHexColor = hexColor => hexColor
    .match(/(?=#)?\w{2}/g)
    .map(c => parseInt(c, 16));

    /**
    * @param {string} beginColor eg. #FFFFFF must have 6 chars.
    * @param {*} endColor eg. #000000 must have 6 chars.
    * @param {*} percent must ∈ [0, 1].
    */
    const interpolateColor = (beginColor, endColor, percent) => {
    const bColor = parseHexColor(beginColor);
    const eColor = parseHexColor(endColor);
    const output = bColor
    .map((c, i) => Math.round((c + eColor[i]) * percent))
    .map(c => c.toString(16));
    return `#${output.join('')}`;
    }