Colore dominante di una foto
Questo strumento del KIT individua il colore dominante di un'immagine — quello che pesa di più visivamente — e te ne dà il codice HEX e RGB. Serve per lo sfondo di una scheda prodotto, il colore di un placeholder mentre la foto carica o la tinta di un tema. Tutto nel browser.
Esegui gratis nel browser
Funziona nel tuo browser: gratis, senza registrazione, i file non escono dal tuo dispositivo.
Un solo colore, quello che conta
A differenza di una palette con più tinte, qui ottieni il colore principale dell'immagine: la tinta che domina la scena e che l'occhio percepisce per prima. È quello che ti serve quando devi prendere una decisione secca — che sfondo metto dietro questa foto? — senza dover scegliere tra tante opzioni. Un valore, netto, pronto da usare.
A cosa serve
Il colore dominante è comodo per far dialogare un'immagine con ciò che la circonda: lo sfondo di una card che riprende la tinta della foto, una fascia coordinata, il colore di caricamento mostrato al posto dell'immagine mentre arriva. In tutti questi casi non vuoi una tavolozza, vuoi un solo colore che si sposi con la foto, e questo strumento te lo dà con precisione.
Gratis e nel browser
È uno strumento gratuito del KIT: gira interamente nel tuo browser, senza limiti e senza registrazione. La foto non viene inviata a nessun server e l'analisi avviene sul dispositivo. Puoi ricavare il colore anche da immagini di un progetto ancora riservato, senza affidarle a nessuno.
Immagini con tanti colori
Anche in una foto molto varia c'è quasi sempre una tinta che prevale: lo strumento la calcola pesando quanto ciascun colore occupa l'immagine. Se il risultato ti sembra troppo scuro o troppo chiaro per il tuo uso, puoi sempre estrarre la palette completa e scegliere a mano un colore più adatto tra quelli principali.
Casi d'uso
Lo sfondo di una scheda prodotto
Un negozio online mostra ogni prodotto su una card. Prendendo il colore dominante della foto e usandolo come sfondo tenue, ogni scheda risulta armoniosa con l'immagine che contiene.
Il colore di caricamento di una galleria
Mentre le foto di una galleria si caricano, al loro posto compare un riquadro del colore dominante di ciascuna: la pagina sembra più fluida e meno vuota nell'attesa.
Un'email coordinata
Per una newsletter con una grande foto di testata, usi il suo colore dominante per i titoli e i pulsanti, dando al messaggio un aspetto curato e coerente.
Domande frequenti
Che differenza c'è tra colore dominante e palette?
Il colore dominante è la singola tinta che prevale nell'immagine; la palette è invece un insieme dei colori principali. Scegli il colore dominante quando ti serve un solo valore — uno sfondo, un placeholder — e la palette quando vuoi costruire una tavolozza completa.
In che formato ottengo il colore?
Ricevi il codice HEX (ad esempio #3A4C6B) e i valori RGB, pronti da incollare in un foglio di stile, in un'email o in un editor grafico, senza conversioni.
È gratis?
Sì. Il calcolo del colore dominante nel browser è gratuito, senza limiti e senza registrazione, e senza alcun abbonamento.
La foto viene caricata da qualche parte?
No. L'analisi avviene interamente nel browser: l'immagine non lascia il tuo dispositivo, quindi puoi usarla anche su materiali riservati.
E se l'immagine ha molti colori diversi?
Lo strumento sceglie comunque la tinta che occupa la porzione maggiore della foto. Se quel colore non ti convince per il tuo scopo, puoi estrarre la palette completa e selezionare a mano un'alternativa tra i colori principali.
Funziona dal telefono?
Sì, nel browser del telefono, senza installare nulla: carichi la foto dalla galleria e ottieni subito il codice del colore dominante.
Per sviluppatori — accesso via API
Tutto quello che vedi in questa pagina è disponibile anche via API. Questa sezione è per i team che vogliono integrarlo nei propri sistemi; chi non ne ha bisogno può semplicemente usare lo strumento qui sopra.
Endpoint
Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.
Chiamala dal tuo stack
curl -X POST https://api.kit.forhosting.com/image/dominant-color \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"image":"https://ejemplo.com/imagen.jpg"}'const res = await fetch("https://api.kit.forhosting.com/image/dominant-color", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"image": "https://ejemplo.com/imagen.jpg"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/dominant-color",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"image": "https://ejemplo.com/imagen.jpg"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/dominant-color", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"image":"https://ejemplo.com/imagen.jpg"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"image":"https://ejemplo.com/imagen.jpg"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/dominant-color", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Esempio di richiesta
{
"image": "https://ejemplo.com/imagen.jpg"
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.dominant_color",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L'API è asincrona: ricevi subito un task_id e puoi fare polling fino a 1 richiesta al secondo.
Prezzi
Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.
Limiti
max_mb | 15 |
max_megapixels | 12 |
Errori
| HTTP | Codice | Significato |
|---|---|---|
401 | unauthorized | Chiave API mancante o non valida: controlla l'header Authorization. |
402 | insufficient_balance | Credito esaurito: ricarica per continuare a eseguire attività. |
404 | unknown_type | Tipo di attività sconosciuto: controlla il campo type della richiesta. |
429 | rate_limited | Troppe richieste in poco tempo: rallenta e riprova tra qualche secondo. |