Browsing Tag

design

webbutveckling

De 10 bästa färgverktygen på nätet

Förra veckan tipsade jag om några program för att ta fram färgpaletter. Idag tänkte jag gå igenom några av alla de färgrelaterade gratistjänster som finns på nätet. De flesta av dem har olika syften eller funktion, men gemensamt för dem alla är att de kan användas i framtagningen av färgpaletter för webben.

  1. Kuler – Adobes verktyg/community för att skapa och dela färgpaletter. Utvecklad som en demonstration av möjligheterna med Flash. Kräver Flash Player 9, men fungerar riktigt smidigt trots ett ganska komplicerat gränssnitt. Registrerade användare kan spara paletter.
  2. Colour lovers – Möjlighet att skapa palett från en bild eller manuellt. Ger förslag på matchande/liknande färger men har ingen möjlighet att ange hur matchningen ska göras. Registrerade användare kan spara och dela paletter.
  3. colr.org – Genererar paletter från bilder eller andra webbplatser. Har flera olika slumpfunktioner och registrerade användare kan spara paletter.
  4. ColorJack – Ser bedrägligt enkel ut men har massor av funktioner. Kan generera paletter enligt alla vanliga formler plus några till. Dessutom slumpgenerator och anpassning till olika varianter av färgblindhet.
  5. Color Schemer Online – Enklare variant av desktopprogrammet från samma företag. Rakt på sak utan några utmärkande funktioner.
  6. Color palette creator – Skapar tio olika nyanser mellan vitt och svart, av den valda färgen. Bra att ha när man redan bestämt sig för en huvudfärg.
  7. Color Blender – Skapar valfritt antal nyanser mellan två olika färger.
  8. Color Fields Colr Pickr – Intressant liten sida som hämtar olika foton från flickr beroende på vald färg.
  9. Colour Contrast Check – Mäter kontrastskillnaden mellan två färger och anger om kontrasten är tillräcklig för att uppfylla W3C riktlinjer för tillgängliga webbplatser.
  10. Color Vision – Visar hur färgpaletten upplevs av människor med olika typer av färgblindhet.

Utanför min topplista hamnar de resterande 27 webbapplikationer som jag prövat. Själv tycker jag att de är ganska överflödiga, men eftersom alla kanske inte har samma smak eller behov som jag har så kommer de här: Technicolor, Colormixers, EasyRGB, Unsafe Colormatch, Color Wheel, 4096 Color Wheel, Colour Schemes, Infohound Color Schemer, Palette Man, nColor, Color Wheel, Peter Pipers Palette Picker, ChromoFlash, Color SynthAxis, Munsell Palette, Color Tool, Color Scheme Generator 2, Colour Scheme Chooser, Color Palette Generator, DeGreave Color Palette Generator, I Like Your Colors, Color Blender, ColorToy 2, ColorMatch Remix, Genopal Online och till sist Color Calculator. Puh!

webbutveckling

9 program för att hitta rätt färger

För oss som inte föddes med färgkänsla så finns det numera en rad hjälpmedel som kan göra vårt liv lättare. Det finns gott om verktyg som föreslår färgpaletter baserade på en utgångsfärg. En annan typ av verktyg hjälper oss samla inspiration från andras färgval. Slutligen så finns det webbplatser som samlar och katalogiserar färdiga färgscheman som kan användas direkt eller modifieras efter tycke och smak.

Idag tänkte jag titta lite på vilka program för att skapa färgscheman som finns för desktopbruk:

  • Genopal – Ett av de mer avancerade programmen. Färgpaletterna som skapas har en medveten dragning åt toner som upplevs som mer naturliga. Med pipettverktyg, färdiga paletter och flera exportmöjligheter. Finns för både Mac och PC och kostar 25 dollar.
  • Color Schemer Studio – Kan skapa färgscheman från fotografier, har en praktisk utskriftsfunktion samt massor med import- och exportmöjligheter. Bland annat kan man importera färgscheman från webbplatser eller css-filer. Finns för både Mac och PC och kostar 50 dollar.
  • ColorImpact 3 – Ett kompetent verktyg som har de vanligaste funktionerna. Stöd för flera olika paletter, konfigurerbart gränssnitt och import-/exportfunktioner samt utskrivningsbara färgkartor. Finns till PC för 50 dollar.
  • Color Wheel Pro – Ett enklare program som saknar flera av konkurrenternas funktioner. Verkar dessutom vara kalibrerat för att skapa ganska grälla färgpaletter. Finns till PC för 40 dollar.
  • Coloristic – Ett enkelt litet pipettverktyg med förstoring. Till PC eller Mac för 12 dollar.
  • ColorPic – Ett pipettverktyg med möjlighet att spara olika paletter, val av samplingsstorlek och förstoring. Finns till PC och är gratis.
  • Pixie – Enket litet pipettverktyg på bara 8kb. Gratis till PC.
  • ColorWrite – Enkelt program för att skapa färgscheman. Verkar inte ha uppdaterats sedan 2003 men är gratis och finns till PC.
  • ColorZilla – En extension till Firefox med inbyggt pipettverktyg. Fungerar bara i själva webbläsarfönstret. Gratis men kräver Mozilla Firefox.

Av de uppräknade programmen så står de tre förstnämnda i en klass för sig. Genopal och Color Schemer Studio har dessutom båda funktionalitet som saknas hos konkurrenterna. Med tanke på detta så är det svårt att motivera köp av något av de andra programmen. För de som inte kräver ett fullfjädrat palettverktyg så är gratisprogrammen ColorPic och ColorZilla vettiga alternativ.

Uppdatering:

Upptäckte att jag missat (åtminstone) två program:

  • Painter Picker – Verkar lovande. Skapar många olika typer av paletter och har några smidiga funktioner för att blanda färger och få förslag på de vanligaste matchande färgerna. Finns bara till Mac och kostar 16 dollar.
  • Color Consultant Pro – Ganska typiskt palettverktyg. Utmärker sig genom att alla beräkningar som används för att ta fram färgscheman åskådliggörs på ett tydligt sätt. Bara till Mac. Kostar 30 dollar.
webbutveckling

Två olika inblickar i designprocessen

Få saker är lika inspirerande som att få en inblick i hela processen bakom ett färdigt arbete. Att få se vad som valdes bort och varför, vilka avvägningar som gjordes och vilka metoder som användes. Titta in hos design och varumärkesbyrån Plaid som skriver om sin remake av allt från visitkort till telefonsvararmeddelande (via Speak up) eller hos Veerle som skriver om designprocessen bakom sitt företags nya grafiska profil.

webbutveckling

Stapeldiagram med CSS för utskrift

Att göra en version för utskrift av stapeldiagrammet jag experimenterade med visade sig vara lättare sagt än gjort. De flesta moderna webbläsare skriver inte ut vare sig bakgrundsbilder eller bakgrundsfärger om inte besökaren explicit slår på den möjligheten – och det tror jag inte någon vill förlita sig på. Dessutom tar sig webbläsarna i regel friheten att byta ut för ljusa textfärger till svart eller mörkgrått. Till detta kommer en hel mängd små underliga buggar som bara verkar komma fram vid utskrift.

Efter en del kompromissande nöjde jag mig med denna variant (bara print-stilmall, välj print preview för att se den). Förutom förenklingen (gråskala, ingen bakgrund, inga skuggor, ingen ram) så valde jag att ta bort siffrorna i staplarna. De verkade inte gå att göra tillräckligt ljusa för att synas mot de mörka staplarna, men om man nöjer sig med ramar istället för bakgrund för staplarna så är det inte några problem att visa dem. Kanske skulle det vara en bättre lösning (ingen informationsförlust), men jag ville se om det gick att få samma grafiska stil på diagrammet vid utskrift som på skärmen.

Exemplet är än så länga bara testat i Firefox 2 och Internet Explorer 7.

För den som gör speciella printstilmallar så är webbläsarnas egna regler för vad som ska visas lite irriterande. Som flera tidigare har påpekat borde den bästa lösningen vara att webbläsarna litar på att de som har specificerat media="print" vet var de gör. En stilmall specificerad för ett speciellt medium borde alltid ha företräde framför webbläsarnas egna räddningsförsök (men givetvis stå tillbaka för en lika specifik användarstilmall).

webbutveckling

Stapeldiagram med CSS

Tidigare har jag använt PHP-biblioteket JpGraph i några olika projekt för att skapa grafer av olika slag. Det är dock inte alltid praktiskt att generera bilder för att visa statistik, så jag har lekt lite med css för att se om det inte går att hitta alternativa metoder.

Med utgångspunkt i Eric Meyers vertical bargraphs har jag försökt ta fram en lite snyggare och enklare variant. Målsättningan var att skapa stapeldiagram från semantiskt korrekt html med ett minimum av extra element, utan för komplicerad css som enkelt skulle kunna genereras dynamiskt och fungera i alla moderna webbläsare utan några css-hacks.

Eftar att ha provat med både tabeller och listor så fastnade jag till slut för definition lists som den enklaste metoden för att märka upp datan. Det finns många åsikter om hur definition lists ska användas, själv hör jag till den grupp som menar att man med fördel kan användas dem att koppla ihop nyckel-/värde-par. Tabeller skulle varit mer korrekt, men de kräver för mycket extra stilregler för olika webbläsare för att vara praktiskt i längden.

Det finns några saker med exemplet som inte fungerar så bra. Den extra koden som krävs för att sätta ut axelmarkeringarna är antagligen ganska förvirrande för besökare utan stöd för stilmallar. Möjliga lösningar är att använda sig av en bakgrundsbild (svårare att generera dynamiskt) eller att lägga in en beskrivande rubrik som förklarar vad siffrorna betyder (innebär ännu mer kod). Dd-elementet innehåller ett span-element som kan tas bort om man inte behöver bakgrundsskuggan överst och till höger.

Har testat exemplet i IE7, IE6 och Firefox 2 på Windows XP samt i Safari 2 och Firefox 2 på Mac OSX.

Hör av dig om du har förslag på förbättringar eller har egna exempel på lösningar.

Här är mitt exempel.