Generador de tints i ombres
21 colors
#ffffffrgb(255, 255, 255)#ebf3fergb(235, 243, 254)#d8e6fdrgb(216, 230, 253)#c4dafcrgb(196, 218, 252)#b1cdfbrgb(177, 205, 251)#9dc1fbrgb(157, 193, 251)#89b4fargb(137, 180, 250)#76a8f9rgb(118, 168, 249)#629bf8rgb(98, 155, 248)#4f8ff7rgb(79, 143, 247)#3b82f6rgb(59, 130, 246)#3575ddrgb(53, 117, 221)#2f68c5rgb(47, 104, 197)#295bacrgb(41, 91, 172)#234e94rgb(35, 78, 148)#1e417brgb(30, 65, 123)#183462rgb(24, 52, 98)#12274argb(18, 39, 74)#0c1a31rgb(12, 26, 49)#060d19rgb(6, 13, 25)#000000rgb(0, 0, 0)Detalls tècnics
Com funciona el generador de tints i ombres
Què fa l’eina
El generador de tints i ombres crea tints més clars (barrejats amb blanc) i ombres més fosques (barrejades amb negre) a partir de qualsevol color base. Introdueix un color i tria el nombre de passos per generar un degradat suau de variacions. Cada pas mostra els valors HEX i RGB i el percentatge de mescla, cosa que facilita construir escales de color coherents per al disseny d’IU, el branding i la visualització de dades.
Casos d’ús habituals per a desenvolupadors
Els desenvolupadors utilitzen generadors de tints i ombres quan construeixen escales de tokens de disseny (p. ex., blue-100 fins a blue-900), creen estats hover i active per a elements interactius, dissenyen jerarquies de color accessibles i produeixen colors de fons i de superfície coherents per a temes clars i foscos. L’eina és essencial per crear paletes de colors personalitzades de Tailwind CSS o sistemes de color de Material Design.
Com funcionen els tints i les ombres
Un tint es crea barrejant un color amb blanc, augmentant-ne la lluminositat. Una ombra es crea barrejant-lo amb negre, disminuint la lluminositat. La fórmula per als tints és: new = base + (255 - base) × factor. Per a les ombres: new = base × (1 - factor). Els passos es distribueixen uniformement entre el color base i el blanc pur (tints) o el negre pur (ombres), produint un degradat lineal de valors de color.
Errors habituals i casos límit
La mescla lineal amb blanc o negre pot produir tints esvaïts o ombres enfangades per a alguns tons. Els grocs poden semblar verdosos quan s’enfosqueixen, i els blaus poden perdre vivacitat quan s’aclareixen. Per a escales perceptivament uniformes, considera utilitzar els espais de color OKLCH o CIELAB. Verifica sempre que els teus tints més clars i les ombres més fosques mantinguin un contrast suficient amb els fons previstos.
Quan utilitzar aquesta eina vs codi
Utilitza aquesta eina del navegador per a una exploració ràpida i per generar escales de color durant el treball de disseny. Per a sistemes de disseny en producció, genera tints i ombres de manera programàtica amb biblioteques de color com chroma.js o culori, que admeten espais de color perceptivament uniformes i poden exportar tokens de disseny en qualsevol format.