Color Palette Generator

color-palette-generator.markdown

Color Palette Generator

A Pen by Emre Süslü on CodePen.

License.

index.html

    <div class="container">
        <h2>Color palette generator</h2>

        <div class="cards">
            <div class="card">
                <div class="canvas"></div>
                <div class="hex">#93B8E3</div>
            </div>
            <div class="card">
                <div class="canvas"></div>
                <div class="hex">#A3B2C2</div>
            </div>
            <div class="card">
                <div class="canvas"></div>
                <div class="hex">#FBABA4</div>
            </div>
            <div class="card">
                <div class="canvas"></div>
                <div class="hex">#7C7C84</div>
            </div>
            <div class="card">
                <div class="canvas"></div>
                <div class="hex">#AF4884</div>
            </div>
        </div>

        <button class="btn" id="btn">Generate palette</button>
    </div>

script.js

/* The design was inspired by https://uidesigndaily.com/posts/sketch-color-palette-generator-picker--day-1114 */

const btn = document.getElementById('btn');
const cards = document.querySelectorAll('.card');
const canvas = document.querySelectorAll('.canvas');
const hex = document.querySelectorAll('.hex');

btn.addEventListener('click', () => {
    cards.forEach(card => {
        const randomColor = Math.floor(Math.random() * 16777215).toString(16);

        card.querySelector('.canvas').style.backgroundColor = '#' + randomColor;
        card.querySelector('.hex').innerHTML ='#' + randomColor;
    })
})

style.scss

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600;700&display=swap');

*{
    box-sizing: border-box;
    font-family: 'Nunito Sans', sans-serif;
}

%canvas{
    height: 11rem;
    width: 8rem;
    border-radius: 2px;
    transition: 0.3s ease all;
}

%hex{
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
}

%flex-stack{
    display: flex;
    align-items: center;
    justify-content: center;
}

body{
    margin: 0;
    background-color: #EBEBF3;
    min-height: 100vh;
    @extend %flex-stack;
    text-align: center;
    overflow-x: hidden;

    .container{
        max-width: 1100px;
        margin: auto;
        padding: 2rem 0;

        h2{
            font-size: 1.8rem;
            word-spacing: 0.25rem;
            text-transform: capitalize;
            text-align: center;
        }

        .cards{
            margin-top: 3rem;
            @extend %flex-stack;
            flex-wrap: wrap;
            .card{
                height: 14.5rem;
                width: 9rem;
                margin: 1rem 1.5rem;
                background-color: #fff;
                @extend %flex-stack;
                flex-direction: column;
                border-radius: 5px;
                cursor: pointer;
                transition: 0.4s ease all;
                &:hover{
                    transform: translateY(-10px);
                    box-shadow: 0 2px 12px #A3B2C2;
                }
                &:nth-of-type(1){
                    .canvas{
                        @extend %canvas;
                        background-color: #93B8E3;
                    }
                    .hex{
                        @extend %hex;
                        color: #7C7C84;
                    }
                }
                &:nth-of-type(2){
                    .canvas{
                        @extend %canvas;
                        background-color: #A3B2C2;
                    }
                    .hex{
                        @extend %hex;
                        color: #7C7C84;
                    }
                }
                &:nth-of-type(3){
                    .canvas{
                        @extend %canvas;
                        background-color: #FBABA4;
                    }
                    .hex{
                        @extend %hex;
                        color: #7C7C84;
                    }
                }
                &:nth-of-type(4){
                    .canvas{
                        @extend %canvas;
                        background-color: #7C7C84;
                    }
                    .hex{
                        @extend %hex;
                        color: #4C545F;
                    }
                }
                &:nth-of-type(5){
                    .canvas{
                        @extend %canvas;
                        background-color:#AF4884;
                    }
                    .hex{
                        @extend %hex;
                        color: #7C7C84;
                    }
                }
            }
        }

        .btn{
            margin-top: 3rem;
            border: none;
            outline: none;
            background-color: rgb(142, 84, 199);
            color: #fff;
            font-weight: 600;
            padding: 1rem 4rem;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s ease all;
            &:hover{
                background-color: rgb(115, 59, 172); 
            }
        }
    }
}