Skip to content

Instantly share code, notes, and snippets.

@CharlieHawker

CharlieHawker/closest-color.scss

Last active August 29, 2015 14:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save CharlieHawker/d56ca040cf459d1733a5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save CharlieHawker/d56ca040cf459d1733a5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. CharlieHawker revised this gist Nov 11, 2014. 2 changed files with 1 addition and 19 deletions.
    6 changes: 0 additions & 6 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +0,0 @@
    /* Usage Examples */
    .box {
    color: #40e448;
    background-color: #ccccff;
    border: 2px solid #40e448;
    }
    14 changes: 1 addition & 13 deletions SassMeister-input.scss → closest-color.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,4 @@
    // ----
    // Sass (v3.4.7)
    // Compass (v1.0.1)
    // ----

    /* Find the closest color match to a given hex/RGB color from a given palette */
    @function closest-color($color, $palette: ()) {
    // break down into individual colors
    $components: red($color), green($color), blue($color);
    @@ -44,12 +40,4 @@
    @else {
    @error 'Unable to find a matching color'; // just in case
    }
    }

    /* Usage Examples */
    $palette: #ffcccc, #ccffcc, #ccccff, rgb(64, 228, 72);
    .box {
    color: closest-color(#a03300, $palette);
    background-color: closest-color(#3300ff, $palette);
    border: 2px solid closest-color(rgb(16, 240, 158), $palette);
    }
  2. CharlieHawker created this gist Nov 11, 2014.
    55 changes: 55 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    // ----
    // Sass (v3.4.7)
    // Compass (v1.0.1)
    // ----

    @function closest-color($color, $palette: ()) {
    // break down into individual colors
    $components: red($color), green($color), blue($color);
    // set some matching vars
    $diff: 765; // 255 * 3, maximum possible diff
    $closest: false; // not set yet...

    @each $palette-color in $palette {
    $pdiffs: (
    (red($palette-color) - nth($components, 1)),
    (green($palette-color) - nth($components, 2)),
    (blue($palette-color) - nth($components, 3))
    );

    $pdiff: 0;
    @each $pd in $pdiffs {
    @if ($pd < 0) {
    $pdiff: $pdiff + (-1 * $pd);
    }
    @else {
    $pdiff: $pdiff + $pd;
    }
    }

    // see if we have a direct match?
    @if $pdiff == 0 {
    @return $palette-color;
    }
    // otherwise update diff & closest color vars if this is closer
    @if $pdiff < $diff {
    $diff: $pdiff;
    $closest: $palette-color;
    }
    }

    @if $closest {
    @return $closest;
    }
    @else {
    @error 'Unable to find a matching color'; // just in case
    }
    }

    /* Usage Examples */
    $palette: #ffcccc, #ccffcc, #ccccff, rgb(64, 228, 72);
    .box {
    color: closest-color(#a03300, $palette);
    background-color: closest-color(#3300ff, $palette);
    border: 2px solid closest-color(rgb(16, 240, 158), $palette);
    }
    6 changes: 6 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    /* Usage Examples */
    .box {
    color: #40e448;
    background-color: #ccccff;
    border: 2px solid #40e448;
    }