Selector de Color

The right format depends on what the color needs to do. For static brand colors defined once in a design system, hex codes like #0011ff are the best default — they are compact, widely understood, copy cleanly into Figma and Tailwind config files, and parse without ambiguity in every CSS engine since IE6. Use rgb() or rgba() when you need an alpha channel for semi-transparent overlays, or when you are constructing a color value dynamically in JavaScript using variables. Use hsl() or hsla() when you want to programmatically adjust brightness or saturation — the L and S channels map directly to human intuition about making a color lighter or more vivid, which makes theme generation and accessibility fixes straightforward. Use oklch() in modern design systems that target wide-gamut displays like P3 or Rec2020, or when you need perceptually uniform color steps across a gradient or a tonal palette. The oklch space is engineered so that equal numeric steps produce equal perceived changes in lightness, which eliminates the muddy midpoints that occur with rgb- or hsl-based gradients. The picker exports all five formats simultaneously. Copy whichever one matches your stack — there is no performance difference between formats at render time; the browser normalizes them all to the same internal representation before painting. A practical tip: define your brand palette as CSS custom properties using oklch, then reference the variables throughout your stylesheets. This gives you format flexibility at the source without changing downstream code.

Upload the image to the color picker using the upload button or by dragging the file onto the tool. Once the image renders in the preview panel, click any pixel to sample its color. The tool reads the pixel through the HTML5 Canvas API's getImageData method, which returns the exact red, green, and blue byte values stored in the decoded image data. The result is displayed immediately as hex, rgb, hsl, and oklch, and you can copy any format with one click. A few caveats improve your accuracy. For logos and brand assets saved as JPEG, sample several nearby pixels from a flat-color area of the logo, then take the modal value. JPEG's DCT compression algorithm smears color values at sharp edges and introduces chroma artifacts in solid fields, so the pixel at the very edge of a letterform may not represent the true brand color. PNG and WebP files do not have this problem — sample directly from any representative area. For screenshots of websites, zoom in to at least 200 % in your image editor first, crop to a flat-color patch, then upload the crop. This ensures your click lands on a genuinely uniform pixel rather than an anti-aliased boundary between two colors. For UI screenshots on retina displays, note that the image may already be at 2× pixel density, meaning your sampled value is still accurate. All image data stays on your device — the canvas computation runs locally and the file is never uploaded to WikiPlus servers.

The Web Content Accessibility Guidelines version 2.1 define three thresholds, and understanding which applies to your situation saves you from under- or over-engineering your color choices. For normal body text — anything under 18 pt regular or 14 pt bold — the Level AA minimum is 4.5:1 contrast between the foreground and background colors. For large text at or above those sizes, the minimum drops to 3:1. Level AAA requires 7:1 for normal text and 4.5:1 for large text. WCAG 3.0 (currently in draft) will introduce the APCA algorithm, which accounts for font weight, size, and spatial frequency rather than treating all text the same, but 2.1 AA is the current legal and audit baseline in most jurisdictions. The WikiPlus color picker shows the computed contrast ratio against both pure white and pure black in real time as you adjust the hue, saturation, or lightness sliders. You can see at a glance whether your chosen foreground passes against your intended background without switching to a separate contrast tool. A common practical problem is brand colors that fail 4.5:1 against white — a saturated blue or orange often reads as vivid and accessible but measures only 2.8:1 or 3.2:1. The fix is to darken the text color by 15–25 lightness points in the hsl or oklch space while preserving the hue. Alternatively, reserve the out-of-spec brand color for large display headings where only the 3:1 threshold applies.

Yes, completely. Every computation the color picker performs — RGB-to-HSL conversion, HSL-to-oklch conversion, CMYK approximation, hex encoding, contrast ratio calculation, and pixel sampling from uploaded images — runs in JavaScript on your device. None of these operations require a network call. Once the initial page has finished loading, you can switch your device to airplane mode and the tool continues to function without any degradation. This includes uploading image files and sampling colors from them — the file read and canvas processing are entirely local. The practical implication for privacy-sensitive work is significant. Brand designers frequently need to sample colors from unreleased product mockups, confidential marketing materials, or pre-launch visual identities covered by NDA. Because nothing is ever transmitted to WikiPlus infrastructure, the tool is safe to use on these assets. The image data is held in the browser's canvas memory for the duration of your session and released when you close or navigate away from the tab. Browser developer tools confirm this: open the Network panel, enable airplane mode, upload an image, and click pixels — the network log remains empty throughout. The only time network activity occurs is during the initial asset load of the page itself. A practical tip for frequent offline use: visit the tool page while online to ensure any service-worker cache is populated, then the full tool is available even on restricted networks such as airplane Wi-Fi or a mobile data-restricted environment.