Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                - const brandColors = ['primary','accent'];
- const functionalColors = ['success','info','warning','danger'];

- const neutralIterators = [0,25,50,100,200,300,400,500,600,700,800,900,950,1000];
- const colorIterators = [25,50,100,200,300,400,500,600,700,800,900,950];
- const alphaIterators = [1,2,3,4,5,6,7,8,9];

.container.colors
  heading.row
    .col-sm-8
      h1 Color Palette Generator
    .col-sm-4.flex-end
      button.copy-css-btn.btn.btn-default.btn-small Copy CSS Properties
      button.copy-json-btn.btn.btn-default.btn-small Copy JSON

  // Brand Colors
  .row.spacer
    div(class='col-sm-12')
      h3 Brand Colors
    div(class='col-sm-4 neutral')
        div(class='swatch color-500 main-color')
          span neutral
          span.value.hex &nbsp;
        each count, index in neutralIterators
          - const isLast = (index === neutralIterators.length - 1) ? "true" : "false";
          div(class='swatch color-'+count data-property='--color-neutral-'+count data-last=isLast)
            span='neutral-'+count
            span.value.hex &nbsp;
    each color in brandColors
      div(class='col-sm-4 '+color)
        div(class='swatch color-500 main-color')
          span=color
          span.value.hex &nbsp;
        each count, index in colorIterators
          - const isLast = (index === colorIterators.length - 1) ? "true" : "false";
          div(class='swatch color-'+count data-property='--color-'+color+'-'+count data-last=isLast)
            span=color+'-'+count
            span.value.hex &nbsp;

  // Functional Colors
  .row.spacer
    div(class='col-sm-12')
      h3 Functional Colors
    each color in functionalColors
      div(class='col-sm-3 '+color)
        div(class='swatch color-500 main-color')
          span=color
          span.value.hex &nbsp;
        each count, index in colorIterators
          - const isLast = (index === colorIterators.length - 1) ? "true" : "false";
          div(class='swatch color-'+count data-property='--color-'+color+'-'+count data-last=isLast)
            span=color+'-'+count
            span.value.hex &nbsp;

  // Transparent Colors          
  .row.spacer
    div(class='col-sm-12')
      h3 Transparent Colors
    each color in ['neutral-0','neutral-1000','primary-500','accent-500']
      div(class='col-sm-3 '+color)
        div(class='swatch color-500 main-color')
          span=color
          span.value.rgb &nbsp;
        each count, index in alphaIterators
          - const isLast = (index === alphaIterators.length - 1) ? "true" : "false";
          div(class='swatch color-'+count data-property='--color-'+color+'-alpha-'+count data-last=isLast)
            span=color+'-'+count
            span.value.rgb &nbsp;
  .row.spacer
    each color in functionalColors
      div(class='col-sm-3 '+color+'-500')
        div(class='swatch color-500 main-color')
          span=color
          span.value.rgb &nbsp;
        each count, index in alphaIterators
          - const isLast = (index === alphaIterators.length - 1) ? "true" : "false";
          div(class='swatch color-'+count data-property='--color-'+color+'-500-alpha-'+count data-last=isLast)
            span=color+'-'+count
            span.value.rgb &nbsp;
              
            
!

CSS

              
                @import "compass/utilities/color";

// Scaffolding
body {
  background-color: var(--color-neutral-25);
  color: var(--color-neutral-900);
  box-sizing: border-box;
}

heading {
  display: flex;
  align-items: center;
  .btn {
    margin-left: 8px;
  }
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}

.spacer {
  margin-top: 16px;
  margin-bottom: 16px;
}

.swatch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  &.main-color {
    margin: 16px 0 0;
    padding: 24px 16px;
    text-transform: capitalize;
  }
  span {
    width: 50%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .value {
    font-size: 0.75em;
    text-align: right;
    text-transform: lowercase;
  }
}

// Color Swatches
$colors: (
  neutral: #6f737c,
  primary: #004582,
  accent: #10a400,
  success: #21b500,
  info: #00bcd4,
  warning: #ff9800,
  danger: #d0021b
);

@mixin generate-palette() {
  $alpha-colors: (
    neutral-0: tint(map-get($colors, neutral), 100%),
    neutral-1000: shade(map-get($colors, neutral), 100%)
  );

  @each $color, $value in $colors {
    $map: ();
    $map: map-merge($map, (#{$color}-500 : map-get($colors, $color)) );
    $alpha-colors: map-merge($alpha-colors, $map);
  }

  :root {
    @each $name, $color in $colors {
      --color-#{$name}-0: tint($color, 100%);
      --color-#{$name}-25: tint($color, 96%);
      --color-#{$name}-50: tint($color, 92%);
      --color-#{$name}-100: tint($color, 81%);
      --color-#{$name}-200: tint($color, 65.5%);
      --color-#{$name}-300: tint($color, 46%);
      --color-#{$name}-400: tint($color, 24%);
      --color-#{$name}-500: $color;
      --color-#{$name}-600: adjust-hue(shade($color, 13%), 1.25);
      --color-#{$name}-700: adjust-hue(shade($color, 26%), 2.5);
      --color-#{$name}-800: adjust-hue(shade($color, 41%), 6);
      --color-#{$name}-900: adjust-hue(shade($color, 55%), 8);
      --color-#{$name}-950: adjust-hue(shade($color, 75%), 9);
      --color-#{$name}-1000: shade($color, 100%);
    }

    @each $name, $color in $alpha-colors {
      --color-#{$name}-alpha-1: rgba($color, 0.1);
      --color-#{$name}-alpha-2: rgba($color, 0.2);
      --color-#{$name}-alpha-3: rgba($color, 0.3);
      --color-#{$name}-alpha-4: rgba($color, 0.4);
      --color-#{$name}-alpha-5: rgba($color, 0.5);
      --color-#{$name}-alpha-6: rgba($color, 0.6);
      --color-#{$name}-alpha-7: rgba($color, 0.7);
      --color-#{$name}-alpha-8: rgba($color, 0.8);
      --color-#{$name}-alpha-9: rgba($color, 0.9);
    }
  }

  @each $name, $value in $colors {
    .#{$name} {
      $counter: 0;
      .color-25 {
        background-color: var(--color-#{$name}-25);
      }
      @while $counter <= 100 {
        $count: $counter*10;
        .color-#{$count} {
          background-color: var(--color-#{$name}-#{$count});

          $counter: $counter+1;
          @if $counter > 50 {
            color: var(--color-neutral-0);
          } @else {
            color: var(--color-neutral-1000);
          }
        }
      }
    }
  }

  @each $name, $value in $alpha-colors {
    .#{$name} {
      .main-color {
        background-color: var(--color-#{$name});
        @if $name == "neutral-0" {
          color: var(--color-neutral-1000);
        } @else {
          color: var(--color-neutral-0);
        }
      }
      $count: 0;
      @while $count < 10 {
        .color-#{$count} {
          background-color: var(--color-#{$name}-alpha-#{$count});

          $count: $count+1;
          @if $count > 5 {
            color: var(--color-neutral-0);
          } @else {
            color: var(--color-neutral-1000);
          }

          @if $name == "neutral-0" {
            color: var(--color-neutral-1000);
          }
          @elseif $name == "neutral-1000" {
            color: var(--color-neutral-0);
          }
        }
      }
    }
  }
}


.selectedSwatch {
  border: black dashed 2px;
  position: relative;
  &:before {
    content: "Hex Value Copied";
    display: block;
    width: 100px;
    text-align: center;
    top: -20px;
    left: 40%;
    height: 20px;
    padding: 2px;
    background-color: rgba(255,255,255,.5);
    border: solid 1px rgba(0,0,0,.5);
    color: black;
    font-size: 10px;
    position: absolute;
  }
}

@include generate-palette();

              
            
!

JS

              
                // Copy to Clipboard
const copyTextToClipboard = text => {
  const textArea = document.createElement("textarea");

  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.select();

  try {
    const copy = document.execCommand("copy");
    const msg = copy ? "successful" : "unsuccessful";
    console.log(`Copying text command was ${msg}`);
  } catch (err) {
    console.log("Oops, unable to copy");
  }

  document.body.removeChild(textArea);
};

// Returns all CSS custom properties from [data-property] elements
const getCustomProperties = (outputType) => {
  const styles = window.getComputedStyle(document.querySelector(":root"));
  let properties = "";
  let seperator = ';';

  $("[data-property]").each(function() {
    let propertyName = $(this).data("property");
    let propertyValue = styles.getPropertyValue(propertyName).replace(/[ ]/g,"");

    // Set white/black color names back to hex for consistency
    if (propertyValue === "white") {
      propertyValue = "#fff";
    } else if (propertyValue === "black") {
      propertyValue = "#000";
    }

    if (outputType === 'json') {
      propertyName = `"${propertyName}"`;
      propertyValue = `"${propertyValue}"`;
      seperator = ',';
    }

    let property = `${propertyName}: ${propertyValue}${seperator}\n`;

    // Adds new line after each swatch group in output
    if ($(this).data('last')) {
      property += "\n";
    }

    properties += property;
  });

  return properties.trim();
};

// Sets the desired output for copy
const setOutput = (type, name) => {
  let output = "";

  output = getCustomProperties(type).toLowerCase();

  if (type === 'json') {
    // Remove last instance of comma
    // Add tabs for output formatting
    output = output.replace(/,$/g,"").replace(/"--/g,"\t\t\"--");

    // Create JSON output to match schema
    const lowerName = name ? name.toLowerCase().replace(/[ ]/g,"-") : "";
    const upperName = lowerName.toUpperCase().replace(/[-]/g,"_");
    output = `{\n\t"component": "color-palette",\n\t"component-option": "${lowerName}",\n\t"label": "COLOR_PALETTE_${upperName}",\n\t"description": "COLOR_PALETTE_${upperName}_DESCRIPTION",\n\t"declarations": {\n${output}\n\t}\n}`
  }

  return output;
};

// Add color values to markup
const updateSwatch = () => {
  $(".swatch").each(function() {
    const bgColor = $(this).css("backgroundColor");
    const hexColor = w3color(bgColor).toHexString();
    const rgbColor = w3color(bgColor).toRgbaString();

    const $hex = $(".hex", this);
    if ($hex.length && hexColor !== $hex.text()) {
      $hex.html(hexColor);
    }

    const $rgb = $(".rgb", this);
    if ($rgb.length && rgbColor !== $rgb.text()) {
      $rgb.html(rgbColor);
    }
  });
}


// DOM Ready
$(() => {

  updateSwatch();

  // Watch for changes
  setInterval(function(){
    updateSwatch();
  }, 3000);

  // Copy CSS Properties
  $(".copy-css-btn").on("click", function() {
    copyTextToClipboard(setOutput('css'));
  });

  // Copy value of swatch by just clicking on the swatch div. Copies to a temporary input value.
  $('.swatch').click(function() {
    $('.swatch').removeClass('selectedSwatch');
    var swatchColor = $(this).css('backgroundColor');
    var swatchColor = w3color(swatchColor).toHexString();
    var colorInput = $('<input>').val(swatchColor).appendTo('body').select();
    document.execCommand('copy');
    $(this).addClass('selectedSwatch');
  });

  // Copy JSON
  $(".copy-json-btn").on("click", function() {
    const name = prompt("Please enter color palette design component option name", "global-light-theme-gray-true-blue");
    copyTextToClipboard(setOutput('json', name));
  });
});

              
            
!
999px

Console