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 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

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

              
                <!--DEMO - WHITE-->

<div class="container-fluid">
  <div class="container-1">
    <h1 class="text-darkest" style="margin-bottom: .8em;">
      Darkest text on white background.
    </h1>
    <p class="text-darker">
      Darker text on white background. Cat ipsum dolor sit amet, pelt around the house and up and down stairs chasing phantoms yet hide at bottom of staircase to trip human. Chase the pig around the house. Unwrap toilet paper chase imaginary bugs. Eat grass, throw it back up stare at the wall,
      play with food and get confused by dust hide from vacuum cleaner yet why must they do that plan steps for world domination. Destroy couch. Sleep nap. Chase the pig around the house. Put toy mouse in food bowl run out of litter box at full speed
      purr for no reason but scamper or under the bed, or throwup on your pillow. Brown cats with pink ears behind the couch, but scratch the furniture. Refuse to drink water except out of someone's glass kitty power! chase ball of string. Stare at wall
      turn and meow stare at wall some more meow again continue staring give attitude, and get video posted to internet for chasing red dot. 
    </p>
    <p class="text-dark" style="margin-bottom:.5em;">
      Lightest text on light background, typically used for disabled links. 
    </p>
    <div style="margin-bottom:1.5em;">

      <hr style="margin-top: 2em; margin-bottom: 2em; border-color: #ccc">
      <p class="text-darkest" style="cursor: pointer;">
        Clickable link •
      </p>
      <p class="text-dark" style="padding-left: .3em; cursor: no-drop;">
        Disabled link
      </p>
      <br>

      <small class="text-darkest" style="cursor: pointer">
        Clickable link • 
      </small>
      <small class="text-dark" style="padding-left: .3em; cursor: no-drop;" no-drop> 
        Disabled link
      </small>
      <br>
    </div>
  </div>
</div>



<!-- DEMO GRAY LIGHT -->

<div class="container-fluid primary-gray-tint3">
  <div class="col-md-6 col-sm-6 container-1">
    <h1 class="text-darkest" style="margin-bottom: .8em;">
      Darkest text on light background.
    </h1>
    <p class="text-darker">
      Darker text on light background. Cat ipsum dolor sit amet, pelt around the house and up and down stairs chasing phantoms yet hide at bottom of staircase to trip human. Chase the pig around the house. Unwrap toilet paper chase imaginary bugs. Eat grass, throw it back up stare at the wall,
      play with food and get confused by dust hide from vacuum cleaner yet why must they do that plan steps for world domination. Destroy couch. Sleep nap. Chase the pig around the house. Put toy mouse in food bowl run out of litter box at full speed
      purr for no reason but scamper or under the bed, or throwup on your pillow. Brown cats with pink ears behind the couch, but scratch the furniture. Refuse to drink water except out of someone's glass kitty power! chase ball of string. Stare at wall
      turn and meow stare at wall some more meow again continue staring give attitude, and get video posted to internet for chasing red dot. 
    </p>
    <p class="text-dark" style="margin-bottom:1.5em;">
      Lightest text on light background, typically used for disabled links. 
    </p>
    <div style="margin-bottom:1.5em;">
      <button class="btn btn-primary" style="margin-right: .5em;">Primary</button>
      <button class="btn btn-warning" style="margin-right: .5em;">Destructive</button>
      
      <br>
      <hr style="margin-top: 2em; margin-bottom: 2em; border-color: #ccc">
      <p class="text-darkest" style="cursor: pointer;">
        Clickable link •
      </p>
      <p class="text-dark" style="padding-left: .3em; cursor: no-drop;">
        Disabled link
      </p>
      <br>

      <small class="text-darkest" style="cursor: pointer">
        Clickable link • 
      </small>
      <small class="text-dark" style="padding-left: .3em; cursor: no-drop;" no-drop> 
        Disabled link
      </small>
    </div>
  </div>
  <div class="col-md-6 primary-gray-tint2" style="padding-top:3em;">
    <div class="col-centered col-md-11 primary-gray-tint1 card-1">
      <div>
        <div class="card-image-1 col-md-12"></div>
        <div style="padding: 2em 2em 1em 2em">
          <h3 class="text-darkest">
            This is an interesting thing. Darkest text.
          </h1><br>
          <p class="text-darker">
            Cat, what do you think this is? Darker text.
          </p><br>
          <p class="text-dark" style="margin-bottom:1.5em;">
            Lightest text on light background, typically used for disabled links.
          </p><br>
          <button class="btn btn-warning" style="margin-bottom:.8em; margin-right: .5em;">Primary</button>
          <button class="btn btn-primary" style="margin-bottom:.8em; margin-right: .5em;">Destructive</button>
        </div>
      </div>
    </div>
    <div class="col-centered col-md-11 card-1" style="padding-top:3em; padding-bottom: 3em;">
      <p class="text-darkest">
        Cat ipsum dolor sit amet, pelt around the house and up and down stairs chasing phantoms yet hide at bottom of staircase to trip human. Chase the pig around the house. darkest text.</p>
        <p class="text-darker">
          Cat ipsum dolor sit amet, pelt around the house and up and down stairs chasing phantoms yet hide at bottom of staircase to trip human. Chase the pig around the house. Unwrap toilet paper chase imaginary bugs. Eat grass, throw it back up stare at the wall, play with food and get confused by dust hide from vacuum cleaner yet why must they do that plan steps for world domination. Destroy couch. Sleep nap. Chase the pig around the house. Put toy mouse in food bowl run out of litter box at full speed purr for no reason but scamper or under the bed, or throwup on your pillow. Brown cats with pink ears behind the couch, but scratch the furniture. Refuse to drink water except out of someone's glass kitty power! chase ball of string. Stare at wall turn and meow stare at wall some more meow again continue staring give attitude, and get video posted to internet for chasing red dot. Darker text. 
        </p>
        <p class="text-dark" style="margin-bottom:1.5em;">
          Lightest text on light background, typically used for disabled links.
        </p><br>
        <button class="btn btn-warning" style="margin-bottom:.8em; margin-right: .5em;">Primary</button>
        <button class="btn btn-primary" style="margin-bottom:.8em; margin-right: .5em;">Destructive</button>
      </div>
    </div>
  </div>

<!-- DEMO GRAY DARK -->

<div class="container-fluid primary-gray-shade3">
  <div class="col-md-6 col-sm-6 container-1">
    <h1 class="text-lightest" style="margin-bottom: .8em;">
      Shake treat bag missing until dinner time. Lightest text.
    </h1>
    <p class="text-lighter">
      Cat ipsum dolor sit amet, pelt around the house and up and down stairs chasing phantoms yet hide at bottom of staircase to trip human. Chase the pig around the house. Unwrap toilet paper chase imaginary bugs. Eat grass, throw it back up stare at the wall,
      play with food and get confused by dust hide from vacuum cleaner yet why must they do that plan steps for world domination. Destroy couch. Sleep nap. Chase the pig around the house. Put toy mouse in food bowl run out of litter box at full speed
      purr for no reason but scamper or under the bed, or throwup on your pillow. Brown cats with pink ears behind the couch, but scratch the furniture. Refuse to drink water except out of someone's glass kitty power! chase ball of string. Stare at wall
      turn and meow stare at wall some more meow again continue staring give attitude, and get video posted to internet for chasing red dot. Lighter text.
    </p>
    <p class="text-light" style="margin-bottom:1.5em;">
      Written by Cat. Light text.
    </p>
    <div style="margin-bottom:1.5em;">
      <button class="btn btn-primary" style="margin-right: .5em;">Primary</button>
      <button class="btn btn-warning" style="margin-right: .5em;">Destructive</button>
      
            <hr style="margin-top: 2em; margin-bottom: 2em; border-color: #444;">
      <p class="text-lightest" style="cursor: pointer;">
        Clickable link •
      </p>
      <p class="text-light" style="padding-left: .3em; cursor: no-drop;">
        Disabled link
      </p>
      <br>

      <small class="text-lightest" style="cursor: pointer">
        Clickable link • 
      </small>
      <small class="text-light" style="padding-left: .3em; cursor: no-drop;" no-drop> 
        Disabled link
      </small>
      <br>
    </div>
  </div>
  <div class="col-md-6 primary-gray-shade2" style="padding-top:3em;">
    <div class="col-centered col-md-11 primary-gray-shade1 card-1">
      <div>
        <div class="card-image-1 col-md-12"></div>
        <div style="padding: 2em 2em 1em 2em">
          <h3 class="text-lightest">
            This is an interesting thing. Lightest text.
          </h1><br>
          <p class="text-lighter">
            Cat, what do you think this is? Lighter text.
          </p><br>
          <p class="text-light" style="margin-bottom:1.5em;">
            Thoughts at midnight. Light text. 
          </p><br>
          <button class="btn btn-warning" style="margin-bottom:.8em; margin-right: .5em;">Primary</button>
          <button class="btn btn-primary" style="margin-bottom:.8em; margin-right: .5em;">Destructive</button>
        </div>
      </div>
    </div>
    <div class="col-centered col-md-11 card-1" style="padding-top:3em; padding-bottom: 3em;">
      <p class="text-lightest">
        Cat ipsum dolor sit amet, pelt around the house and up and down stairs chasing phantoms yet hide at bottom of staircase to trip human. Chase the pig around the house. Lightest text.</p>
        <p class="text-lighter">
          Cat ipsum dolor sit amet, pelt around the house and up and down stairs chasing phantoms yet hide at bottom of staircase to trip human. Chase the pig around the house. Unwrap toilet paper chase imaginary bugs. Eat grass, throw it back up stare at the wall, play with food and get confused by dust hide from vacuum cleaner yet why must they do that plan steps for world domination. Destroy couch. Sleep nap. Chase the pig around the house. Put toy mouse in food bowl run out of litter box at full speed purr for no reason but scamper or under the bed, or throwup on your pillow. Brown cats with pink ears behind the couch, but scratch the furniture. Refuse to drink water except out of someone's glass kitty power! chase ball of string. Stare at wall turn and meow stare at wall some more meow again continue staring give attitude, and get video posted to internet for chasing red dot. Lighter text. 
        </p>
        <p class="text-light" style="margin-bottom:1.5em;">
          Written by Cat. Light text.
        </p><br>
        <button class="btn btn-warning" style="margin-bottom:.8em; margin-right: .5em;">Primary</button>
        <button class="btn btn-primary" style="margin-bottom:.8em; margin-right: .5em;">Destructive</button>
      </div>
    </div>
  </div>

  
  <!--SWATCHES-->
  
  <div class="container-fluid" style="padding:3em 3em 3em 3em;">

    <!--GRAYS-->
    <div class="col-md-4 col-sm-2 col-xs-12">
      <div class="primary-gray-tint3 swatch">
        <p class="text-dark">Light 1</p>
        <p class="text-darker">• Light 2</p>
        <p class="text-darkest">• Light 3</p>
      </div>
      <div class="primary-gray-tint2 swatch">
        <p class="text-dark">Light 1</p>
        <p class="text-darker">• Light 2</p>
        <p class="text-darkest">• Light 3</p>
      </div>
      <div class="primary-gray-tint1 swatch">
        <p class="text-dark">Light 1</p>
        <p class="text-darker">• Light 2</p>
        <p class="text-darkest">• Light 3</p>
      </div>
      <div class="primary-gray-base swatch">
        <p class="text-lightest">Gray base</p>
      </div>
      <div class="primary-gray-shade1 swatch">
        <p class="text-light">Dark 1</p>
        <p class="text-lighter">• Dark 2</p>
        <p class="text-lightest">• Dark 3</p>
      </div>
      <div class="primary-gray-shade2 swatch">
        <p class="text-light">Dark 1</p>
        <p class="text-lighter">• Dark 2</p>
        <p class="text-lightest">• Dark 3</p>
      </div>
      <div class="primary-gray-shade3 swatch">
        <p class="text-light">Dark 1</p>
        <p class="text-lighter">• Dark 2</p>
        <p class="text-lightest">• Dark 3</p>
      </div>
    </div>

    <!--BLUES-->
    <div class="col-md-4 col-sm-2 col-xs-12">
      <div class="primary-blue-tint3 swatch">
        <p class="text-dark">Light 1</p>
        <p class="text-darker">• Light 2</p>
        <p class="text-darkest">• Light 3</p>
      </div>
      <div class="primary-blue-tint2 swatch">
        <p class="text-dark">Light 1</p>
        <p class="text-darker">• Light 2</p>
        <p class="text-darkest">• Light 3</p>
      </div>
      <div class="primary-blue-tint1 swatch">
        <p class="text-dark">Light 1</p>
        <p class="text-darker">• Light 2</p>
        <p class="text-darkest">• Light 3</p>
      </div>
      <div class="primary-blue-dark-base swatch">
        <p class="text-lightest">Dark base blue</p>
      </div>
      <div class="primary-blue-base swatch">
        <p class="text-lightest">Base blue</p>
      </div>
      <div class="primary-blue-shade1 swatch">
        <p class="text-light">Dark 1</p>
        <p class="text-lighter">• Dark 2</p>
        <p class="text-lightest">• Dark 3</p>
      </div>
      <div class="primary-blue-shade2 swatch">
        <p class="text-light">Dark 2</p>
        <p class="text-lighter">• Dark 2</p>
        <p class="text-lightest">• Dark 3</p>
      </div>
      <div class="primary-blue-shade3 swatch">
        <p class="text-light">Dark 1</p>
        <p class="text-lighter">• Dark 2</p>
        <p class="text-lightest">• Dark 3</p>
      </div>
      <div class="primary-blue-accent swatch">
        <p class="text-lightest">Accent blue</p>
      </div>
    </div>

    <!--REDS-->
    <div class="col-md-4 col-sm-2 col-xs-12">
      <div class="primary-red-tint3 swatch">
        <p class="text-dark">Light 1</p>
        <p class="text-darker">• Light 2</p>
        <p class="text-darkest">• Light 3</p>
      </div>
      <div class="primary-red-tint2 swatch">
        <p class="text-dark">Light 1</p>
        <p class="text-darker">• Light 2</p>
        <p class="text-darkest">• Light 3</p>
      </div>
      <div class="primary-red-tint1 swatch">
        <p class="text-dark">Light 1</p>
        <p class="text-darker">• Light 2</p>
        <p class="text-darkest">• Light 3</p>
      </div>
      <div class="primary-red-base swatch">
        <p class="text-lightest">Red base</p>
      </div>
      <div class="primary-red-shade1 swatch">
        <p class="text-light">Dark 1</p>
        <p class="text-lighter">• Dark 2</p>
        <p class="text-lightest">• Dark 3</p>
      </div>
      <div class="primary-red-shade2 swatch">
        <p class="text-light">Dark 1</p>
        <p class="text-lighter">• Dark 2</p>
        <p class="text-lightest">• Dark 3</p>
      </div>
      <div class="primary-red-shade3 swatch">
        <p class="text-light">Dark 1</p>
        <p class="text-lighter">• Dark 3</p>
        <p class="text-lightest">• Dark 2</p>
      </div>
      <div class="primary-red-accent swatch">
        <p class="text-lightest">Red accent</p>
      </div>
    </div>
    
    <!--GREENS-->
    <div class="col-md-4 col-sm-2 col-xs-12">
      <div class="primary-green-tint3 swatch">
        <p class="text-dark">Light 1</p>
        <p class="text-darker">• Light 2</p>
        <p class="text-darkest">• Light 3</p>
      </div>
      <div class="primary-green-tint2 swatch">
        <p class="text-dark">Light 1</p>
        <p class="text-darker">• Light 2</p>
        <p class="text-darkest">• Light 3</p>
      </div>
      <div class="primary-green-tint1 swatch">
        <p class="text-dark">Light 1</p>
        <p class="text-darker">• Light 2</p>
        <p class="text-darkest">• Light 3</p>
      </div>
      <div class="primary-green-base swatch">
        <p class="text-lightest">Base green</p>
      </div>
      <div class="primary-green-shade1 swatch">
        <p class="text-light">Dark 1</p>
        <p class="text-lighter">• Dark 2</p>
        <p class="text-lightest">• Dark 3</p>
      </div>
      <div class="primary-green-shade2 swatch">
        <p class="text-light">Dark 2</p>
        <p class="text-lighter">• Dark 2</p>
        <p class="text-lightest">• Dark 3</p>
      </div>
      <div class="primary-green-shade3 swatch">
        <p class="text-light">Dark 1</p>
        <p class="text-lighter">• Dark 2</p>
        <p class="text-lightest">• Dark 3</p>
      </div>
      <div class="primary-green-accent swatch">
        <p class="text-lightest">Accent green</p>
      </div>
    </div>
    
    
    <!--YELLOWS-->
<!--    <div class="col-md-4 col-sm-2 col-xs-12">
      <div class="primary-yellow-tint3 swatch">
        <p class="text-dark">Light 1</p>
        <p class="text-darker">• Light 2</p>
        <p class="text-darkest">• Light 3</p>
      </div>
      <div class="primary-yellow-tint2 swatch">
        <p class="text-dark">Light 1</p>
        <p class="text-darker">• Light 2</p>
        <p class="text-darkest">• Light 3</p>
      </div>
      <div class="primary-yellow-tint1 swatch">
        <p class="text-dark">Light 1</p>
        <p class="text-darker">• Light 2</p>
        <p class="text-darkest">• Light 3</p>
      </div>
      <div class="primary-yellow-base swatch">
        <p class="text-lightest">Base yellow</p>
      </div>
      <div class="primary-yellow-shade1 swatch">
        <p class="text-light">Dark 1</p>
        <p class="text-lighter">• Dark 2</p>
        <p class="text-lightest">• Dark 3</p>
      </div>
      <div class="primary-yellow-shade2 swatch">
        <p class="text-light">Dark 2</p>
        <p class="text-lighter">• Dark 2</p>
        <p class="text-lightest">• Dark 3</p>
      </div>
      <div class="primary-yellow-shade3 swatch">
        <p class="text-light">Dark 1</p>
        <p class="text-lighter">• Dark 2</p>
        <p class="text-lightest">• Dark 3</p>
      </div>
      <div class="primary-yellow-accent swatch">
        <p class="text-lightest">Accent yellow</p>
      </div>
    </div>
-->


    </div>
              
            
!

CSS

              
                /*GRAYS*/
@primary-gray-tint3: #F9F9F9;
@primary-gray-tint2: lighten(@primary-gray-base, 59%);
@primary-gray-tint1: lighten(@primary-gray-base, 52%);
@primary-gray-base: #555;
@primary-gray-shade1: darken(@primary-gray-base, 13.5%);
@primary-gray-shade2: darken(@primary-gray-base, 20%);
@primary-gray-shade3: #111;

/*BLUES*/
@primary-blue-tint3: lighten(@primary-blue-base, 66%);
@primary-blue-tint2: lighten(@primary-blue-base, 62%);
@primary-blue-tint1: lighten(@primary-blue-base, 56%);
@primary-blue-base: #165C91;
@primary-blue-dark-base: lighten(@primary-blue-base, 40%);
@primary-blue-shade1: darken(@primary-blue-base, 15%);
@primary-blue-shade2: darken(@primary-blue-base, 20%);
@primary-blue-shade3: darken(@primary-blue-base, 25%);
@primary-blue-accent: #347bff;

@disabled-blue-text: tint(@primary-blue-accent, 20%);


/*REDS*/
@primary-red-tint3: lighten(@primary-red-base, 59%);
@primary-red-tint2: lighten(@primary-red-base, 56%);
@primary-red-tint1: lighten(@primary-red-base, 51%);
@primary-red-base: #AB1F1D;
@primary-red-shade1: darken(@primary-red-base, 17%);
@primary-red-shade2: darken(@primary-red-base, 24%);
@primary-red-shade3: darken(@primary-red-base, 30%);
@primary-red-accent: #d11d13;

@disabled-red-text: tint(@primary-red-accent, 40%);

/*GREEN*/
@primary-green-tint3: lighten(@primary-green-base, 74%);
@primary-green-tint2: lighten(@primary-green-base, 69%);
@primary-green-tint1: lighten(@primary-green-base, 62%);
@primary-green-base: #195a59;
@primary-green-shade1: darken(@primary-green-base, 11%);
@primary-green-shade2: darken(@primary-green-base, 16%);
@primary-green-shade3: darken(@primary-green-base, 20%);
@primary-green-accent: #00af89;

@disabled-green-text: tint(@primary-green-accent, 50%);

/*YELLOW*/
@primary-yellow-tint3: lighten(@primary-yellow-base, 74%);
@primary-yellow-tint2: lighten(@primary-yellow-base, 69%);
@primary-yellow-tint1: lighten(@primary-yellow-base, 62%);
@primary-yellow-base: #195a59;
@primary-yellow-shade1: darken(@primary-green-base, 11%);
@primary-yellow-shade2: darken(@primary-green-base, 16%);
@primary-yellow-shade3: darken(@primary-green-base, 20%);
@primary-yellow-accent: #ffb50d;


/*LIGHT - GRAY ----------------------*/

.primary-gray-tint1 {
  background-color: @primary-gray-tint1;
}
.primary-gray-tint2 {
  background-color: @primary-gray-tint2;
}
.primary-gray-tint3 {
  background-color: @primary-gray-tint3;
}
.primary-gray-base {
  background-color: @primary-gray-base;
}

/*DARK - GRAY*/

.primary-gray-base {
  background-color: @primary-gray-base;
}
.primary-gray-shade1 {
  background-color: @primary-gray-shade1;
}
.primary-gray-shade2 {
  background-color: @primary-gray-shade2;
}
.primary-gray-shade3 {
  background-color: @primary-gray-shade3;
}


/*LIGHT - BLUE ----------------------*/

.primary-blue-tint1 {
  background-color: @primary-blue-tint1;
}
.primary-blue-tint2 {
  background-color: @primary-blue-tint2;
}
.primary-blue-tint3 {
  background-color: @primary-blue-tint3;
}
.primary-blue-base {
  background-color: @primary-blue-base;
}
.primary-blue-dark-base {
  background-color: @primary-blue-dark-base;
}

/*DARK - BLUE*/
.primary-blue-shade1 {
  background-color: @primary-blue-shade1;
}
.primary-blue-shade2 {
  background-color: @primary-blue-shade2;
}
.primary-blue-shade3 {
  background-color: @primary-blue-shade3;
}
.primary-blue-accent {
  background-color: @primary-blue-accent;
}


/*LIGHT - RED ----------------------*/

.primary-red-tint1 {
  background-color: @primary-red-tint1;
}
.primary-red-tint2 {
  background-color: @primary-red-tint2;
}
.primary-red-tint3 {
  background-color: @primary-red-tint3;
}
.primary-red-base {
  background-color: @primary-red-base;
}

/*DARK - RED*/

.primary-red-shade1 {
  background-color: @primary-red-shade1;
}
.primary-red-shade2 {
  background-color: @primary-red-shade2;
}
.primary-red-shade3 {
  background-color: @primary-red-shade3;
}
.primary-red-accent {
  background-color: @primary-red-accent;
}

/*LIGHT - GREEN ----------------------*/

.primary-green-tint1 {
  background-color: @primary-green-tint1;
}
.primary-green-tint2 {
  background-color: @primary-green-tint2;
}
.primary-green-tint3 {
  background-color: @primary-green-tint3;
}
.primary-green-base {
  background-color: @primary-green-base;
}

/*DARK - GREEN*/
.primary-green-shade1 {
  background-color: @primary-green-shade1;
}
.primary-green-shade2 {
  background-color: @primary-green-shade2;
}
.primary-green-shade3 {
  background-color: @primary-green-shade3;
}
.primary-green-accent {
  background-color: @primary-green-accent;
}


/*LIGHT - YELLOW ----------------------*/

.primary-yellow-tint1 {
  background-color: @primary-yellow-tint1;
}
.primary-yellow-tint2 {
  background-color: @primary-yellow-tint2;
}
.primary-yellow-tint3 {
  background-color: @primary-blue-tint3;
}
.primary-yellow-base {
  background-color: @primary-yellow-base;
}

/*DARK - YELLOW*/
.primary-yellow-shade1 {
  background-color: @primary-yellow-shade1;
}
.primary-yellow-shade2 {
  background-color: @primary-yellow-shade2;
}
.primary-yellow-shade3 {
  background-color: @primary-yellow-shade3;
}
.primary-yellow-accent {
  background-color: @primary-yellow-accent;
}


/*DARK - TEXT*/
.text-dark{
  color: #888;
  display: inline-block;
}
.text-darker{
  color: #222;
  display: inline-block;
}
.text-darkest{
  color: #000;
  display: inline-block;
}

/*LIGHT - TEXT*/
.text-light{
  color: #ccc;
  display: inline-block;
}
.text-lighter{
  color: #E5E5E5;
  display: inline-block;
}
.text-lightest{
  color: #F9F9F9;
  display: inline-block;
}

/*DARK - BLUE TEXT*/
.text-blue-darkest {
  color: @primary-blue-accent;
  display: inline-block;
}
.text-blue-dark {
  color: @disabled-blue-text;
  display: inline-block;
}

/*DARK - RED TEXT*/
.text-red-darkest {
  color: @primary-red-accent;
  display: inline-block;
}
.text-red-dark {
  color: @disabled-red-text;
  display: inline-block;
}

/*ETC */

.swatch {
  padding: 1.5em 1.5em .8em;
}
p.hex {
  color: #FFF;
  display: inline-block;
  float: right;
}
.container-1 {
  padding: 1em 2em;
  line-height: 1.5;
}
.card-1 {
  padding: 0;
  height: auto;
}
.card-image-1 {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/04/Carl_Spitzweg_021.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: -7em;
  height: 20em;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0 !important;  
}
/*TARGETS LIGHT BG PRIMARY BUTTONS*/
div.primary-gray-tint3 > div > div > button.btn-primary,
div.primary-gray-tint3 > div > div> div > div > button.btn-primary {
  background-color: @primary-blue-base;
  border-color: @primary-blue-base;
}
/*TARGETS DARK BG PRIMARY BUTTONS*/
div.primary-gray-shade3 > div > div > button.btn-primary,
div.primary-gray-shade3 > div > div> div > div > button.btn-primary {
  background-color: @primary-blue-dark-base;
  border-color: @primary-blue-dark-base;
  color: #000;
}

/*TARGETS LIGHT BG WARNING BUTTONS*/
div.primary-gray-tint3 > div > div > button.btn-warning,
div.primary-gray-tint3 > div > div> div > div > button.btn-warning {
  background-color: @primary-red-base;
  border-color: @primary-red-base;
}
/*TARGETS DARK BG WARNING BUTTONS*/
div.primary-gray-shade3 > div > div > button.btn-warning,
div.primary-gray-shade3 > div > div> div > div > button.btn-warning {
  background-color: @primary-red-base;
  border-color: @primary-red-base;
  color: #fff;
}
/*TARGETS LIGHT BG BASIC BUTTONS*/
div.primary-gray-tint3 > div > div > button.btn-basic, 
body > div.primary-gray-tint3 > div > div > div > div > button.btn-basic {
  background-color: @primary-gray-base;
  border-color: @primary-gray-base;
  color: #FFF;
}
/*TARGETS DARK BG BASIC BUTTONS*/
div.primary-gray-shade3 > div > div > button.btn-basic, 
body > div.primary-gray-shade3 > div > div > div > div > button.btn-basic {
  background-color: @primary-gray-tint1;
  border-color: @primary-gray-tint1;
  color: #222;
}
.btn{
  border-radius: 2px;
}
.col-centered{
    float: none;
    margin: 0 auto;
}
              
            
!

JS

              
                function componentFromStr(numStr, percent) {
    var num = Math.max(0, parseInt(numStr, 10));
    return percent ?
    Math.floor(255 * Math.min(100, num) / 100) : Math.min(255, num);
}

function rgbToHex(rgb) {
    var rgbRegex = /^rgb\(\s*(-?\d+)(%?)\s*,\s*(-?\d+)(%?)\s*,\s*(-?\d+)(%?)\s*\)$/;
    var result, r, g, b, hex = "";
    if ( (result = rgbRegex.exec(rgb)) ) {
        r = componentFromStr(result[1], result[2]);
        g = componentFromStr(result[3], result[4]);
        b = componentFromStr(result[5], result[6]);

        hex = "#"+ (0x1000000 + (r << 16) + (g << 8) + b).toString(16).slice(1);
    }
    return hex;
}

$(document).ready(function(){

    $('.swatch').each(function(elem){
      
      $(this).append("<p class='hex'>"+rgbToHex($(this).css( 'background-color' ))+"</p>");
  });
})
              
            
!
999px

Console