Catppuccin Mocha Color-Palette

Catppuccin Mocha Color-Palette for CSS

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.1/darkly/bootstrap.min.css">
<div class="container my-4 mx-auto row">
  <div class="col-12 mb-3">
    <div class="card">
	  <div class="card-header">Catppuccin Mocha <span>Color-Codes</span></div>
      <div class="card-body">
        <table id="mainTable" class="table">
          <thead>
            <tr>
              <th scope="col"><img></th>
              <th scope="col"><span>Name</span></th>
              <th scope="col"><span>Color-Hex</span></th>
              <th scope="col"><span>Color-RGB</span></th>
              <th scope="col"><span>Color-HSL</span></th>
            </tr>
          </thead>
          <tbody>
            <tr data-color="#f5e0dc" data-color-rgb="245, 224, 220" data-color-hsl="10, 56%, 91%">
              <td></td>
              <td>rosewater</td>
              <td><code>#f5e0dc</code></td>
              <td><code data-before="rgb(" data-after=")">245, 224, 220</code></td>
              <td><code data-before="hsl(" data-after=")">10, 56%, 91%</code></td>
            </tr>
            <tr data-color="#f2cdcd" data-color-rgb="242, 205, 205" data-color-hsl="0, 59%, 88%">
              <td></td>
              <td>flamingo</td>
              <td><code>#f2cdcd</code></td>
              <td><code data-before="rgb(" data-after=")">242, 205, 205</code></td>
              <td><code data-before="hsl(" data-after=")">0, 59%, 88%</code></td>
            </tr>
            <tr data-color="#f5c2e7" data-color-rgb="245, 194, 231" data-color-hsl="316, 72%, 86%">
              <td></td>
              <td>pink</td>
              <td><code>#f5c2e7</code></td>
              <td><code data-before="rgb(" data-after=")">245, 194, 231</code></td>
              <td><code data-before="hsl(" data-after=")">316, 72%, 86%</code></td>
            </tr>
            <tr data-color="#cba6f7" data-color-rgb="203, 166, 247" data-color-hsl="267, 84%, 81%">
              <td></td>
           ...

CSS

:root {
	--bs-blue: #89b4fa;
	--bs-blue-rgb: 137, 180, 250;
    --bs-indigo: #cba6f7;
    --bs-indigo-rgb: 203, 166, 247;
    --bs-purple: #b4befe;
    --bs-purple-rgb: 180, 190, 254;
    --bs-pink: #f5c2e7;
    --bs-pink-rgb: 245, 194, 231;
    --bs-red: #eba0ac;
    --bs-red-rgb: 243, 139, 168;
    --bs-orange: #fab387;
    --bs-orange-rgb: 250, 179, 135;
    --bs-yellow: #f9e2af;
    --bs-yellow-rgb: 249, 226, 175;
    --bs-green: #a6e3a1;
    --bs-green-rgb: 166, 227, 161;
    --bs-teal: #20c997;
    --bs-teal-rgb: 148, 226, 213;
    --bs-cyan: #74c7ec;
    --bs-cyan-rgb: 137, 220, 235;
    --bs-black: #000;
    --bs-black-rgb: 0, 0, 0;
    --bs-white: #fff;
    --bs-white-rgb: 255, 255, 255;
    --bs-gray: #45475a;
    --bs-gray-rgb: 69, 71, 90;
    --bs-gray-dark: #181825;
    --bs-gray-dark-rgb: 24, 24, 37;
    --bs-gray-100: color-mix(in srgb, var(--bs-gray) 10%, white);
    --bs-gray-200: color-mix(in srgb, var(--bs-gray) 20%, white);
    --bs-gray-300: color-mix(in srgb, var(--bs-gray) 30%, white);
    --bs-gray-400: color-mix(in srgb, var(--bs-gray) 40%, white);
    --bs-gray-500: color-mix(in srgb, var(--bs-gray) 50%, white);
    --bs-gray-600: color-mix(in srgb, var(--bs-gray) 60%, white);
    --bs-gray-700: color-mix(in srgb, var(--bs-gray) 70%, white);
    --bs-gray-800: color-mix(in srgb, var(--bs-gray) 80%, white);
    --bs-gray-900: color-mix(in srgb, var(--bs-gray) 90%, white);
    --bs-primary: var(--bs-blue);
    --bs-secondary: var(--bs-gray);
    --bs-success: var(--bs-green);
    --bs-info: var(--bs-cyan);
    --bs-warning: var(--bs-orange);
    --bs-danger: var(--bs-red);
    --bs-light: #bac2de;
    --bs-dark: #1e1e2e;
	--bs-darker: #11111b;
	--bs-dark-lighter-2: color-mix(in srgb, var(--bs-dark) 98%, white);
	--bs-dark-lighter-4: color-mix(in srgb, var(--bs-dark) 96%, white);
	--bs-dark-lighter-6: color-mix(in srgb, var(--bs-dark) 94%, white);
	--bs-dark-lighter-8: color-mix(in srgb, var(--bs-dark) 92%, white);
	--bs-dark-lighter-10:...

JavaScript

const dataURL_output = document.getElementById('dataURL_output');
const dataURL_output_img = document.getElementById('dataURL_output_img');
const allTR = document.querySelectorAll('#mainTable tbody > tr');
const th1_img = document.querySelector("#mainTable > thead > tr > th:nth-child(1) img");
	toDataURL("#1e1e2e", 24, 24, function(dataUrl) { th1_img.src = dataUrl; });

allTR.forEach((_) => {

	const firstTH = _.cells[0];
		//alert(firstTH);
	const firstTHIMG = document.createElement('img');
		firstTHIMG.src = "";
		toDataURL(_.dataset.color, 40, 40,
			function (dataUrl) {
			firstTHIMG.src = dataUrl;
		  }
		);
		firstTH.appendChild(firstTHIMG);
});

function toDataURL(color, w, h, callback, outputFormat) {
  	let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');
    let dataURL;
    canvas.width = w;
    canvas.height = h;
	ctx.fillStyle = color;
	ctx.fillRect(0, 0, w, h); //.fillRect(x, y, width, height)
	//ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    callback(dataURL);
}