Värinvalitsin ja palettipoimija – poimi värejä kuvasta

Lähetä mikä tahansa JPG-, PNG-, WebP- tai GIF-kuva ja napsauta mitä tahansa kohtaa näytetyssä kuvassa – kohdistimen alla oleva tarkka pikseli näytteistetään ja näytetään HEX-, RGB- ja HSL-arvoina, joista jokaisen voi kopioida yhdellä napsautuksella. Täydellinen brändivärin sovittamiseen, värimallin näytteistämiseen valokuvasta tai korostussävyjen poimimiseen suunnittelumallista.

Napsauta mitä tahansa pikseliä, niin tämä värivalitsin näyttää sen HEX-värikoodin (esimerkiksi #FF6B35) RGB- ja HSL-arvojen rinnalla — samat HTML/CSS-värikoodit, jotka liität suoraan tyylitiedostoon, suunnittelutokeniin tai HTML-attribuuttiin. Napsauta Kopioi saadaksesi heksakoodin yhdellä napsautuksella.

Kuva pienennetään 320 pikseliin pidemmältä sivultaan, minkä jälkeen jokainen pikseli lajitellaan koreihin kanavakohtaisten neljän ylimmän bitin perusteella. Eniten täytetyt korit keskiarvoistetaan takaisin täydeksi 8-bittiseksi väriksi, lajitellaan yleisyyden mukaan ja palautetaan paletiksesi. Tulos on tyypillisesti 5–24 hallitsevaa väriä, jotka tiivistävät kuvan visuaalisesti.

Kyllä. Latauspainikkeet tuottavat kaksi muotoa: CSS-muuttujalohkon, joka on valmis liitettäväksi :root-valitsimeen (--color-1, --color-2…), ja JSON-tiedoston, jossa on heksa-, RGB-komponentit ja painoprosentti jokaiselle värille. Molemmat muodot integroituvat siististi design-tokeneihin, Tailwind-asetuksiin ja palettikirjastoihin.

Ei — värien poiminta ja palettien luonti tapahtuvat kokonaan selaimessasi HTML canvas API:n avulla. Kuva pysyy laitteellasi, mikä tekee työkalusta turvallisen julkaisemattomille tuotekuville, luonnosmalleille ja salassapitosopimuksen alaisille brändiaineistoille.

Brändi- identiteettityössä 5–8 väriä on ihanteellinen määrä – se vangitsee hallitsevan teeman laimentamatta korostusvalintoja. Datavisualisointiin suosittelemme 10–16 väriä, jotta saat riittävästi luokittelevia sävyjä. Liukusäätimellä voit valita 5:n ja 24:n väliltä.

Pikselit, joiden alfa on alle 128, jätetään huomiotta, joten läpinäkyvät taustat eivät saastuta palettia "tausta"-väreillä. Tämä tekee kuvan värivalitsimesta erityisen hyvän tuoteleikkauksiin, tarrataideteoksiin ja eristettyihin kohteisiin.

HEX (#RRGGBB) on tiivein ja se, mitä CSS, Figma ja Sketch käyttävät oletuksena. RGB näyttää kolme komponenttiarvoa väliltä 0–255 – hyödyllistä, kun käsittelet kuvadataa ohjelmallisesti. HSL (sävy, kylläisyys, vaaleus) on intuitiivinen värien säätämiseen: muuta sävyä vaihtaaksesi väriperhettä ja säädä vaaleutta vaaleampia ja tummempia sävyjä varten.

Kyllä. Ilmainen, ei tiliä, ei rajoituksia kuvan koolle tai poimittujen palettien määrälle. Mitään ei tarvitse asentaa – koko työkalu on yksi verkkosivu.

Kuvaa ei tarvita. Yläosan värivalitsin ja väriympyrä toimivat itsenäisesti — vedä kylläisyys-/kirkkausneliötä ja sävyliukusäädintä tai kirjoita mikä tahansa HEX-, RGB- tai HSL-arvo asettaaksesi tarkan värin. Kuvan lataaminen on valinnaista, vain värien poimimiseksi pipetillä valokuvasta.

Valitse perusvärisi, ja väriharmonia-paneeli rakentaa heti vastaväri-, lähiväri-, kolmisointu-, jaetun vastavärin, neliväri- ja yksiväriskeemoja väriympyräteorian avulla. Napsauta mitä tahansa värimallia kopioidaksesi sen HEX-koodin.

In the standalone Color Picker & Wheel, dial in your color and the panel shows its contrast ratio against pure white and pure black along with the WCAG rating — AAA, AA, AA Large, or Fail. Use this before finalizing a text or button color so it stays readable and meets WCAG 2.1 accessibility guidelines.

Yes. The standalone Color Picker & Wheel shows the closest matching named CSS color next to whatever HEX, RGB or HSL value you've dialed in, which is handy for quickly describing a shade in a brief, ticket or design spec without guessing.

Click Random in the Color Picker & Wheel to jump to a new color, then use the Color harmonies panel below it to see complementary, analogous, triadic and other coordinated palettes built from that color — a quick way to find a starting point when you're designing from scratch rather than sampling an existing image.

Use the Size dropdown above the palette to choose 5, 8, 10, 16 or 24 dominant colors — the palette recalculates instantly as you change it. Combine a small size like 5 for a clean brand palette with the picked-color eyedropper to grab one or two exact accent shades the automatic extraction might average away.

Yes — the standalone Color Picker & Wheel shows your current color's contrast ratio against pure white and pure black right under the swatch, labelled AAA, AA, AA Large or Fail per the WCAG thresholds (7:1, 4.5:1, 3:1). Use it to check a text/background pairing meets accessibility standards before you lock in a design color.

The Color Picker & Wheel automatically matches whatever color you've dialed in — via the picker, HEX box, or RGB/HSL fields — to its closest standard CSS color name, shown as 'Closest name' next to the swatch. It's a quick way to describe a color verbally or find its nearest web-safe equivalent.

Yes — every click or tap on the uploaded image adds a new swatch to your Picked Colors list rather than replacing the last one, so you can build up a custom set of exact pixel colors from different parts of a photo. Remove any single swatch with its × button, or clear the whole list with Clear picked.

Yes — the Random button (shuffle icon) in the Color Picker & Wheel jumps to a new hue, saturation and brightness combination in one click, useful for breaking creative block or exploring a palette you wouldn't have typed in manually. HEX, RGB, HSL and the harmony swatches below all update together.

On a touchscreen, drag your finger across the image to preview the color under it in a live floating swatch, then lift your finger to add that exact pixel to your Picked Colors list — no separate confirm tap needed. The same palette-size dropdown and export buttons work identically on mobile.