Skip to content

Home

Jump to bottom
Liam Cheneval edited this page May 30, 2023 · 8 revisions

Welcome to the KozyKolors wiki!

Welcome to the wiki, we'll guide you through adding dynamic color palette from an image using Kozy.

Step 1: import Kolors

How to using jsDelivr's CDN; you can also add color-thief if you want dynamic colors from images.

<!DOCTYPE html>
<html lang="en">
    <head>
        [...]
    </head>
    <body>
        [...]

        <!-- ONLY IF YOU WANT TO GENERATE FROM IMAGE !-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>

        <script type="module">
            import { Palette } from "https://cdn.jsdelivr.net/gh/lolous-studio/[email protected]/src/kozy-kolors.min.js";

            // Add your implementation here

        </script>
    </body>
</html>

Step 2: Create a palette

function updatepalette(color){
    let palette = new Palette(color);
}

Step 3: Add the css variables

There's many ways to do it like cycling through the generated palette, but let's just add them one by one:

function updatepalette(color){

    // code from step 2 goes here

    document.documentElement.style.setProperty('--raw-v100', `hsl(${palette.raw.v100[0]}, ${palette.raw.v100[1]}%, ${palette.raw.v100[2]}%)`);
    document.documentElement.style.setProperty('--raw-v90', `hsl(${palette.raw.v90[0]}, ${palette.raw.v90[1]}%, ${palette.raw.v90[2]}%)`);
    document.documentElement.style.setProperty('--raw-v80', `hsl(${palette.raw.v80[0]}, ${palette.raw.v80[1]}%, ${palette.raw.v80[2]}%)`);
    document.documentElement.style.setProperty('--raw-v70', `hsl(${palette.raw.v70[0]}, ${palette.raw.v70[1]}%, ${palette.raw.v70[2]}%)`);
    document.documentElement.style.setProperty('--raw-v60', `hsl(${palette.raw.v60[0]}, ${palette.raw.v60[1]}%, ${palette.raw.v60[2]}%)`);
    document.documentElement.style.setProperty('--raw-v50', `hsl(${palette.raw.v50[0]}, ${palette.raw.v50[1]}%, ${palette.raw.v50[2]}%)`);
    document.documentElement.style.setProperty('--raw-v40', `hsl(${palette.raw.v40[0]}, ${palette.raw.v40[1]}%, ${palette.raw.v40[2]}%)`);
    document.documentElement.style.setProperty('--raw-v30', `hsl(${palette.raw.v30[0]}, ${palette.raw.v30[1]}%, ${palette.raw.v30[2]}%)`);
    document.documentElement.style.setProperty('--raw-v20', `hsl(${palette.raw.v20[0]}, ${palette.raw.v20[1]}%, ${palette.raw.v20[2]}%)`);
    document.documentElement.style.setProperty('--raw-v10', `hsl(${palette.raw.v10[0]}, ${palette.raw.v10[1]}%, ${palette.raw.v10[2]}%)`);
    document.documentElement.style.setProperty('--raw-v5', `hsl(${palette.raw.v5[0]}, ${palette.raw.v5[1]}%, ${palette.raw.v5[2]}%)`);
    document.documentElement.style.setProperty('--raw-v1', `hsl(${palette.raw.v1[0]}, ${palette.raw.v1[1]}%, ${palette.raw.v1[2]}%)`);
}

Step 4: Use it in your css

You should take a look at our Kozy guidelines to make sure you use colors correctly. Here's to to add the colors using the code above:

body {
    background-color:var(--raw-v100);
}

h1 {
    color:var(--raw-v100);
}

What about dynamic using images?

I already figured the code out, here it is:

const colorThief = new ColorThief();
const img = document.querySelector('.color-from');
const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
// Make sure image is finished loading
if (img.complete) {
    thief(img);
} else {
  img.addEventListener('load', function() {
    thief(img);
  });
}
function thief(img){
    var palette = colorThief.getPalette(img);
    console.log(palette);
    let hex = rgbToHex(palette[0][0], palette[0][1], palette[0][2]);
    updatepalette(hex);
}

Add this just before our freshly written function. Please make sure the image you use has the proper CORS policies set up before trying to use it. Of course don't forget to add the image in your page:

<img class="color-from" src="https://images.unsplash.com/photo-1682407186023-12c70a4a35e0" alt="" crossorigin="anonymous">

Add this image anywhere in your body tag as long as it's above our javascript code.

WELL DONE 🎉

What's next? Well, take a look at what you can do here: API

Clone this wiki locally