<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://use.fontawesome.com/aa95071b26.js"></script>
<div id="body">
<div class="out-wrap">
<h1>Color Palette</h1>
<div class="tab-container">
<ul id="tabs">
<li class="active" title="reds" vc-code="#f44336"></li>
<li title="pinks" vc-code="#e91e63"></li>
<li title="purples" vc-code="#9c27b0"></li>
<li title="deep-purples" vc-code="#673ab7"></li>
<li title="indigos" vc-code="#3f51b5"></li>
<li title="blues" vc-code="#2196f3"></li>
<li title="light-blues" vc-code="#03a9f4"></li>
<li title="cyans" vc-code="#00bcd5
"></li>
<li title="teals" vc-code="#009688"></li>
<li title="greens" vc-code="#4caf50 "></li>
<li title="light-greens" vc-code="#8bc34a "></li>
<li title="limes" vc-code="#cddc39"></li>
<li title="yellows" vc-code="#ffeb3b "></li>
<li title="ambers" vc-code="#ff9800"></li>
<li title="deep-oranges" vc-code="#ff5722"></li>
<li title="browns" vc-code="#795548"></li>
<li title="greys" vc-code="#9e9e9e"></li>
<li title="blue-greys" vc-code="#607d8b"></li>
</ul>
<div class="tab-panes">
<div id="reds" class="showit">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="main"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="pinks">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="main"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="purples">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="main"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="deep-purples">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="main"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="indigos">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="main"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="blues">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="main"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="light-blues">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="main"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="cyans">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="main"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="teals">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="main"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="greens">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="main"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="light-greens">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="main"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="limes">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="main"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="yellows">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="main"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="ambers">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="main"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="deep-oranges">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="main"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="browns">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="main"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="greys">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="main"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="blue-greys">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="main"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
</div>
// Extra small screen / phone
$screen-xs-min: 480px;
// Small screen / tablet
$screen-sm-min: 768px;
// Medium screen / desktop
$screen-md-min: 992px;
// Large screen / wide desktop
$screen-lg-min: 1200px;
// So media queries don't overlap when required, provide a maximum
$screen-xs-max: ($screen-sm-min - 1);
$screen-sm-max: ($screen-md-min - 1);
$screen-md-max: ($screen-lg-min - 1);
@mixin respondTo($media) {
@if $media == "xs" {
@media only screen and (max-width: $screen-xs-max) {
@content;
}
}
@else if $media == "sm" {
@media only screen and (max-width: $screen-sm-max) and (min-width: $screen-sm-min) {
@content;
}
}
@else if $media == "md" {
@media only screen and (max-width: $screen-md-max) and (min-width: $screen-md-min) {
@content;
}
}
@else if $media == "lg" {
@media only screen and (min-width: $screen-lg-min) {
@content;
}
}
}
@mixin respondToAbove($media) {
@if $media == "xs" {
@media only screen and (min-width: $screen-xs-max) {
@content;
}
}
@else if $media == "sm" {
@media only screen and (min-width: $screen-sm-min) {
@content;
}
}
@else if $media == "md" {
@media only screen and (min-width: $screen-md-min) {
@content;
}
}
@else if $media == "lg" {
@media only screen and (min-width: $screen-lg-min) {
@content;
}
}
}
@mixin respondToBelow($media) {
@if $media == "xs" {
@media only screen and (max-width: $screen-xs-max) {
@content;
}
}
@else if $media == "sm" {
@media only screen and (max-width: $screen-sm-max) {
@content;
}
}
@else if $media == "md" {
@media only screen and (max-width: $screen-md-max) {
@content;
}
}
@else if $media == "lg" {
@media only screen {
@content;
}
}
}
@mixin respondToTablet {
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max){
@content;
}
}
@mixin respondToSmall-n-Medium {
@media (min-width: $screen-sm-min) and (max-width: $screen-md-max){
@content;
}
}
@mixin respondToMobile() {
@include respondTo(xs){
@content
}
}
@mixin respondToDesktop() {
@include respondToAbove(md){
@content
}
}
@mixin clearfix {
&:before {
content: "";
display: table;
}
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
}
@mixin rounded_corners($radius: 5px) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
@mixin input {
padding: 0 20px;
margin: 0.5em 0;
border: 1px solid darken(#e1e1e1, 20%);
height: 40px;
display: block;
width: 80%;
max-width: 80%;
background: rgba(255,255,255,.5);
@include respondTo(xs) {
width: 100%;
max-width: 100%;
}
outline: none;
}
// Provides a cross-browser method to implement `display: inline-block;`
@mixin inline-block($alignment: middle) {
display: -moz-inline-stack;
display: inline-block;
@if $alignment and $alignment != none {
vertical-align: $alignment;
}
*vertical-align: auto;
zoom: 1;
*display: inline;
}
@mixin background_gradient($min_color, $max_color,$color_stop1:0%, $color_stop2:100%) {
background: $min_color;
background: -moz-linear-gradient(top, $min_color $color_stop1, $max_color $color_stop2);
background: -o-linear-gradient(top, $min_color $color_stop1, $max_color $color_stop2);
background: -webkit-linear-gradient(top, $min_color $color_stop1, $max_color $color_stop2);
background: -ms-linear-gradient(top, $min_color $color_stop1, $max_color $color_stop2);
background: -webkit-gradient(linear,left top,left bottom,color-stop($color_stop1/100%, $min_color),color-stop($color_stop2/100%, $max_color));
background: linear-gradient(to bottom, $min_color $color_stop1, $max_color $color_stop2);
zoom: 1; // fix for ie7 issue
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#{$min_color}, endColorStr=#{$max_color});
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#{$min_color}, endColorStr=#{$max_color});
}
@mixin box-shadow($value) {
-webkit-box-shadow: $value;
-moz-box-shadow: $value;
box-shadow: $value;
}
@mixin font_family($font_type,$font_stretch:'normal') {
@if $font-stretch == "condensed" {
font-family: $font-condensed;
}
@else if $font_type == "primary" {
font-family: $font-primary;
}
@else {
font-family: $font-secondary;
}
}
@mixin font-size($sizeValue) {
font-size: ($sizeValue * 10) + px;
font-size: $sizeValue + rem;
}
//-------------
@mixin shadow-box {
border: 1px solid darken(#e1e1e1, 5%);
@include rounded_corners(5px);
box-shadow: 4px 4px 5px #e1e1e1;
}
@mixin transition($value) {
transition: $value;
-moz-transition: $value;
-webkit-transition: $value;
}
@mixin flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin flex-grow($value) {
-webkit-box-flex: $value;
-webkit-flex: $value;
-ms-flex: $value;
flex: $value;
}
@mixin flex-wrap {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
@mixin align-items($value) {
-ms-align-items: $value;
-moz-align-items: $value;
-webkit-align-items: $value;
align-items: $value;
}
@mixin justify-content($value) {
-ms-justify-content: $value;
-moz-justify-content: $value;
-webkit-justify-content: $value;
justify-content: $value;
}
@mixin flex-direction($value) {
-ms-flex-direction: $value;
-moz-flex-direction: $value;
-webkit-flex-direction: $value;
flex-direction: $value;
}
@mixin flex-basis($value) {
-webkit-box-flex: $value;
-webkit-flex: $value;
-ms-flex: $value;
flex: $value;
}
@mixin fontAwesome($fsize,$ascii,$fcolor) {
font: normal normal normal $fsize/1 FontAwesome;
content: $ascii;
color: $fcolor;
}
@mixin input-placeholder-font($value1, $value2) {
input::-webkit-input-placeholder {
color: $value1;
@include font-size($value2);
}
input::-moz-placeholder {
color: $value1;
@include font-size($value2);
}
input:-moz-placeholder {
color: $value1;
@include font-size($value2);
}
input:-ms-input-placeholder {
color: $value1;
@include font-size($value2);
}
}
@mixin radio-button {
position: absolute;
left: 0;
width: 100%;
opacity: 0;
z-index: 1;
height: 25px;
cursor: pointer;
&:checked + label:after {
content: '';
position: absolute;
background: #000;
@include rounded_corners(50%);
width: 9px;
height: 9px;
left: 3px;
top: 3px;
bottom: 4px;
pointer-events: none;
}
& + label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 20px;
margin-top: 10px;
line-height: 15px;
height: 15px;
&:before {
font-weight: normal;
content: '';
display: inline-block;
width: 15px;
height: 15px;
margin-right: 10px;
position: absolute;
left: 0;
top: 0;
bottom: 1px;
background-color: #fff;
@include rounded_corners(50%);
border: 1px solid darken(#e1e1e1, 15%);
}
}
}
@mixin check-button {
position: absolute;
left: 0;
width: 100%;
opacity: 0;
z-index: 1;
height: 25px;
cursor: pointer;
&:checked + label:after {
content: '';
position: absolute;
width: 9px;
height: 4.5px;
left: 3px;
bottom: 7px;
border-color: #000;
border-style: solid;
border-width: 0 0 2px 2px;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
pointer-events: none;
}
& + label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 20px;
margin-top: 10px;
line-height: 15px;
height: 15px;
&:before {
font-weight: normal;
content: '';
display: inline-block;
width: 15px;
height: 15px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #fff;
border: 1px solid darken(#e1e1e1, 15%);
}
}
}
@mixin flat-shadow{
@include box-shadow(0 5px 10px -4px rgba(0,0,0,0.3));
}
@mixin rotate($angle) {
-ms-transform:rotate($angle);
-webkit-transform:rotate($angle);
transform:rotate($angle);
}
@mixin scale($value-1,$value-2) {
-ms-transform:scale($value-1,$value-2);
-webkit-transform:scale($value-1,$value-2);
transform:scale($value-1,$value-2);
}
@mixin skew($value-1,$value-2) {
-ms-transform:skew($value-1,$value-2);
-webkit-transform:skew($value-1,$value-2);
transform:skew($value-1,$value-2);
}
@mixin translateY($value) {
-ms-transform:translateY($value);
-webkit-transform:translateY($value);
transform:translateY($value);
}
@mixin transform($value) {
-ms-transform:($value);
-webkit-transform:($value);
transform:($value);
}
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-o-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
@mixin animation($values){
-webkit-animation: ($values);
-moz-animation: ($values);
-ms-animation: ($values);
animation: ($values);
}
@mixin close-icon{
font-size: 0 !important;
position: absolute;
height: 40px;
width: 40px;
right: 20px;
top: 20px;
font-size: 0px;
cursor: pointer;
z-index: 9;
border: 0;
background: transparent;
&:before,&:after{
content: '';
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
position: absolute;
height: 2px;
background: #fff;
width: 50%;
transition: all .25s;
opacity: 0;
}
&:before{
transform: rotate(45deg);
opacity: 1;
}
&:after{
transform: rotate(-45deg);
opacity: 1;
}
}
@mixin radio-button{
display: none;
& + *{
position: relative;
padding-left: 30px;
margin-left: 10px;
&:before{
content: '';
width: 20px;
@include rounded_corners(50%);
height: 20px;
@include box-shadow(inset 0px 1px 5px rgba(0,0,0,0.5));
text-indent: 30px;
left: 0;
top: 0;
position: absolute;
cursor: pointer;
}
&:after {
content: '';
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
z-index: 1;
background: $dbc;
@include rounded_corners(50%);
@include transition(all .25s);
top: 0;
left: 0;
@include transform(scale(0));
}
}
&:checked + *:after {
@include transform(scale(.4));
@include transition(all .25s cubic-bezier(0.68,0.55,0.265,3));
}
}
@mixin check-box{
display: none;
& + *{
position: relative;
padding-left: 30px;
margin-left: 10px;
&:before{
content: '';
width: 18px;
height: 18px;
@include box-shadow(inset 0px 1px 5px rgba(0,0,0,0.5));
text-indent: 30px;
left: 0;
top: 0;
position: absolute;
cursor: pointer;
}
&:after {
content: '';
width: 25px;
height: 15px;
cursor: pointer;
position: absolute;
z-index: 1;
border: solid $solid-color;
border-width: 0 0 7px 7px;
top: 0;
left: -3px;
@include transform(rotate(0deg) scale(0));
@include transition(all .25s);
}
}
&:checked + *:after {
@include transform(rotate(-45deg) scale(0.4));
@include transition(all .25s cubic-bezier(0.68,0.55,0.265,3));
}
&:checked + *:before {
background: $dbc;
}
}
@mixin calwidth($val1, $val2){
width: calc(#{$val1} + #{$val2})
}
@mixin transition-hvr($t-duration, $t-type){
position: relative;
transition: all $t-duration $t-type;
&:before,&:after{
content:'';
position: absolute;
left: 0;
top: 0;
width:0;
height:0;
transition: width $t-duration ($t-duration*3) $t-type, height $t-duration ($t-duration*2) $t-type, border ($t-duration/5) ($t-duration*4) $t-type;
border: solid transparent;
border-width: 3px 3px 0 0;
}
&:after{
left: auto;
top: auto;
bottom: 0;
right: 0;
transition: width $t-duration $t-duration $t-type, height $t-duration $t-type, border ($t-duration/5) ($t-duration*2) $t-type;
border-width: 0 0 3px 3px;
}
&:hover{
&:before,&:after{
transition: width $t-duration $t-type, height $t-duration $t-duration $t-type, border ($t-duration/5) $t-type;
width: 100%;
height: 100%;
border-color: $dbc;
}
&:after{
transition: width $t-duration ($t-duration*2) $t-type, height $t-duration ($t-duration*3) $t-type, border ($t-duration/5) ($t-duration*2) $t-type;
}
}
}
$solid-color: #fff;
$dbc: #212121;
#body {
padding: 50px;
background: $dbc;
min-height: 100vh;
font-family: 'Josefin Sans', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
.out-wrap {
position: relative;
width: 95%;
margin: 0 auto;
>h1{
color: #fff;
text-align: center;
margin: 0 0 20px;
}
.tab-container{
>ul#tabs{
padding: 0 15px;
list-style-type:none;
position: relative;
border-bottom: none;
z-index: 0;
@include flex;
widtyh: 100%;
margin-bottom:0;
li {
flex: 1;
position: relative;
z-index: 0;
padding: 30px 0;
box-shadow: 8px 12px 25px 2px rgba(0, 0, 0, 0.4);
cursor: pointer;
transition: all 0.2s ease;
transform: translateY(20px);
&:hover{
transform: translateY(15px);
}
&:nth-child(1) {
border-radius: 20px 0 0 0;
}
&:last-child {
box-shadow: none;
border-radius: 0 20px 0 0;
}
&.active {
margin: 0;
z-index: 20 !important;
border-radius: 10px 10px 0 0;
transform: translateY(0);
}
}
}
.tab-panes{
box-shadow: 0 6px 10px -2px rgba(0, 0, 0, .25);
padding: 30px;
background: $solid-color;
position: relative;
>div{
&:before{
content: attr(id);
width: 100%;
text-align: center;
font-size: 40px;
}
display: none;
@include flex-wrap;
@incldue justify-content (space-between);
&.showit{
@include flex;
}
display:none;
>div{
width: 20%;
height: 100px;
display: none;
&[style*="background"]{
display: flex !important;
justify-content: center;
align-items: center;
p{
color: #fff;
font-size: 16px;
margin: 0;
}
}
}
}
}
}
}
}
View Compiled
$(function() {
$('#tabs > li').each(function() {
var z_index = $(this).length - $(this).index();
$(this).css({
'background': $(this).attr('vc-code'),
'z-index': z_index + 1
});
var c_color = $(this).attr('vc-code');
$('div:nth-child(' + ($(this).index() + 1) + ') > .main').css('background', c_color);
});
$('#tabs > li').click(function() {
$(this).addClass('active').siblings().removeClass('active');
$('.tab-panes > div#' + $(this).attr('title')).addClass('showit').siblings().removeClass('showit');
});
$('.tab-panes > div > div:not(.main)').each(function(){
var shadelev = ($(this).siblings('.main').index() - $(this).index()) * 5;
var shade = $(this).siblings('.main').css('background');
shade = rgb2hex(shade);
var newshade = LightenDarkenColor(shade, shadelev);
$(this).css('background', newshade);
});
$('.tab-panes > div > div').each(function() {
var code = $(this).css('background');
code = rgb2hex(code);
$(this).append('<p>' + code + '</p>');
});
});
function rgb2hex(rgb) {
rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
return (rgb && rgb.length === 4) ? "#" +
("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
("0" + parseInt(rgb[3], 10).toString(16)).slice(-2) : '';
}
function LightenDarkenColor(col, amt) {
var usePound = false;
if (col[0] == "#") {
col = col.slice(1);
usePound = true;
}
var num = parseInt(col, 16);
var r = (num >> 16) + amt;
if (r > 255) r = 255;
else if (r < 0) r = 0;
var b = ((num >> 8) & 0x00FF) + amt;
if (b > 255) b = 255;
else if (b < 0) b = 0;
var g = (num & 0x0000FF) + amt;
if (g > 255) g = 255;
else if (g < 0) g = 0;
return (usePound ? "#" : "") + String("000000" + (g | (b << 8) | (r << 16)).toString(16)).slice(-6);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.