Επιλογέας και Μετατροπέας Χρωμάτων

A free color converter and picker that runs entirely in your browser

This free color converter turns any color into every format you need, instantly. Paste a hex code, type an RGB value, drag the color wheel, or sample a pixel with the eyedropper — and see the result in HEX, RGB, HSL, HSV, CMYK, and OKLCH simultaneously. Every field is editable and bidirectional: change one format and all others update live with no page reload, no server request, and no delay.

Sites like ColorHexa.com, RapidTables, convertingcolors.com, and cssgradient.io each cover pieces of this: ColorHexa shows detailed breakdowns per URL, RapidTables provides single-format converters on separate pages, convertingcolors supports niche color spaces like CIELab and XYZ, and cssgradient is designed specifically for CSS gradient generation. This tool combines the everyday use cases — format conversion, visual picking, accessibility checking, and palette generation — into one live interface where you enter a color once and see everything at once. Nothing is uploaded; all processing is local.

Convert HEX, RGB, HSL, HSV, CMYK, and OKLCH — two-way, instantly

Every field is editable and stays in sync. Paste a hex code and the RGB, HSL, HSV, CMYK, and OKLCH values update on the spot. Change any one and the rest follow immediately. That makes this simultaneously a fast hex to RGB converter, an RGB to hex tool, an RGB to CMYK converter, and an HSL/HSV/OKLCH converter in a single view — ideal when a design file gives you one format but your stylesheet, print job, or design system needs another.

All outputs are valid HTML and CSS values — #hex, rgb(…), hsl(…), hsv(…), cmyk(…), and oklch(…) — each with a one-click copy button. The tool also identifies the nearest named CSS color, so you can describe a shade instantly or confirm whether a custom hex matches a standard keyword. Unlike RapidTables' single-conversion pages, you never need to navigate between separate tools for different format pairs.

Pick a color from an image — or straight off your screen

Need the exact color from a photo, logo, screenshot, or mockup? Use the image color picker: upload a file, drag and drop it, or paste from your clipboard (Ctrl+V / Cmd+V), then move over the image and click to grab any pixel. A built-in magnifier loupe zooms in for pixel-perfect picking, and every color you click is kept in a 'picked from image' strip so you can build a palette from a single image without losing previous picks. The image is processed locally using an HTML canvas and never leaves your device — this works in every browser including Firefox and Safari.

Prefer to grab a color from elsewhere on your screen? The eyedropper samples any pixel on your display in Chrome 95+ and Edge 95+ via the native EyeDropper API — click it, point at any pixel anywhere on screen, and that color loads into all fields instantly. A recent colors strip and the interactive color wheel round out the picking options, all with nothing to install. This picking capability goes well beyond what ColorHexa, RapidTables, or convertingcolors offer.

Color schemes, harmonies, tints, and shades

Turn one color into a whole palette. The tool generates six matching color schemes based on color-wheel harmonies: complementary, analogous, triadic, tetradic, split-complementary, and monochromatic. Click any swatch to make it the new base color and keep exploring, so the tool functions as a fast color palette generator for building cohesive, on-brand combinations.

The tint and shade scale produces a range of lighter and darker steps from your base color — useful for hover states, active states, disabled states, borders, and background fills. Clicking any step makes it the active color and shows its full format breakdown. Both palette generation and the tint/shade scale update instantly on every color change with no server request — unlike cloud design tools like Adobe Color or Coolors, which require a network round-trip to generate results.

WCAG contrast checking and color blindness simulation

Accessibility is built into every color choice. The WCAG contrast checker calculates the luminance-based contrast ratio of your color against white and black, then shows AA and AAA pass-or-fail badges for normal text, large text, and UI components — the three WCAG 2.1 levels that determine whether a foreground/background pair meets accessibility standards. It updates live as you adjust color, so you can iterate toward compliance without switching to a separate tool like the WebAIM Contrast Checker.

The color blindness simulator previews your color as seen by people with protanopia, deuteranopia, tritanopia, and achromatopsia — computed using the standard Brettel/Viénot simulation algorithm and updated live. Together, contrast checking and blindness simulation help ensure your design choices stay meaningful and distinguishable for every viewer. These features make this tool more complete than ColorHexa, RapidTables, or convertingcolors for accessibility-focused color decisions.

Understanding OKLCH — the future of CSS color

OKLCH is a perceptually uniform color space that has arrived in mainstream CSS via the CSS Color Level 4 specification. It represents colors as Lightness (L), Chroma (C), and Hue (H), where Lightness is calibrated to human perception rather than to linear light energy. This means that two colors with the same L value will appear equally light to the human eye regardless of their hue — something that is not true in HSL or RGB. For designers building systematic palettes, this means you can define a single L value for 'primary background', apply it to every hue in your palette, and get visually balanced results without manual adjustment.

OKLCH also describes a larger gamut than sRGB — it can represent Display P3 and Rec.2020 colors that are beyond the sRGB triangle used by most hex, RGB, and HSL values. Modern browsers (Chrome, Safari, Firefox) now support the oklch() CSS function natively, making OKLCH the forward-looking format for CSS color work. This tool shows a gamut warning when the OKLCH value you've entered falls outside the sRGB range and would be clamped by older browsers, giving you an early alert before deploying to production.

A free alternative to Google Color Picker, Adobe Color, and online tools

Most color pickers are buried inside something bigger. The Google color picker only appears in search results for specific queries and can't be bookmarked or used standalone. The Adobe color picker lives inside Photoshop, Illustrator, or Adobe Color (color.adobe.com), which requires an Adobe account and syncs data to Adobe's servers. ColorHexa and RapidTables are reference sites rather than interactive tools. convertingcolors.com covers niche color spaces but lacks picking and palette features. cssgradient.io is excellent for gradient generation but not for individual color management.

This is a standalone, free color picker and converter that opens in one click, works on any device, never asks you to sign in, and runs entirely in your browser. Whether you're a developer matching a brand hex, a designer fine-tuning an HSL palette, a print professional checking CMYK approximations, or an accessibility engineer verifying WCAG contrast ratios — this tool does the whole job in one fast, private page. OKLCH support, accessibility checking, and palette generation are included by default, features most alternatives charge for or simply don't offer.

The mathematics behind color conversion: RGB to HSL, CMYK, and HEX

Every format conversion this tool performs is driven by a precise set of mathematical operations. RGB to HSL begins by normalising each channel to the 0–1 range (divide by 255), then finding the maximum channel value M and the minimum m. Lightness is L = (M + m) / 2. If M equals m the color is achromatic — saturation is 0 and hue is undefined (a shade of grey). Otherwise, Saturation is S = (M − m) / (1 − |2L − 1|), which keeps the denominator stable across light and dark ranges. Hue in degrees depends on which channel is maximum: if R is max, H = ((G − B) / (M − m)) × 60; if G is max, H = (2 + (B − R) / (M − m)) × 60; if B is max, H = (4 + (R − G) / (M − m)) × 60. Negative results are corrected by adding 360, yielding a value in the 0–360° range. This algorithm is what makes HSL actionable in CSS: the hue angle maps directly onto the color wheel, and lightness adjustments are numerically predictable.

RGB to CMYK uses a different normalisation. First, each channel is scaled to the 0–1 range: R′ = R/255, G′ = G/255, B′ = B/255. The key (black) channel is K = 1 − max(R′, G′, B′). The remaining channels are: C = (1 − R′ − K) / (1 − K), M = (1 − G′ − K) / (1 − K), Y = (1 − B′ − K) / (1 − K). The denominator (1 − K) guards against division by zero when K = 1 (pure black). This formula is device-independent and produces a mathematically correct CMYK approximation, though real-world printing also applies ICC color profiles and ink-density limits that vary by press and paper stock. RGB to HEX is the simplest of the three: each channel is converted from decimal to its two-digit hexadecimal equivalent using base-16 encoding — in JavaScript, the pattern is r.toString(16).padStart(2, '0') for each channel — then the three two-character strings are concatenated with a leading #. This yields the standard six-character hex color code used throughout HTML and CSS.

Understanding these algorithms matters beyond curiosity: it explains why conversions between certain formats are lossless and others are not. The RGB ↔ HEX round-trip is perfectly lossless because both are just two encodings of the same three 8-bit integers. RGB ↔ HSL is also lossless within 8-bit RGB precision — no information is discarded, only rearranged. RGB → CMYK is mathematically deterministic but the reverse (CMYK → RGB) is not unique: many different CMYK combinations can produce the same screen colour because K (black) can be varied freely while adjusting C, M, Y to compensate. This also explains why a Pantone swatch book and a monitor will never fully agree — one reflects physical ink, the other emits calibrated light.

Color perception: cones, opponent channels, and why monitors and printers use different primaries

Human color vision originates in three types of photoreceptor cone cells in the retina. S-cones are most sensitive to short wavelengths around 420–440 nm (perceived as blue); M-cones peak at medium wavelengths around 530–540 nm (green); L-cones peak at long wavelengths around 560–580 nm (red). The trichromatic theory, independently proposed by Thomas Young in 1802 and formalised by Hermann von Helmholtz in 1850, states that any perceived color is the result of the ratio of activation across these three cone types — which is precisely why three-channel color models like RGB can represent the full range of human color perception. It also explains why the RGB model has exactly three channels: one per cone class.

The trichromatic theory alone does not account for every phenomenon of color perception. Ewald Hering's opponent process theory (1892) adds that signals from the cones are recombined at the ganglion cell layer of the retina into two opponent channels: a red–green channel and a blue–yellow channel, plus an achromatic luminance channel. This is why you can perceive 'reddish yellow' (orange) but not 'reddish green' — red and green are opponents that cancel each other. The opponent model also underlies why color blindness types are not random: protanopia (missing L-cones) and deuteranopia (missing M-cones) both disrupt the red–green channel, making them far more common (combined, they affect around 8% of males and 0.5% of females) than tritanopia (missing S-cones), which disrupts the blue–yellow channel and occurs in approximately 0.003% of the population. Complete achromatopsia — the absence of all cone function — also affects roughly 0.003% of people and leaves only rod-based monochromatic vision.

The reason monitors use RGB (additive mixing) and printers use CMYK (subtractive mixing) follows directly from physics, not convention. A monitor starts from black — a screen emitting no light — and adds wavelengths: combining red, green, and blue light at full intensity produces white. This is additive color, and it matches how the L, M, and S cones sum light signals. A printer starts from white paper that reflects all wavelengths, and deposits inks that absorb (subtract) specific wavelengths: cyan ink absorbs red, magenta absorbs green, yellow absorbs blue. In theory, C + M + Y should produce black, but real inks produce a muddy brown, which is why a separate black (K) channel is added — both for economy and for sharp text. The color gamut achievable by each system differs substantially: a standard sRGB monitor can reproduce colors that are simply outside what CMYK inks can achieve (especially vivid blues and greens), while some deep matte-ink blacks and specialty Pantone spots fall outside the sRGB triangle. This gamut mismatch is the root cause of the color shift that often surprises designers when screen designs go to print.

HSL vs HSB, Lab, OKLCH, and the sRGB standard: color models compared

HSL (Hue, Saturation, Lightness) and HSB/HSV (Hue, Saturation, Brightness/Value) share the same hue wheel but differ in how they define their third axis. In HSL, a Lightness of 0 is always black, 100 is always white, and 50 is the purest expression of any hue — making it symmetrical and predictable for programmatic gradient generation. In HSB, a Value of 0 is always black, but a Value of 100 with full saturation is the pure hue (not white) — lowering saturation at full Value gives you lighter tints. Designers often find HSB more intuitive because it matches the way physical paint mixing is conceptualised: 'pick a hue, then make it darker.' Developers often prefer HSL because lightness increments map cleanly onto CSS lightness steps for hover and active states. The two models are mathematically convertible from each other without loss, but their mental models diverge in ways that matter for palette authoring.

The CIE L*a*b* (Lab) color space, standardised in 1976, was designed to be device-independent and perceptually uniform — meaning that equal numerical distances in Lab correspond to equal perceived differences in color. L* represents lightness from 0 (black) to 100 (white); a* runs from roughly −128 (green) to +128 (red); b* runs from roughly −128 (blue) to +128 (yellow). Lab is used extensively in professional photo editing (Photoshop's Lab mode), colorimetry, print quality control, and color difference calculations (the ΔE metric). OKLCH, proposed by Björn Ottosson in 2020, refines the Lab approach: it reorganises the same perceptual-uniformity goal into a Lightness/Chroma/Hue cylinder that is easier for designers to work with. Where Lab's a* and b* axes are Cartesian and non-intuitive, OKLCH's Chroma (saturation-equivalent) and Hue (0–360° angle) are directly actionable. OKLCH is increasingly used in CSS Color Level 4 — oklch() is a native CSS function — and in Tailwind CSS v4, where it powers the color palette generation algorithm to ensure accessibility-consistent shades across every hue.

Underlying virtually every color shown on a web page or consumer device is the sRGB color profile, standardised by IEC 61966-2-1 in 1999. sRGB specifies a precise white point (D65, equivalent to average daylight), a gamma curve of approximately 2.2 (mapping physical light energy to pixel values in a way that accounts for how the eye perceives brightness), and a fixed set of red, green, and blue primaries. Approximately 96% of web images are encoded in sRGB. When a photo taken in Adobe RGB — a wider-gamut profile common in DSLR cameras — is converted to sRGB for the web, saturated greens and reds can shift noticeably because the Adobe RGB triangle extends further than the sRGB triangle on those axes. The same clipping effect applies when converting Display P3 images (used by iPhone cameras and Apple displays) to sRGB. This is why a color that looks vivid on a P3-capable screen may appear flatter on a standard sRGB monitor, and why OKLCH's gamut mapping warnings matter in production CSS: knowing which values will be clamped prevents unexpected color shifts across devices.