Color Picker Pro
Avancerad färgväljare med stöd för flera format
Färgformat
Färgharmoni
Color Picker Pro
Avancerad färgväljare med stöd för flera format
Funktioner
- Välj färger via nyans-/mättnads-/ljushets-reglage eller klistra in ett HEX-, RGB- eller HSL-värde för att synka alla kanaler omedelbart
- Sex format samtidigt i utdata: HEX, RGB, RGBA, HSL, HSLA och CMYK (utskriftsklar, ingen profilinbäddning)
- WCAG 2.1-kontrastförhållande mot valfri testtextfärg, med AA- (4.5:1) och AAA- (7:1) godkänd/underkänd-emblem via W3C relativ luminansformel
- Färgharmoni-generator producerar komplementära, triadiska, analoga och monokromatiska varianter från aktuell nyans
- Kuraterade paletter inklusive Material Design, Tailwind CSS och en tillgänglighet-fokuserad högkontrast-uppsättning
- Lokal färghistorik med upp till 20 senaste val sparade i localStorage (rensas på begäran, synkas aldrig)
- Alfakanal-stöd för RGBA- och HSLA-utdata redo att släppas in i CSS custom properties
- Slumpmässiga provfärger och ettkliks-kopiering för valfri enskild formatsträng
Så använder du
- Dra nyans-, mättnads- och ljushets-reglagen eller klistra in ett känt HEX-värde för att styra väljaren från en känd startpunkt.
- Justera alfa-reglaget om du behöver transparens för overlay, glaseffekt eller designtoken.
- Öppna Format-panelen för att se HEX, RGB(A), HSL(A) och CMYK sida vid sida och kopiera det din stack förväntar.
- Aktivera Tillgänglighets-panelen och sätt en testtextfärg för att verifiera att WCAG-kontrast når AA eller AAA innan leverans.
- Öppna Färgharmoni för komplementära, triadiska eller analoga följeslagare för en balanserad palett.
- Lägg till val i Historik medan du experimenterar; klicka vilken färgruta som helst för att återkalla den senare i sessionen.
Tips och bästa praxis
- Förhandsgranska ändringar i realtid medan du justerar inställningar.
- Kopiera den genererade koden direkt till din CSS-stilmall.
- Testa dina designer i ljust och mörkt läge för tillgänglighet.
- Använd webbläsarens devverktyg tillsammans med detta verktyg för livetest.
- Spara dina favoritkonfigurationer för snabb åtkomst senare.
Vanliga frågor
Varför visar samma HEX olika RGB-värden i andra verktyg?
Färgvärden kan specificeras i sRGB eller display-P3, och webbläsare kan rendera dem olika beroende på monitorkalibrering och ICC-profiler. Denna väljare använder sRGB (CSS Color Module Level 3 standard) och avrundar till 8-bitars kanaler (0–255). För wide-gamut design-tokens, använd ett P3-medvetet verktyg och konvertera med color()-notation från CSS Color Level 4.
Hur beräknas WCAG-kontrastförhållandet?
Förhållandet använder W3C relativ luminansformel: varje sRGB-kanal lineariseras (sRGB-till-linjär gamma), viktas med 0.2126R + 0.7152G + 0.0722B, sedan kombineras ljusare och mörkare luminanser som (L1 + 0.05) / (L2 + 0.05). AA klarar 4.5:1 för normal text och 3:1 för stor text; AAA vid 7:1. Matematiken körs i din webbläsare på aktuell förgrund/bakgrund-par.
Skickas något till en server när jag väljer en färg?
Nej. Färgkonverteringar, palettsökning, kontrastmatematik och historik körs alla klientsida i JavaScript. Den enda beständiga lagringen är localStorage för historik, som lever på din enhet och aldrig lämnar den. Du kan använda verktyget offline när sidan är cachad.
Varför matchar CMYK-utdata inte exakt mina Pantone- eller Adobe-värden?
CMYK är enhetsberoende och kräver en ICC-profil för att vara korrekt för tryck. Webbläsarverktyg kan inte bädda in en CMYK-profil, så utdata här är en naiv sRGB-till-CMYK-konvertering användbar endast som snabb referens. För produktionstryck, generera CMYK i Photoshop eller Illustrator med tryckerns profil.
Hur väljer harmoni-generatorn sina färger?
Generatorn roterar den aktuella HSL-nyansen: komplementär är +180 grader, triadisk lägger till två färger vid +120 och +240, analog lägger till grannar vid +30 och +330, monokromatisk skiftar mättnad och ljushet. Detta är en mekanisk färghjulsmetod: ger en startpunkt men tar inte hänsyn till perceptuell uniformitet, som skulle kräva Oklch eller Lab färgrymder.
Kan jag använda dessa värden direkt som CSS custom properties?
Ja. HSL-utdata passar direkt in i modern CSS som `--brand: hsl(217 100% 60%)` eller med alfa som `hsla(217, 100%, 60%, 0.8)`. HSL föredras generellt för designtokens eftersom det gör ljushetsramper triviala — att skjuta upp det tredje värdet ger omedelbara hover- och active-tillstånd utan att räkna om RGB.
Stödjer väljaren display-P3 eller wide-gamut-utdata?
För närvarande inte. Väljaren antar sRGB och ger 8-bit-per-kanal HEX/RGB utdata. Om du behöver P3 eller Rec.2020, använd ett verktyg som emit CSS Color Level 4-syntax som `color(display-p3 0.4 0.5 0.9)`. Vi kan lägga till detta när webbläsarstöd stabiliseras över alla mål.
Varför försvann min sparade färghistorik?
Historik kvarstår i localStorage knuten till denna domän. Att rensa webbläsardata, använda privat/inkognito-läge eller byta webbläsare återställer det. Taket är 20 poster för att undvika kvotproblem — äldre val vräks när nya läggs till.