Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              // Based on http://chrisnager.com/hexcodes/

// --------------------------------------------------
// Create a color palette of all 4,096 3-digit hexadecimal colors
// --------------------------------------------------

// Hexadecimal digits
var digits = ['f', 'e', 'd', 'c', 'b', 'a', '9', '8', '7', '6', '5', '4', '3', '2', '1', '0']

// Create a swatch book
var swatchBook = document.createElement('div')
swatchBook.id = 'swatchBook'

// Recurisvely create a swatch with each combination of hexadecimal digits from the array
digits.forEach(function(red) {
 digits.forEach(function(green) {
  digits.forEach(function(blue) {

   // Define a color using three hexadecimal digits
   var hexColor = '#' + red + green + blue

   // Create a swatch
   var swatch = document.createElement('div')
   swatch.id = 'swatch'
   swatch.style.backgroundColor = hexColor
   swatch.style.width = '100px'
   swatch.style.height = '150px'
   swatch.style.margin = '1px'
   swatch.style.padding = '10px'
   swatch.style.float = 'left'
   swatch.style.fontFamily = 'Helvetica, Arial, sans-serif'
   swatch.style.fontSize = '1em'


   // --------------------------------------------------
   // Label each swatch
   // --------------------------------------------------

   // Get the rgb value for the background color
   var backgroundColor = swatch.style.getPropertyValue("background-color")
   // Convert to an object, see function below
   var rgbColors = convertColor(backgroundColor)
   // Set text color to white or dark gray based on the brightness
   swatch.style.color = (brightness(rgbColors[0], rgbColors[1], rgbColors[2]) > 123) ? '#333' : '#fff'

   // Add label
   swatch.style.whiteSpace = 'pre' // enable line returns
   swatch.textContent = hexColor + '\r\n'
   swatch.textContent += 'r: ' + rgbColors[0] + '\r\n'
   swatch.textContent += 'g: ' + rgbColors[1] + '\r\n'
   swatch.textContent += 'b: ' + rgbColors[2] + '\r\n'
   // swatch.textContent += 'B: ' + brightness(rgbColors[0], rgbColors[1], rgbColors[2]) + '\r\n' // display the brightness value

   // Add the swatch to the swatch book
   swatchBook.appendChild(swatch)
  })
 })
})

// Display the swatch book
document.body.appendChild(swatchBook)

// --------------------------------------------------
// Get the brightness of a color
// --------------------------------------------------

// Calculate the brightness of an rgb color
function brightness(r, g, b) {
 return (r * 299 + g * 587 + b * 114) / 1000
}

// --------------------------------------------------
// Convert CSS rgbColor value to an array
// --------------------------------------------------

// Convert an rgb color into an object with 3 elements for r, g, and b
// https://www.permadi.com/tutorial/cssGettingBackgroundColor/index.html
function convertColor(color)
{
  var rgbColors=new Object();

  ///////////////////////////////////
  // Handle rgb(redValue, greenValue, blueValue) format
  //////////////////////////////////
  if (color[0]=='r')
  {
    // Find the index of the redValue.  Using subscring function to
    // get rid off "rgb(" and ")" part.
    // The indexOf function returns the index of the "(" and ")" which we
    // then use to get inner content.
    color=color.substring(color.indexOf('(')+1, color.indexOf(')'));

    // Notice here that we don't know how many digits are in each value,
    // but we know that every value is separated by a comma.
    // So split the three values using comma as the separator.
    // The split function returns an object.
    rgbColors=color.split(',', 3);

    // Convert redValue to integer
    rgbColors[0]=parseInt(rgbColors[0]);
    // Convert greenValue to integer
    rgbColors[1]=parseInt(rgbColors[1]);
    // Convert blueValue to integer
    rgbColors[2]=parseInt(rgbColors[2]);
  }

  ////////////////////////////////
  // Handle the #RRGGBB' format
  ////////////////////////////////
  else if (color.substring(0,1)=="#")
  {
    // This is simples because we know that every values is two
    // hexadecimal digits.
    rgbColors[0]=color.substring(1, 3);  // redValue
    rgbColors[1]=color.substring(3, 5);  // greenValue
    rgbColors[2]=color.substring(5, 7);  // blueValue

    // We need to convert the value into integers,
    // but the value is in hex (base 16)!
    // Fortunately, the parseInt function takes a second parameter
    // signifying the base we're converting from.
    rgbColors[0]=parseInt(rgbColors[0], 16);
    rgbColors[1]=parseInt(rgbColors[1], 16);
    rgbColors[2]=parseInt(rgbColors[2], 16);
	}
  return rgbColors;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console