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

              
                #main
              
            
!

CSS

              
                $duration: .3s;
$heading-height: 10vh;
$color-width: .7vw;
$color-height: 10%;

body {
  background-color: rgb(245, 245, 245);
  font: {
    family: 'Raleway', sans-serif;
  }
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.section-header {
  display: none;
}

/* Colors list*/
.colors {
  padding: 0;   
}

/* Color list item*/
.color {
  list-style-type: none;
  position: absolute;
  transform-origin: 50% 0%;
  width: $color-width * 3;
  height: $color-height;
  top: 45%;
}


/* Color animation + stagger */
$colorClass: 'color';

@for $i from 0 through 139 {
  .#{$colorClass}-#{$i} {
    $delay: $i * .01 +s;
    left: 22 + ($color-width * ($i / 2));
    transform-origin: 100% 00%;
    animation: twist-+$i infinite 3.5s linear $delay;
  }

@keyframes twist-#{$i} {
    from {
      transform: 
        scale(1, 1) 
        rotate(0deg) 
        translate(0, 0);      
    }
    25% {
     transform: 
        scale(1, 1) 
        rotate(90deg)  
        translate(00%, 00%);
    }
      50% {
     transform: 
        scale(1, 1) 
        rotate(180deg)  
        translate(0%, 0%);
    }
     75% {
     transform: 
        scale(1, 1) 
        rotate(270deg)  
        translate(0%, 0%);
    }
    to {
      transform: 
        scale(1, 1) 
        rotate(359deg)  
        translate(0, 0);
     
    }
  }
}


/* Color Name */
.color-name,
.hex-code {
  display: none;
}

.copy-icon,
.copied-icon {
  display: none;
}

.color-button {
  border: none;  
  border-top-right-radius: 50%;
  border-radius: 50%;
  color: transparent;  
  margin: 0;
  outline: 0;
  width: 100%;
  height: 100%;
  line-height: 3;
  padding: 5% 0;
  position: absolute;
  transition: color $duration;
  font: {
    family: 'Fira Mono', sans-serif;    
    size: 1rem;
  }
  text-rendering: GeometricPrecision;
  display: inline-block; 
}

.button-content-wrap {
  /* display: none; */
}

/* Hide the select areas needed for copy */
.js-copytextarea {
  display: none;
}

/* Options */

              
            
!

JS

              
                /* X11 JSON */
var x11List = [
  {
    name: 'LightPink',
    hex: '#FFB6C1',
    },
  {
    name: 'Pink',
    hex: '#FFC0CB',
    },
  {
    name: 'Crimson',
    hex: '#DC143C',
    },
  {
    name: 'LavenderBlush',
    hex: '#FFF0F5',
    },
  {
    name: 'PaleVioletRed',
    hex: '#DB7093',
    },
  {
    name: 'HotPink',
    hex: '#FF69B4',
    },
  {
    name: 'DeepPink',
    hex: '#FF1493',
    },
  {
    name: 'MediumVioletRed',
    hex: '#C71585',
    },
  {
    name: 'Orchid',
    hex: '#DA70D6',
    },
  {
    name: 'Thistle',
    hex: '#D8BFD8',
    },
  {
    name: 'Plum',
    hex: '#DDA0DD',
    },
  {
    name: 'Violet',
    hex: '#EE82EE',
    },
  {
    name: 'Magenta',
    hex: '#FF00FF',
    },
  {
    name: 'Fuchsia',
    hex: '#FF00FF',
    },
  {
    name: 'DarkMagenta',
    hex: '#8B008B',
    },
  {
    name: 'Purple',
    hex: '#800080',
    },
  {
    name: 'MediumOrchid',
    hex: '#BA55D3',
    },
  {
    name: 'DarkViolet',
    hex: '#9400D3',
    },
  {
    name: 'DarkOrchid',
    hex: '#9932CC',
    },
  {
    name: 'Indigo',
    hex: '#4B0082',
    },
  {
    name: 'BlueViolet',
    hex: '#8A2BE2',
    },
  {
    name: 'MediumPurple',
    hex: '#9370DB',
    },
  {
    name: 'MediumSlateBlue',
    hex: '#7B68EE',
    },
  {
    name: 'SlateBlue',
    hex: '#6A5ACD',
    },
  {
    name: 'DarkSlateBlue',
    hex: '#483D8B',
    },
  {
    name: 'Lavender',
    hex: '#E6E6FA',
    },
  {
    name: 'GhostWhite',
    hex: '#F8F8FF',
    },
  {
    name: 'Blue',
    hex: '#0000FF',
    },
  {
    name: 'MediumBlue',
    hex: '#0000CD',
    },
  {
    name: 'MidnightBlue',
    hex: '#191970',
    },
  {
    name: 'DarkBlue',
    hex: '#00008B',
    },
  {
    name: 'Navy',
    hex: '#000080',
    },
  {
    name: 'RoyalBlue',
    hex: '#4169E1',
    },
  {
    name: 'CornflowerBlue',
    hex: '#6495ED',
    },
  {
    name: 'LightSteelBlue',
    hex: '#B0C4DE',
    },
  {
    name: 'LightSlateGray',
    hex: '#778899',
    },
  {
    name: 'SlateGray',
    hex: '#708090',
    },
  {
    name: 'DodgerBlue',
    hex: '#1E90FF',
    },
  {
    name: 'AliceBlue',
    hex: '#F0F8FF',
    },
  {
    name: 'SteelBlue',
    hex: '#4682B4',
    },
  {
    name: 'LightSkyBlue',
    hex: '#87CEFA',
    },
  {
    name: 'SkyBlue',
    hex: '#87CEEB',
    },
  {
    name: 'DeepSkyBlue',
    hex: '#00BFFF',
    },
  {
    name: 'LightBlue',
    hex: '#ADD8E6',
    },
  {
    name: 'PowderBlue',
    hex: '#B0E0E6',
    },
  {
    name: 'CadetBlue',
    hex: '#5F9EA0',
    },
  {
    name: 'Azure',
    hex: '#F0FFFF',
    },
  {
    name: 'LightCyan',
    hex: '#E0FFFF',
    },
  {
    name: 'PaleTurquoise',
    hex: '#AFEEEE',
    },
  {
    name: 'Cyan',
    hex: '#00FFFF',
    },
  {
    name: 'Aqua',
    hex: '#00FFFF',
    },
  {
    name: 'DarkTurquoise',
    hex: '#00CED1',
    },
  {
    name: 'DarkSlateGray',
    hex: '#2F4F4F',
    },
  {
    name: 'DarkCyan',
    hex: '#008B8B',
    },
  {
    name: 'Teal',
    hex: '#008080',
    },
  {
    name: 'MediumTurquoise',
    hex: '#48D1CC',
    },
  {
    name: 'LightSeaGreen',
    hex: '#20B2AA',
    },
  {
    name: 'Turquoise',
    hex: '#40E0D0',
    },
  {
    name: 'Aquamarine',
    hex: '#7FFFD4',
    },
  {
    name: 'MediumAquamarine',
    hex: '#66CDAA',
    },
  {
    name: 'MediumSpringGreen',
    hex: '#00FA9A',
    },
  {
    name: 'MintCream',
    hex: '#F5FFFA',
    },
  {
    name: 'SpringGreen',
    hex: '#00FF7F',
    },
  {
    name: 'MediumSeaGreen',
    hex: '#3CB371',
    },
  {
    name: 'SeaGreen',
    hex: '#2E8B57',
    },
  {
    name: 'Honeydew',
    hex: '#F0FFF0',
    },
  {
    name: 'LightGreen',
    hex: '#90EE90',
    },
  {
    name: 'PaleGreen',
    hex: '#98FB98',
    },
  {
    name: 'DarkSeaGreen',
    hex: '#8FBC8F',
    },
  {
    name: 'LimeGreen',
    hex: '#32CD32',
    },
  {
    name: 'Lime',
    hex: '#00FF00',
    },
  {
    name: 'ForestGreen',
    hex: '#228B22',
    },
  {
    name: 'Green',
    hex: '#008000',
    },
  {
    name: 'DarkGreen',
    hex: '#006400',
    },
  {
    name: 'Chartreuse',
    hex: '#7FFF00',
    },
  {
    name: 'LawnGreen',
    hex: '#7CFC00',
    },
  {
    name: 'GreenYellow',
    hex: '#ADFF2F',
    },
  {
    name: 'DarkOliveGreen',
    hex: '#556B2F',
    },
  {
    name: 'YellowGreen',
    hex: '#9ACD32',
    },
  {
    name: 'OliveDrab',
    hex: '#6B8E23',
    },
  {
    name: 'Beige',
    hex: '#F5F5DC',
    },
  {
    name: 'LightGoldenrodYellow',
    hex: '#FAFAD2',
    },
  {
    name: 'Ivory',
    hex: '#FFFFF0',
    },
  {
    name: 'LightYellow',
    hex: '#FFFFE0',
    },
  {
    name: 'Yellow',
    hex: '#FFFF00',
    },
  {
    name: 'Olive',
    hex: '#808000',
    },
  {
    name: 'DarkKhaki',
    hex: '#BDB76B',
    },
  {
    name: 'LemonChiffon',
    hex: '#FFFACD',
    },
  {
    name: 'PaleGoldenrod',
    hex: '#EEE8AA',
    },
  {
    name: 'Khaki',
    hex: '#F0E68C',
    },
  {
    name: 'Gold',
    hex: '#FFD700',
    },
  {
    name: 'Cornsilk',
    hex: '#FFF8DC',
    },
  {
    name: 'Goldenrod',
    hex: '#DAA520',
    },
  {
    name: 'DarkGoldenrod',
    hex: '#B8860B',
    },
  {
    name: 'FloralWhite',
    hex: '#FFFAF0',
    },
  {
    name: 'OldLace',
    hex: '#FDF5E6',
    },
  {
    name: 'Wheat',
    hex: '#F5DEB3',
    },
  {
    name: 'Moccasin',
    hex: '#FFE4B5',
    },
  {
    name: 'Orange',
    hex: '#FFA500',
    },
  {
    name: 'PapayaWhip',
    hex: '#FFEFD5',
    },
  {
    name: 'BlanchedAlmond',
    hex: '#FFEBCD',
    },
  {
    name: 'NavajoWhite',
    hex: '#FFDEAD',
    },
  {
    name: 'AntiqueWhite',
    hex: '#FAEBD7',
    },
  {
    name: 'Tan',
    hex: '#D2B48C',
    },
  {
    name: 'BurlyWood',
    hex: '#DEB887',
    },
  {
    name: 'Bisque',
    hex: '#FFE4C4',
    },
  {
    name: 'DarkOrange',
    hex: '#FF8C00',
    },
  {
    name: 'Linen',
    hex: '#FAF0E6',
    },
  {
    name: 'Peru',
    hex: '#CD853F',
    },
  {
    name: 'PeachPuff',
    hex: '#FFDAB9',
    },
  {
    name: 'SandyBrown',
    hex: '#F4A460',
    },
  {
    name: 'Chocolate',
    hex: '#D2691E',
    },
  {
    name: 'SaddleBrown',
    hex: '#8B4513',
    },
  {
    name: 'Seashell',
    hex: '#FFF5EE',
    },
  {
    name: 'Sienna',
    hex: '#A0522D',
    },
  {
    name: 'LightSalmon',
    hex: '#FFA07A',
    },
  {
    name: 'Coral',
    hex: '#FF7F50',
    },
  {
    name: 'OrangeRed',
    hex: '#FF4500',
    },
  {
    name: 'DarkSalmon',
    hex: '#E9967A',
    },
  {
    name: 'Tomato',
    hex: '#FF6347',
    },
  {
    name: 'MistyRose',
    hex: '#FFE4E1',
    },
  {
    name: 'Salmon',
    hex: '#FA8072',
    },
  {
    name: 'Snow',
    hex: '#FFFAFA',
    },
  {
    name: 'LightCoral',
    hex: '#F08080',
    },
  {
    name: 'RosyBrown',
    hex: '#BC8F8F',
    },
  {
    name: 'IndianRed',
    hex: '#CD5C5C',
    },
  {
    name: 'Red',
    hex: '#FF0000',
    },
  {
    name: 'Brown',
    hex: '#A52A2A',
    },
  {
    name: 'FireBrick',
    hex: '#B22222',
    },
  {
    name: 'DarkRed',
    hex: '#8B0000',
    },
  {
    name: 'Maroon',
    hex: '#800000',
    },
  {
    name: 'White',
    hex: '#FFFFFF',
    },
  {
    name: 'WhiteSmoke',
    hex: '#F5F5F5',
    },
  {
    name: 'Gainsboro',
    hex: '#DCDCDC',
    },
  {
    name: 'LightGrey',
    hex: '#D3D3D3',
    },
  {
    name: 'Silver',
    hex: '#C0C0C0',
    },
  {
    name: 'DarkGray',
    hex: '#A9A9A9',
    },
  {
    name: 'Gray',
    hex: '#808080',
    },
  {
    name: 'DimGray',
    hex: '#696969',
    },
  {
    name: 'Black',
    hex: '#000000',
  }
];

/* Checkboxes */
var Checkbox = React.createClass({
  
  getInitialState: function() {
    // we ONLY set the initial state from the props
    return { checked: this.props.initialChecked };
  },

  handleChange: function(){
    var newState = !this.state.checked;
    this.setState({ checked: newState });
    this.props.callbackParent(newState); // hey parent, I've changed!
  },

  render: function(){
    var labelStyle = this.state.checked ? ' checked' : '';

    return (
      <div className="toggle">
        <label 
          for={this.props.id}
          className={"toggle-label " + labelStyle}
          id={this.props.id}      
        >
          <input
            onClick={this.handleChange}      
            id={this.props.id}
            type="checkbox"
            className="toggle-input"
            defaultChecked={this.state.checked}
            ref="complete"
          />      
            {this.props.text}
        </label>
    </div>
    );
  }
});


/* Color */
var Color = React.createClass({

  getInitialState: function() {
    return {
      value: this.props.color,
      clicked: false
    };
  },

  handleClick() {
    var copyTextarea = React.findDOMNode(this.refs.colorText);
    copyTextarea.select();

    var isClicked = true;
    this.setState({ clicked: isClicked });
    console.log('clicked ' + this.state.clicked);

    try {
      var successful = document.execCommand('copy');
      var msg = successful ? this.props.color : 'unsuccessful';
      console.log('Copied ' + msg);
    } catch (err) {
      console.log('Oops, unable to copy');
    }
  },

  handleMouseLeave() {
    var isClicked = false;
    this.setState({ clicked: isClicked });
  },

  render: function() {
    var clickedClass = this.state.clicked ? ' clicked' : '';

    var value = this.state.value;

    var buttonColor = {
      backgroundColor: this.props.color
    };

    var isClicked = this.state.clicked ? true : false;

    var copyIcon = `
      <svg class="svg" viewBox="0 0 30 30" preserveAspectRatio="xMidYMid meet">
        <path class="path1" stroke="#000000" d="M704 128h-128v-64c0-35.2-28.8-64-64-64h-128c-35.204 0-64 28.8-64 64v64h-128v128h512v-128zM512 128h-128v-63.886c0.034-0.038 0.072-0.078 0.114-0.114h127.768c0.042 0.036 0.082 0.076 0.118 0.114v63.886zM832 320v-160c0-17.6-14.4-32-32-32h-64v64h32v128h-192l-192 192v256h-256v-576h32v-64h-64c-17.602 0-32 14.4-32 32v640c0 17.6 14.398 32 32 32h288v192h640v-704h-192zM576 410.51v101.49h-101.49l101.49-101.49zM960 960h-512v-384h192v-192h320v576z"></path>
      </svg>
   `;

    var copiedIcon = `
      <svg class="svg" viewBox="0 0 30 30" preserveAspectRatio="xMidYMid meet">
        <path class="path1" d="M928 128h-288c0-70.692-57.306-128-128-128-70.692 0-128 57.308-128 128h-288c-17.672 0-32 14.328-32 32v832c0 17.674 14.328 32 32 32h832c17.674 0 32-14.326 32-32v-832c0-17.672-14.326-32-32-32zM512 64c35.346 0 64 28.654 64 64s-28.654 64-64 64c-35.346 0-64-28.654-64-64s28.654-64 64-64zM896 960h-768v-768h128v96c0 17.672 14.328 32 32 32h448c17.674 0 32-14.328 32-32v-96h128v768z"></path>
        <path class="path2" d="M448 858.51l-205.254-237.254 58.508-58.51 146.746 114.744 274.742-242.744 58.514 58.508z"></path>
      </svg>
    `;

    return (
      <li className={"color color-" + this.props.id}>
        <h2 className={"color-name color-name-" + this.props.id}>
          {this.props.color}
        </h2>
        <h2 className={"hex-code hex-code-" + this.props.id}>
          {this.props.hex}
        </h2>      
        <textarea
          className="js-copytextarea"
          value={value}
          ref="colorText"
          onChange={this.handleChange}
        />

        <button
          className="color-button js-textareacopybtn"
          style={buttonColor}
          onClick={this.handleClick}
          onMouseLeave={this.handleMouseLeave}
        >
          <span className={"button-content-wrap" + clickedClass }>
            {
              isClicked ||
              <div
                className="copy-icon"
                dangerouslySetInnerHTML={{__html: copyIcon }}
              />
            }
            {
              isClicked &&
              <div
                className="copy-icon"
                dangerouslySetInnerHTML={{__html: copiedIcon }}
              />
            }
            {this.props.color}
          </span>

          </button>
      </li>
    );
  }
});


/* Colors */
var Colors = React.createClass({

  getDefaultProps: function () {
    return {
      config: x11List
    }
  },

  propTypes: {
    config: React.PropTypes.array
  },

  getInitialState: function() {
      return { 
        namesChecked: false, 
        hexChecked: false,        
      };
  },

  onNameChanged: function(newState) {
      this.setState({ namesChecked: newState });
  },  
  

  onHexChanged: function(newState) {
      this.setState({ hexChecked: newState });
  },  
  
  render: function () {
    var config = this.props.config;

    var colors = config.map(function (color, i) {

      return (
        <Color color={color.name} hex={color.hex} id={i} />
      );
    });

    var showNames = this.state.namesChecked ? 'show-names ' : '';
    var showHex = this.state.hexChecked ? 'show-hex ' : '';    
    
    return (
      <section>
        <header className="section-header">
          <h1 className="section-title">X11 Color Names</h1>
          <div className="display-options">
            <Checkbox
              key="toggle-names"
              text="Color names"
              id="color-names"
              initialChecked={this.state.namesChecked}
              callbackParent={this.onNameChanged}
            />
            <Checkbox
              key="toggle-hex"
              text="Hex codes"
              id="hex-codes"
              initialChecked={this.state.hexChecked}
              callbackParent={this.onHexChanged}
            />
          </div>
        </header>
        <ul 
          className={"colors " + showNames + showHex }
        >
          { colors }
        </ul>
      </section>
    );
  }
});




React.render( < Colors / > , document.getElementById('main'));
              
            
!
999px

Console