Last active
January 26, 2024 09:25
-
-
Save nclslbrn/1df279bbef404e028f76e91654210d52 to your computer and use it in GitHub Desktop.
Khroma palettes - scrapped from dev tools
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Scrap Khroma palette | |
// https://www.khroma.co/generator | |
const componentToHex = (c) => { | |
var hex = c.toString(16); | |
return hex.length == 1 ? "0" + hex : hex; | |
} | |
const rgbToHex = (r, g, b) => "#" + componentToHex(r)+componentToHex(g)+componentToHex(b); | |
const palettes = [] | |
const scrap = () => { | |
const palettesBlock = document.querySelectorAll('.color-pair.cp-palette') | |
palettesBlock.forEach(block => { | |
const panels = block.querySelectorAll('.poster-panel') | |
const i = parseInt(block.getAttribute('data-index')) | |
if (panels.length && panels !== undefined) { | |
const cols = Array.from(panels).map(p => { | |
const rgb = p.style.backgroundColor.replace('rgb(', '') | |
.replace(')', '') | |
.split(', ') | |
.map(val => parseInt(val)) | |
if (!isNaN(rgb[0])) { | |
return rgbToHex(...rgb) | |
} | |
}) | |
if (cols[0] !== undefined) { | |
palettes[i] = cols.join(';:') | |
} | |
} | |
}) | |
} | |
const getPalette = () => { | |
const out = Object.keys(palettes).map(i => palettes[i]) | |
console.log(JSON.stringify(out)) | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
Use to view object palette with main.js, style.css | |
and theme.js (the generated palette saved into a JS file | |
which exports palette as THEMES (import {THEMES} from './themes.js') | |
--> | |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Palette</title> | |
<link rel="icon" | |
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎨</text></svg>"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta name="author" content="<%= authorName %>"> | |
<meta name="robots" content="all,follow"> | |
<meta name="viewport" content="width=device-width,user-scalable=no,minimum-scale=1,maximum-scale=1"> | |
<meta name="theme-color" content="#ffffff"> | |
<link href="./style.css" rel="stylesheet"> | |
</head> | |
<body> | |
<div id="app"></div> | |
<script type="module" src="./themes.js"></script> | |
<script type="module" src="./main.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { THEMES } from './themes.js' | |
const div = ( className ) => { | |
const elem = document.createElement('div') | |
elem.classList.add(className) | |
return elem | |
} | |
const colorBlock = (paletteName, palette) => { | |
const block = div('colorBlock') | |
const bgDiv = div('bg') | |
bgDiv.style.backgroundColor = palette.bg | |
bgDiv.style.color = palette.st | |
bgDiv.innerHTML = `<h3>${paletteName}</h3>` | |
const colors = div('fg') | |
palette.fg.forEach(color => { | |
const colDiv = div('color') | |
colDiv.style.backgroundColor = color | |
colors.appendChild(colDiv) | |
}) | |
block.appendChild(bgDiv) | |
block.appendChild(colors) | |
return block | |
} | |
const app = document.getElementById('app') | |
const paletteList = Object.keys(THEMES) | |
paletteList.forEach(name => | |
app.appendChild(colorBlock(name, THEMES[name])) | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Scrap Khroma palette | |
// https://www.khroma.co/generator | |
const componentToHex = (c) => { | |
var hex = c.toString(16); | |
return hex.length == 1 ? "0" + hex : hex; | |
} | |
const rgbToHex = (r, g, b) => "#" + componentToHex(r)+componentToHex(g)+componentToHex(b); | |
const shadeColor = (color, percent) => { | |
let R = parseInt(color.substring(1,3),16); | |
let G = parseInt(color.substring(3,5),16); | |
let B = parseInt(color.substring(5,7),16); | |
R = parseInt(R * (100 + percent) / 100); | |
G = parseInt(G * (100 + percent) / 100); | |
B = parseInt(B * (100 + percent) / 100); | |
R = (R<255)?R:255; | |
G = (G<255)?G:255; | |
B = (B<255)?B:255; | |
R = Math.round(R) | |
G = Math.round(G) | |
B = Math.round(B) | |
const RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16)); | |
const GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16)); | |
const BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16)); | |
return "#"+RR+GG+BB; | |
} | |
const scrap = () => { | |
const palettesBlock = document.querySelectorAll('.color-pair.cp-palette') | |
palettesBlock.forEach(block => { | |
const panels = block.querySelectorAll('.poster-panel') | |
const i = parseInt(block.getAttribute('data-index')) | |
if (panels.length && panels !== undefined) { | |
const fg = Array.from(panels).map(p => { | |
const rgb = p.style.backgroundColor.replace('rgb(', '') | |
.replace(')', '') | |
.split(', ') | |
.map(val => parseInt(val)) | |
if (!isNaN(rgb[0])) { | |
return rgbToHex(...rgb) | |
} | |
}) | |
if (fg[0] !== undefined) { | |
const bg = [fg[3], shadeColor(fg[3], -50)]; | |
fg.splice(3, 0) | |
const st = shadeColor(fg[0], 50); | |
palettes[`No.${i+1}`] = { bg, fg, st }; | |
} | |
} | |
}) | |
const paletteKeys = Object.keys(palettes) | |
console.log(`${paletteKeys.length} palettes scrapped`) | |
} | |
const log = () => { | |
const paletteKeys = Object.keys(palettes) | |
paletteKeys.forEach(name => { | |
const logColor = { | |
sign: palettes[name].fg.map(() => '%c '), | |
style: palettes[name].fg.map((col) => `background: ${col};`) | |
} | |
console.log(`Palette ${name}`) | |
console.log('%c Background ', `background: ${palettes[name].bg};`) | |
console.log('Foreground (fg)') | |
console.log(logColor.sign.join(' '), ...logColor.style) | |
console.log('%c Stroke ', `background: ${palettes[name].st};`) | |
}) | |
console.log(JSON.stringify(palettes)); | |
} | |
let palettes = {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
box-sizing: border-box; | |
font-family: system-ui, | |
-apple-system, BlinkMacSystemFont, | |
"Segoe UI", | |
"Roboto", | |
"Oxygen", | |
"Ubuntu", | |
"Cantarell", | |
"Fira Sans", | |
"Droid Sans", | |
"Helvetica Neue", | |
Arial, sans-serif; | |
} | |
body, | |
#app { | |
margin: 0; | |
padding: 0; | |
} | |
body { | |
padding: 2em; | |
} | |
#app { | |
display: grid; | |
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
} | |
.colorBlock { | |
margin: 1em; | |
} | |
.colorBlock .bg { | |
padding: 0.15em; | |
text-align: center; | |
} | |
.colorBlock .fg { | |
display: flex; | |
flex-flow: row nowrap; | |
} | |
.colorBlock .fg .color { | |
height: 2em; | |
flex-basis: 25%; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
After creating your palettes, place this code in the javascript console of your browser's devTools window.