Palette di brand basate su OKLCH. Scegli una base, ottieni tutte le armonie classiche più una scala tonale 50–950. Blocca, ri-genera, esporta come CSS / Tailwind v4 / SCSS / JSON.
Palette di brand basate su OKLCH. Scegli una base, ottieni tutte le armonie classiche più una scala tonale 50–950. Blocca, ri-genera, esporta come CSS / Tailwind v4 / SCSS / JSON.
Il nostro Color Picker & Converter è per un colore alla volta — scegli / converti / copia. Questo strumento è per le palette: inserisci un colore di base e ottieni un intero sistema pronto per il brand (armonie + scala tonale) in un solo colpo. È la differenza tra comprare una camicia e ottenere un intero guardaroba.
HSL distribuisce le tonalità in modo non uniforme (il giallo a 60° appare molto più luminoso del blu a 240° anche con lo stesso valore di luminosità). Una palette triadica in HSL ha un campione visibilmente più chiaro o più spento degli altri. OKLCH è percettivamente uniforme — tre campioni con la stessa luminosità OKLCH sembrano avere la stessa luminosità. È per questo che ogni design system moderno (Apple HI, Tailwind v4, IBM Carbon) si sta spostando su OKLCH per armonie e scale.
I colori del tuo brand non lasciano mai il tuo dispositivo. Apri DevTools → Network e vedrai zero richieste in uscita durante qualsiasi operazione.
Suggerimento: premi Spazio per ri-generare i campioni sbloccati.
Armonie OKLCH, scale tonali, blocca-e-ri-genera, esportazioni di design token — più qualche piccolo tocco che lo rende davvero divertente da usare.
Complementare, analoghe, triadica, tetradica, complementare divisa, monocromatica — tutte calcolate in OKLCH, così una palette triadica di tre tonalità sature e brillanti rimane uniformemente luminosa. Niente fango HSL.
Inserisci il colore del tuo brand e ottieni una scala tonale in stile Tailwind 50, 100, 200, … 900, 950, generata percorrendo la luminosità lungo una curva OKLCH. Il chroma viene compresso agli estremi così i colori restano nel gamut sRGB.
Fissa qualsiasi campione (icona del lucchetto) e premi Ri-genera (oppure premi semplicemente Spazio) per variare gli altri all'interno dell'armonia scelta. Itera velocemente, conserva ciò che ami.
Custom property CSS (--brand-500), blocco @theme di Tailwind v4, mappa SCSS e design token JSON pronti per Style Dictionary / Figma Tokens. Più una striscia di campioni PNG 1200×200.
Ogni campione mostra il proprio rapporto di contrasto WCAG rispetto al migliore tra bianco e nero, con un badge AA / AAA / fail. Individua i problemi di accessibilità prima del rilascio.
Ogni byte rimane sul tuo dispositivo. Matematica OKLCH, generazione delle armonie, derivazione della scala, esportazione PNG: tutto gira come JavaScript in locale. Apri DevTools → Network e verifica zero richieste in uscita.
Quattro passaggi da un singolo colore di base a una palette completa pronta per i design token.
Clicca sul riquadro colore, incolla un HEX o premi Base casuale per ispirazione. Lo strumento centra l'intera palette su questo colore — sia i campioni d'armonia sia la scala tonale a 11 step.
Predefinita è Analoghe — tre colori entro 30° dalla base, perfetti per palette di brand pacate. Complementare per accenti di contrasto. Triadica / Tetradica per brand editoriali / giocosi. Monocromatica per sistemi tonali a tonalità unica. Tutti calcolati in OKLCH così rimangono uniformemente luminosi.
Clicca sull'icona del lucchetto su ogni campione che vuoi mantenere, poi premi Spazio (o premi Ri-genera) per variare gli altri all'interno dell'armonia. Itera velocemente. Modifica direttamente qualsiasi campione cliccando sul suo campo HEX se vuoi inchiodare un valore esatto.
Copia l'output CSS (custom property), Tailwind v4 (blocco @theme), mappa SCSS o design token JSON. Oppure premi Scarica PNG per una striscia di campioni 1200×200 pronta da inserire in un brief di design.
Quattro scenari comuni in cui uno strumento di palette OKLCH privacy-first batte la regolazione manuale degli HEX in Figma.
Hai un colore di brand, ti serve un sistema attorno ad esso. Inserisci l'HEX, scegli Analoghe, ri-genera finché due colori di supporto non funzionano, blocca tutti e tre. Passa alla vista Scala tonale, copia il blocco @theme di Tailwind, incolla nell'app.css del nuovo progetto. Tempo totale: 5 minuti.
Il colore indigo predefinito di Tailwind non è il tuo brand. Il tuo brand è #5B3FCD. Inseriscilo, ottieni una scala tonale a 11 step che rispecchia perfettamente la spaziatura di Tailwind. Copia il blocco @theme — ogni bg-brand-500 / text-brand-700 funziona subito.
Ogni campione mostra il proprio rapporto di contrasto WCAG + badge AA/AAA. Verifica che brand-500 raggiunga AA su sfondo bianco e che brand-100 resti leggibile come tinta di sfondo con testo brand-900. Risolvi i campioni problematici ri-generandoli singolarmente.
Le agenzie / aziende multi-brand mantengono N design system paralleli, ciascuno con la stessa forma ma una tonalità di brand differente. Usa lo stesso flusso armonia + scala tonale per ogni brand, esporta ciascuno come token JSON, inseriscili in Style Dictionary. Forma coerente, identità distinta.
I colori del tuo brand non lasciano mai il tuo dispositivo. Apri DevTools → Network e vedrai zero richieste in uscita durante qualsiasi operazione.
canvas locale; l'immagine dei campioni viene generata interamente nella memoria del browser e scaricata come Blob — niente attraversa la rete.
Letture selezionate su palette OKLCH, sistemi di colore di brand e design token.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Il nostro Color Picker & Converter è per un colore alla volta — scegli / converti / copia. Questo strumento è per le palette: inserisci un colore di base e ottieni un intero sistema pronto per il brand (armonie + scala tonale) in un solo colpo. È la differenza tra comprare una camicia e ottenere un intero guardaroba.
HSL distribuisce le tonalità in modo non uniforme (il giallo a 60° appare molto più luminoso del blu a 240° anche con lo stesso valore di luminosità). Una palette triadica in HSL ha un campione visibilmente più chiaro o più spento degli altri. OKLCH è percettivamente uniforme — tre campioni con la stessa luminosità OKLCH sembrano avere la stessa luminosità. È per questo che ogni design system moderno (Apple HI, Tailwind v4, IBM Carbon) si sta spostando su OKLCH per armonie e scale.
È la scala di colori brand in stile Tailwind: indigo-50 (più chiaro), indigo-100, indigo-200, … indigo-900, indigo-950 (più scuro). Inserisci il colore del tuo brand e lo strumento genera automaticamente tutti gli 11 step percorrendo la luminosità OKLCH lungo una curva fissa. Il risultato è un sostituto drop-in per qualsiasi token di palette Tailwind, nella tonalità del tuo brand.
Clicca sull'icona del lucchetto in alto a sinistra di qualsiasi campione — rimane fissato. Poi premi Ri-genera oppure Spazio per variare ogni campione sbloccato all'interno dell'armonia scelta. È così che si trova una grande palette: fissa il colore del brand su cui hai già deciso ed esplora le variazioni intorno ad esso.
No. Matematica OKLCH, generazione delle armonie, derivazione della scala tonale, calcolo del rapporto di contrasto, esportazione PNG, ogni copia negli appunti — tutto gira in JavaScript sul tuo dispositivo. Apri DevTools → Network e vedrai zero richieste in uscita. Incolla i colori del tuo brand, i design token interni, le palette protette da NDA — niente lascia il tuo computer.