Palette Generator
A copy-paste color pickers component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Color PickersHTMLCSSany framework
0C0C10
62B6FF
9D6DFF
E4FF54
FAFAFA
Copy into your project
HTML
<div class="nuda-paletteg">
<div class="nuda-paletteg__col" style="background:#0c0c10">
<span style="color:#fafafa">0C0C10</span>
</div>
<div class="nuda-paletteg__col" style="background:#62b6ff">
<span style="color:#fafafa">62B6FF</span>
</div>
<!-- More colors -->
</div>CSS
.nuda-paletteg__col {
flex: 1;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 6px;
cursor: pointer;
transition: flex 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nuda-paletteg__col:hover { flex: 2; }
.nuda-paletteg:hover .nuda-paletteg__col:not(:hover) { flex: 0.7; }How to use Palette Generator
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.