Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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

              
                - ["B0C4DE","F08080","556B2F","D2691E","3CB371","6B8E23","BC8F8F","0000FF","FF69B4","808080","2F4F4F","F0FFF0","F0FFFF","0000CD","6A5ACD","D2B48C","DB7093","98FB98","7CFC00","9400D3","F5FFFA","8A2BE2","CD853F","A0522D","BA55D3","FF4500","9932CC","00BFFF","9370DB","FFF8DC","800000","FFA07A","FFF5EE","2E8B57","008000","B22222","4682B4","E9967A","AFEEEE","C0C0C0","228B22","F8F8FF","800080","FFE4B5","778899","4169E1","008080","00FF7F","191970","FAEBD7","EE82EE","006400","00FF00","8B008B","FFD700","EEE8AA","FFEBCD","9ACD32","FFE4E1","FFFACD","FAFAD2","48D1CC","87CEFA","ADD8E6","1E90FF","708090","FDF5E6","F4A460","C71585","E0FFFF","F5F5DC","FFDEAD","FFF0F5","FFC0CB","7B68EE","40E0D0","4B0082","ADFF2F","87CEEB","FF7F50","A9A9A9","6495ED","E6E6FA","7FFF00","FF0000","008B8B","DEB887","B0E0E6","696969","00CED1","DDA0DD","808000","90EE90","F5DEB3","8B4513","8FBC8F","DA70D6","FF6347","66CDAA","5F9EA0","FA8072","FAF0E6","B8860B","FF8C00","FFFFFF","CD5C5C","000080","000000","FFE4C4","DCDCDC","FFFF00","8B0000","FFFFE0","FFDAB9","A52A2A","FFFAFA","00FFFF","00008B","DC143C","00FA9A","FFEFD5","FFA500","32CD32","BDB76B","DAA520","7FFFD4","FF00FF","FFFAF0","D3D3D3","FFFFF0","483D8B","00FFFF","F0F8FF","FF1493","D8BFD8","F0E68C","FF00FF","FFB6C1","20B2AA","F5F5F5"].each do |i|
  %div{:class => "background-#{i}"} ##{i}
              
            
!

CSS

              
                .text-contrast(@background) when (hsvvalue(@background) > 50) {
	color: #000;
}
.text-contrast(@background) when (hsvvalue(@background) < 51) {
	color: #FFF;
}
div {
  width: 80px;
  height: 50px;
  padding: 5px 10px;
  margin: 5px;
  text-align: center;
  line-height: 50px;
  border: 1px solid #999;
  font-size: 16px;
  display: inline-block;
  font-weight: bold;
}

.background-B0C4DE { background: #B0C4DE; .text-contrast(#B0C4DE); }
.background-F08080 { background: #F08080; .text-contrast(#F08080); }
.background-556B2F { background: #556B2F; .text-contrast(#556B2F); }
.background-D2691E { background: #D2691E; .text-contrast(#D2691E); }
.background-3CB371 { background: #3CB371; .text-contrast(#3CB371); }
.background-6B8E23 { background: #6B8E23; .text-contrast(#6B8E23); }
.background-BC8F8F { background: #BC8F8F; .text-contrast(#BC8F8F); }
.background-0000FF { background: #0000FF; .text-contrast(#0000FF); }
.background-FF69B4 { background: #FF69B4; .text-contrast(#FF69B4); }
.background-808080 { background: #808080; .text-contrast(#808080); }
.background-2F4F4F { background: #2F4F4F; .text-contrast(#2F4F4F); }
.background-F0FFF0 { background: #F0FFF0; .text-contrast(#F0FFF0); }
.background-F0FFFF { background: #F0FFFF; .text-contrast(#F0FFFF); }
.background-0000CD { background: #0000CD; .text-contrast(#0000CD); }
.background-6A5ACD { background: #6A5ACD; .text-contrast(#6A5ACD); }
.background-D2B48C { background: #D2B48C; .text-contrast(#D2B48C); }
.background-DB7093 { background: #DB7093; .text-contrast(#DB7093); }
.background-98FB98 { background: #98FB98; .text-contrast(#98FB98); }
.background-7CFC00 { background: #7CFC00; .text-contrast(#7CFC00); }
.background-9400D3 { background: #9400D3; .text-contrast(#9400D3); }
.background-F5FFFA { background: #F5FFFA; .text-contrast(#F5FFFA); }
.background-8A2BE2 { background: #8A2BE2; .text-contrast(#8A2BE2); }
.background-CD853F { background: #CD853F; .text-contrast(#CD853F); }
.background-A0522D { background: #A0522D; .text-contrast(#A0522D); }
.background-BA55D3 { background: #BA55D3; .text-contrast(#BA55D3); }
.background-FF4500 { background: #FF4500; .text-contrast(#FF4500); }
.background-9932CC { background: #9932CC; .text-contrast(#9932CC); }
.background-00BFFF { background: #00BFFF; .text-contrast(#00BFFF); }
.background-9370DB { background: #9370DB; .text-contrast(#9370DB); }
.background-FFF8DC { background: #FFF8DC; .text-contrast(#FFF8DC); }
.background-800000 { background: #800000; .text-contrast(#800000); }
.background-FFA07A { background: #FFA07A; .text-contrast(#FFA07A); }
.background-FFF5EE { background: #FFF5EE; .text-contrast(#FFF5EE); }
.background-2E8B57 { background: #2E8B57; .text-contrast(#2E8B57); }
.background-008000 { background: #008000; .text-contrast(#008000); }
.background-B22222 { background: #B22222; .text-contrast(#B22222); }
.background-4682B4 { background: #4682B4; .text-contrast(#4682B4); }
.background-E9967A { background: #E9967A; .text-contrast(#E9967A); }
.background-AFEEEE { background: #AFEEEE; .text-contrast(#AFEEEE); }
.background-C0C0C0 { background: #C0C0C0; .text-contrast(#C0C0C0); }
.background-228B22 { background: #228B22; .text-contrast(#228B22); }
.background-F8F8FF { background: #F8F8FF; .text-contrast(#F8F8FF); }
.background-800080 { background: #800080; .text-contrast(#800080); }
.background-FFE4B5 { background: #FFE4B5; .text-contrast(#FFE4B5); }
.background-778899 { background: #778899; .text-contrast(#778899); }
.background-4169E1 { background: #4169E1; .text-contrast(#4169E1); }
.background-008080 { background: #008080; .text-contrast(#008080); }
.background-00FF7F { background: #00FF7F; .text-contrast(#00FF7F); }
.background-191970 { background: #191970; .text-contrast(#191970); }
.background-FAEBD7 { background: #FAEBD7; .text-contrast(#FAEBD7); }
.background-EE82EE { background: #EE82EE; .text-contrast(#EE82EE); }
.background-006400 { background: #006400; .text-contrast(#006400); }
.background-00FF00 { background: #00FF00; .text-contrast(#00FF00); }
.background-8B008B { background: #8B008B; .text-contrast(#8B008B); }
.background-FFD700 { background: #FFD700; .text-contrast(#FFD700); }
.background-EEE8AA { background: #EEE8AA; .text-contrast(#EEE8AA); }
.background-FFEBCD { background: #FFEBCD; .text-contrast(#FFEBCD); }
.background-9ACD32 { background: #9ACD32; .text-contrast(#9ACD32); }
.background-FFE4E1 { background: #FFE4E1; .text-contrast(#FFE4E1); }
.background-FFFACD { background: #FFFACD; .text-contrast(#FFFACD); }
.background-FAFAD2 { background: #FAFAD2; .text-contrast(#FAFAD2); }
.background-48D1CC { background: #48D1CC; .text-contrast(#48D1CC); }
.background-87CEFA { background: #87CEFA; .text-contrast(#87CEFA); }
.background-ADD8E6 { background: #ADD8E6; .text-contrast(#ADD8E6); }
.background-1E90FF { background: #1E90FF; .text-contrast(#1E90FF); }
.background-708090 { background: #708090; .text-contrast(#708090); }
.background-FDF5E6 { background: #FDF5E6; .text-contrast(#FDF5E6); }
.background-F4A460 { background: #F4A460; .text-contrast(#F4A460); }
.background-C71585 { background: #C71585; .text-contrast(#C71585); }
.background-E0FFFF { background: #E0FFFF; .text-contrast(#E0FFFF); }
.background-F5F5DC { background: #F5F5DC; .text-contrast(#F5F5DC); }
.background-FFDEAD { background: #FFDEAD; .text-contrast(#FFDEAD); }
.background-FFF0F5 { background: #FFF0F5; .text-contrast(#FFF0F5); }
.background-FFC0CB { background: #FFC0CB; .text-contrast(#FFC0CB); }
.background-7B68EE { background: #7B68EE; .text-contrast(#7B68EE); }
.background-40E0D0 { background: #40E0D0; .text-contrast(#40E0D0); }
.background-4B0082 { background: #4B0082; .text-contrast(#4B0082); }
.background-ADFF2F { background: #ADFF2F; .text-contrast(#ADFF2F); }
.background-87CEEB { background: #87CEEB; .text-contrast(#87CEEB); }
.background-FF7F50 { background: #FF7F50; .text-contrast(#FF7F50); }
.background-A9A9A9 { background: #A9A9A9; .text-contrast(#A9A9A9); }
.background-6495ED { background: #6495ED; .text-contrast(#6495ED); }
.background-E6E6FA { background: #E6E6FA; .text-contrast(#E6E6FA); }
.background-7FFF00 { background: #7FFF00; .text-contrast(#7FFF00); }
.background-FF0000 { background: #FF0000; .text-contrast(#FF0000); }
.background-008B8B { background: #008B8B; .text-contrast(#008B8B); }
.background-DEB887 { background: #DEB887; .text-contrast(#DEB887); }
.background-B0E0E6 { background: #B0E0E6; .text-contrast(#B0E0E6); }
.background-696969 { background: #696969; .text-contrast(#696969); }
.background-00CED1 { background: #00CED1; .text-contrast(#00CED1); }
.background-DDA0DD { background: #DDA0DD; .text-contrast(#DDA0DD); }
.background-808000 { background: #808000; .text-contrast(#808000); }
.background-90EE90 { background: #90EE90; .text-contrast(#90EE90); }
.background-F5DEB3 { background: #F5DEB3; .text-contrast(#F5DEB3); }
.background-8B4513 { background: #8B4513; .text-contrast(#8B4513); }
.background-8FBC8F { background: #8FBC8F; .text-contrast(#8FBC8F); }
.background-DA70D6 { background: #DA70D6; .text-contrast(#DA70D6); }
.background-FF6347 { background: #FF6347; .text-contrast(#FF6347); }
.background-66CDAA { background: #66CDAA; .text-contrast(#66CDAA); }
.background-5F9EA0 { background: #5F9EA0; .text-contrast(#5F9EA0); }
.background-FA8072 { background: #FA8072; .text-contrast(#FA8072); }
.background-FAF0E6 { background: #FAF0E6; .text-contrast(#FAF0E6); }
.background-B8860B { background: #B8860B; .text-contrast(#B8860B); }
.background-FF8C00 { background: #FF8C00; .text-contrast(#FF8C00); }
.background-FFFFFF { background: #FFFFFF; .text-contrast(#FFFFFF); }
.background-CD5C5C { background: #CD5C5C; .text-contrast(#CD5C5C); }
.background-000080 { background: #000080; .text-contrast(#000080); }
.background-000000 { background: #000000; .text-contrast(#000000); }
.background-FFE4C4 { background: #FFE4C4; .text-contrast(#FFE4C4); }
.background-DCDCDC { background: #DCDCDC; .text-contrast(#DCDCDC); }
.background-FFFF00 { background: #FFFF00; .text-contrast(#FFFF00); }
.background-8B0000 { background: #8B0000; .text-contrast(#8B0000); }
.background-FFFFE0 { background: #FFFFE0; .text-contrast(#FFFFE0); }
.background-FFDAB9 { background: #FFDAB9; .text-contrast(#FFDAB9); }
.background-A52A2A { background: #A52A2A; .text-contrast(#A52A2A); }
.background-FFFAFA { background: #FFFAFA; .text-contrast(#FFFAFA); }
.background-00FFFF { background: #00FFFF; .text-contrast(#00FFFF); }
.background-00008B { background: #00008B; .text-contrast(#00008B); }
.background-DC143C { background: #DC143C; .text-contrast(#DC143C); }
.background-00FA9A { background: #00FA9A; .text-contrast(#00FA9A); }
.background-FFEFD5 { background: #FFEFD5; .text-contrast(#FFEFD5); }
.background-FFA500 { background: #FFA500; .text-contrast(#FFA500); }
.background-32CD32 { background: #32CD32; .text-contrast(#32CD32); }
.background-BDB76B { background: #BDB76B; .text-contrast(#BDB76B); }
.background-DAA520 { background: #DAA520; .text-contrast(#DAA520); }
.background-7FFFD4 { background: #7FFFD4; .text-contrast(#7FFFD4); }
.background-FF00FF { background: #FF00FF; .text-contrast(#FF00FF); }
.background-FFFAF0 { background: #FFFAF0; .text-contrast(#FFFAF0); }
.background-D3D3D3 { background: #D3D3D3; .text-contrast(#D3D3D3); }
.background-FFFFF0 { background: #FFFFF0; .text-contrast(#FFFFF0); }
.background-483D8B { background: #483D8B; .text-contrast(#483D8B); }
.background-00FFFF { background: #00FFFF; .text-contrast(#00FFFF); }
.background-F0F8FF { background: #F0F8FF; .text-contrast(#F0F8FF); }
.background-FF1493 { background: #FF1493; .text-contrast(#FF1493); }
.background-D8BFD8 { background: #D8BFD8; .text-contrast(#D8BFD8); }
.background-F0E68C { background: #F0E68C; .text-contrast(#F0E68C); }
.background-FF00FF { background: #FF00FF; .text-contrast(#FF00FF); }
.background-FFB6C1 { background: #FFB6C1; .text-contrast(#FFB6C1); }
.background-20B2AA { background: #20B2AA; .text-contrast(#20B2AA); }
.background-F5F5F5 { background: #F5F5F5; .text-contrast(#F5F5F5); }
              
            
!

JS

              
                
              
            
!
999px

Console