Välj en färg, ta koden och fortsätt jobba

Färgväljare, gradientbyggare och bildpipett på en och samma sida. Inget konto, ingen installation och ingen väntan: välj en nyans och kopiera den som HEX, RGB, HSL eller HSV.

%
Öppna färgsidan

Färgkoder

HEX#0F37FF
RGBrgb(15, 55, 255)
HSLhsl(230°, 100%, 52.94%)
HSVhsv(230°, 94.12%, 100%)
CMYKcmyk(94.12%, 78.43%, 0%, 0%)
XYZxyz(19.61, 10.05, 95.5)
LABlab(37.93, 62.96, -98.45)
LCHlch(37.93, 116.86, 302.6°)

Trendfärger

Se alla trendfärger
#A5E3FE
#8E1025
#65E76F
#046B8B
#C37B3C
#C02148
#B5A9D0
#F29C8C
#2C3F44
#F04777
#3B89B0
#7CD0B2

Vad som finns här

Pipett

Hämta färger ur en uppladdad bild, eller från vad som helst på skärmen där webbläsaren tillåter det. Släpp en fil på sidan och klicka på en pixel.

Formatkonvertering

Växla direkt mellan HEX, RGB, HSL, HSV, CMYK, XYZ, LAB och LCH och kopiera vilket värde som helst rakt in i CSS eller ditt formgivningsprogram.

Gradientbyggare

Lägg till och dra stopp längs stapeln, växla mellan linjär och radiell, ställ in vinkel och opacitet och kopiera sedan färdig CSS.

Färghistorik

Varje färg och gradient du gör stannar i din webbläsare, så att du kan återvända till den eller återanvända den i ett annat projekt.

Harmonier och varianter

Varje färgsida visar ljusare och mörkare toner samt sex harmonischeman, och gör vilket som helst av dem till en gradient med ett klick.

Gratis och privat

Ingen betalvägg och ingen spårning av vad du väljer. Uppladdade bilder läses i webbläsaren och skickas ingenstans.

Vem det är för

Formgivare och produktteam
När du skissar ett gränssnitt eller en varumärkespalett, provar kombinationer och kopierar exakt CSS för en gradient.
Illustration och måleri
För att plocka färger ur fotografier och målningar med pipetten och planera mjuka övergångar.
Frontend-utveckling
För att få enhetliga färgvärden genom ett projekt och läsa av dem ur en befintlig formgivning.
Den som kontrollerar tillgänglighet
För att jämföra en färg mellan modeller och justera den tills kontrastvärdet klarar den gräns du behöver.

Så använder du den

  1. 1

    Välj en färg

    Klicka var som helst i mättnadsfältet och finjustera sedan med reglagen för nyans och alfa. HEX, RGB och HSV uppdateras löpande.

  2. 2

    Hämta ur en bild

    Dra en bild till sidan eller välj en fil och klicka sedan på den pixel du vill ha. Koderna dyker upp direkt.

  3. 3

    Bygg en gradient

    Klicka på stapeln för att lägga till ett stopp och dra det på plats. Växla mellan linjär och radiell och ställ in vinkeln.

  4. 4

    Kopiera och återanvänd

    Kopiera värdet eller hela CSS-deklarationen. Allt du väljer sparas automatiskt i historiken.

Vanliga frågor

Ett litet verktyg som inte är i vägen

Det började som ett internt hjälpmedel: vi ville plocka en färg, justera den och gå vidare, utan att först öppna ett tungt formgivningsprogram. Det är medvetet en enda sida, medvetet snabbt, och det kommer att förbli gratis.

Webbläsartillägg

Vill du hellre hämta färger direkt från sidorna du besöker? Tilläggen för Chrome och Edge lägger en pipett i verktygsfältet, för egen historik och öppnar det här verktyget med ett klick.

Öppna Chrome Web StoreÖppna Microsoft Edge Add-ons