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

              
                <style class="dynamic-styles">

    </style>

    <div class="grid">

        <div class="col">

            <p>Transition as RGB</p>
            <div class="hover hover--rgb">
                <p>
                    Hover me!
                    <br />
                    This transition goes from an RGB color to an RGB color. The transition matches with the RGB color steps on the right side.
                </p>
            </div>

        </div>


        <div class="col farben farben--rgb">
            <p>Transition steps as RGB</p>
            <div class="farbe"></div>
            <div class="farbe"></div>
            <div class="farbe"></div>
            <div class="farbe"></div>
            <div class="farbe"></div>
            <div class="farbe"></div>
            <div class="farbe"></div>
            <div class="farbe"></div>
            <div class="farbe"></div>

        </div>


        <div class="col">

            <p>Transition as HSL</p>
            <div class="hover hover--hsl">
                <p>
                    Hover me!
                    <br />
                    This transition goes from an HSL color to an HSL color but the browser calculates the trasition / (in be)tween values as RGB values. This transition does NOT match to the HSL color steps on the right side. It matches the RGB color steps on the left side.
                </p>
            </div>

        </div>


        <div class="col farben farben--hsl">
            <p>Transition steps as HSL</p>
            <div class="farbe"></div>
            <div class="farbe"></div>
            <div class="farbe"></div>
            <div class="farbe"></div>
            <div class="farbe"></div>
            <div class="farbe"></div>
            <div class="farbe"></div>
            <div class="farbe"></div>
            <div class="farbe"></div>

        </div>




    </div>
              
            
!

CSS

              
                html{font-family: sans-serif}
p{text-align: center; padding:1em;}
.grid {overflow:hidden; position: relative;}
.col{width:25%; float: left}
.box{width:30px;height:30px;}
.farbe{ height:50px;padding:10px;text-align: center}
.hover{transition: 8s linear; padding-bottom:1000px; margin-bottom: -1000px}
              
            
!

JS

              
                    const farbeA = "#f00", // Start COLOR
          farbeZ = "#0ff", // End COLOR
          farbeA_rgb = hexToRgb(farbeA),
          farbeZ_rgb = hexToRgb(farbeZ),
          farbeA_hsl = hexToHsl(farbeA),
          farbeZ_hsl = hexToHsl(farbeZ),
          farbeA_hsl_string = hslToString(farbeA_hsl),
          farbeZ_hsl_string = hslToString(farbeZ_hsl);


    $(function() {


        // HSL Verlauf

        let farben = $(".farben--hsl .farbe").length;

        let farbeA_h_delta = farbeZ_hsl.h - farbeA_hsl.h;

        // kürzesten Weg nehem
        if ( farbeA_h_delta > 180 )
            farbeA_h_delta = (farbeZ_hsl.h-360) - farbeA_hsl.h;
        else if ( farbeA_h_delta < -180 )
            farbeA_h_delta = farbeZ_hsl.h - (farbeA_hsl.h-360);

        //console.log(farbeA_hsl,farbeZ_hsl,farbeA_h_delta);

        let farbeA_s_delta = farbeZ_hsl.s - farbeA_hsl.s;
        let farbeA_l_delta = farbeZ_hsl.l - farbeA_hsl.l;

        let farbeA_h_step = farbeA_h_delta / (farben-1);
        let farbeA_s_step = farbeA_s_delta / (farben-1);
        let farbeA_l_step = farbeA_l_delta / (farben-1);

        $(".farben--hsl .farbe").each(function(i,el){
            let myHex, myHsl;
            if(i==0) // Erstes Element
                myHex = farbeA;
            else if(i+1==farben) // Letztes Element
                myHex = farbeZ;
            else { // Elemente dazwischen
                let myH = Math.round( farbeA_hsl.h + farbeA_h_step * i );
                if(myH<0) myH+=360; // wenn Wert ausserhalb des Farbkreises dann um einen Zyklus verschieben
                myHex = hslToHex( myH , Math.round(farbeA_hsl.s + farbeA_s_step * i), Math.round(farbeA_hsl.l + farbeA_l_step * i))
            }
            myHsl = hexToHsl(myHex);
            $(el).css("background", myHex ).text( "H:"+ myHsl.h + " S:"+ myHsl.s + " L:"+ myHsl.l );
        });


        // RGB Verlauf

        farben = $(".farben--rgb .farbe").length;

        let farbeA_r_delta = farbeZ_rgb.r - farbeA_rgb.r;
        let farbeA_g_delta = farbeZ_rgb.g - farbeA_rgb.g;
        let farbeA_b_delta = farbeZ_rgb.b - farbeA_rgb.b;

        let farbeA_r_step = farbeA_r_delta / (farben-1);
        let farbeA_g_step = farbeA_g_delta / (farben-1);
        let farbeA_b_step = farbeA_b_delta / (farben-1);

        $(".farben--rgb .farbe").each(function(i,el){
            let myHex, myHsl;
            if(i==0) // Erstes Element
                myHex = farbeA;
            else if(i+1==farben) // Letztes Element
                myHex = farbeZ;
            else // Elemente dazwischen
                myHex = rgbToHex(Math.round(farbeA_rgb.r + farbeA_r_step * i), Math.round(farbeA_rgb.g + farbeA_g_step * i), Math.round(farbeA_rgb.b + farbeA_b_step * i))
            myHsl = hexToHsl(myHex);
            $(el).css("background", myHex ).text( "H:"+ myHsl.h + " S:"+ myHsl.s + " L:"+ myHsl.l );
        });

        $(".dynamic-styles").text(".hover--hsl{background:"+farbeA_hsl_string+"} .hover--hsl:hover{background:"+farbeZ_hsl_string+"} .hover--rgb{background:"+farbeA+"} .hover--rgb:hover{background:"+farbeZ+"}");

    });

    // FUNCTIONS

    /**
     * Converts an HSL color value to RGB. Conversion formula
     * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
     * Assumes h, s, and l are contained in the set h[0-360] s[0-100] l[0-100] and
     * returns r, g, and b in the set [0, 255].
     *
     * @param   {number}  h       The hue
     * @param   {number}  s       The saturation
     * @param   {number}  l       The lightness
     * @return  {Array}           The RGB representation
     */
    function hslToRgb(h, s, l){
        var r, g, b;

        // umrechnen in [0.0 - 1.0];
        h = h / 360;
        s = s / 100;
        l = l / 100;

        if(s == 0){
            r = g = b = l; // achromatic
        }else{
            var hue2rgb = function hue2rgb(p, q, t){
                if(t < 0) t += 1;
                if(t > 1) t -= 1;
                if(t < 1/6) return p + (q - p) * 6 * t;
                if(t < 1/2) return q;
                if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
                return p;
            }

            var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
            var p = 2 * l - q;
            r = hue2rgb(p, q, h + 1/3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1/3);
        }

        var result = [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];

        return result ? {
            r: result[0],
            g: result[1],
            b: result[2]
        } : null;
    }

    /**
     * Converts an RGB color value to HSL. Conversion formula
     * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
     * Assumes r, g, and b are contained in the set [0, 255] and
     * returns h, s, and l in the set h[0-360] s[0-100] l[0-100].
     *
     * @param   {number}  r       The red color value
     * @param   {number}  g       The green color value
     * @param   {number}  b       The blue color value
     * @return  {Array}           The HSL representation
     */
    function rgbToHsl(r, g, b){
        r /= 255, g /= 255, b /= 255;
        var max = Math.max(r, g, b), min = Math.min(r, g, b);
        var h, s, l = (max + min) / 2;

        if(max == min){
            h = s = 0; // achromatic
        }else{
            var d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            switch(max){
                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                case g: h = (b - r) / d + 2; break;
                case b: h = (r - g) / d + 4; break;
            }
            h /= 6;
        }

        // umrechnen in h[0-360] s[0-100] l[0-100]
        h = Math.round(h * 360);
        s = Math.round(s * 100);
        l = Math.round(l * 100);

        return {h:h, s:s, l};
    }



    function hexToRgb(hex) {
        // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
        var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
        hex = hex.replace(shorthandRegex, function(m, r, g, b) {
            return r + r + g + g + b + b;
        });

        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : null;
    }



    function rgbToHex(r, g, b) {
        return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    }



    function hexToHsl(hex) {
        var myRGB = hexToRgb(hex);
        return rgbToHsl(myRGB.r,myRGB.g,myRGB.b);
    }



    function hslToHex(h, s, l) {
        var myRGB = hslToRgb(h, s, l);
        return rgbToHex(myRGB.r,myRGB.g,myRGB.b);
    }

    function hslToString(hsl){
        return "hsl("+hsl.h+","+hsl.s+"%,"+hsl.l+"%)";
    }
              
            
!
999px

Console