Grayscale Converter
Convert any color to its grayscale equivalent using the standard ITU-R BT.601 luminance formula (0.299R + 0.587G + 0.114B). Enter any HEX color to see the original and grayscale side by side with instant preview, exact luminance values, and one-click copy for all output formats. Fully private, 100% free, and no signup required.
Sample Colors
Formats: #RGB #RRGGBB
Original vs Grayscale
Original
Grayscale
Formula: ITU-R BT.601 Luminance (0.299R + 0.587G + 0.114B)
Grayscale Values
Why Use Our Grayscale Converter?
Instant Grayscale Conversion
The Grayscale Converter applies the standard ITU-R BT.601 luminance formula to any colour in real time. As you type or pick a colour, both the original and grayscale previews update instantly with no button to press - giving you immediate visual feedback on the luminance result.
Side-by-Side Color Comparison
See the original colour and its grayscale equivalent displayed side by side in large preview swatches. The Grayscale Converter also shows the exact luminance value, percentage, and a visual luminance scale so you can understand exactly how the conversion works.
100% Private - No Upload Needed
All grayscale conversion happens locally in your browser with no server communication. Your colour values never leave your device, making the Grayscale Converter safe for confidential design projects, brand specifications, and proprietary colour palettes.
Free & Unlimited Conversions
Convert unlimited colours to grayscale with no signup, no subscription, and no usage caps. The Grayscale Converter is completely free forever with no ads blocking the interface. Use it as many times as you need for any project.
Common Use Cases for Grayscale Converter
Print Design & Grayscale Proofing
Print designers use the Grayscale Converter to preview how colour designs will appear when printed in black and white or grayscale. This is essential for newspaper ads, booklet printing, and any project where colour printing is not available or cost-prohibitive.
Accessibility & Color Blindness Testing
Accessibility specialists use the Grayscale Converter to simulate how colour-reliant interfaces appear to users with colour vision deficiencies. By converting UI colour schemes to grayscale, you can verify that information is not conveyed through colour alone.
Design System Color Validation
Design system maintainers use the Grayscale Converter to validate that colour tokens have sufficient luminance contrast for readability. Converting brand colours to grayscale reveals whether text and background combinations will work in accessibility-critical scenarios.
Photography & Image Editing
Photographers and image editors use the Grayscale Converter to understand how different colours translate to grayscale tones. This knowledge helps when converting images to black and white, ensuring that key subjects maintain good contrast against backgrounds.
Mobile UI & Dark Mode Design
Mobile UI designers use the Grayscale Converter when designing dark mode interfaces or accessibility themes. Converting accent colours to grayscale helps verify that UI elements maintain sufficient contrast in monochrome or low-vision display modes.
CSS Filter & Effect Development
Web developers use the Grayscale Converter to understand the exact output of CSS grayscale filters before applying them to live websites. The tool shows the precise RGB and HEX values produced by the luminance formula, matching how CSS filters work in browsers.
Understanding Grayscale Color Conversion
What is Grayscale Conversion?
Grayscale conversion transforms a colour image or individual colour value into shades of gray ranging from black to white. Unlike simply desaturating a colour (which treats all channels equally), proper grayscale conversion uses a luminance formula that accounts for human perception - our eyes are most sensitive to green light, less sensitive to red, and least sensitive to blue. Our Grayscale Converter uses the industry-standard ITU-R BT.601 formula for accurate perceptual results.
How Our Grayscale Converter Works
- Enter your colour: Type or paste a HEX colour value (e.g.
#FF6B6B) or use the native colour picker to select any colour visually. The Grayscale Converter also supports 3-digit HEX format (#RGB) for convenience. All processing runs locally in your browser. - Luminance calculation: The converter applies the ITU-R BT.601 formula: L = 0.299 × R + 0.587 × G + 0.114 × B. This weighted formula produces the most perceptually accurate grayscale result because it accounts for how the human eye perceives different colour wavelengths.
- Compare and copy: The original colour and its grayscale equivalent are shown side by side with large preview swatches. The exact luminance value (0-255), percentage (0-100%), and grayscale HEX/RGB/HSL values are all displayed with one-click copy buttons for each format.
The Luminance Formula Explained
- Why weighted? The human eye has approximately 65% of its cone cells (photoreceptors) sensitive to green light, 33% to red, and only 2% to blue. The luminance formula reflects this biology by giving the most weight to green (0.587), followed by red (0.299), and blue (0.114).
- BT.601 Standard: The ITU-R BT.601 luminance formula is the international standard for grayscale conversion in television broadcasting, video compression, and image processing. It is also the formula used by CSS
filter: grayscale()and most image editing software. - Simple average vs luminance: A simple average of R, G, and B ((R+G+B)/3) would give equal weight to all channels, producing a duller, less accurate grayscale. The luminance formula preserves the perceived brightness of the original colour much more faithfully.
- Luminance range: The luminance value ranges from 0 (pure black) to 255 (pure white). A luminance percentage shows where the colour falls on this scale, with 0% being black and 100% being white. Colours with high saturation and medium lightness often produce surprising grayscale results.
Privacy, Security & Availability
100% browser-based processing: Our Grayscale Converter processes all colour conversions entirely within your browser using JavaScript. Your colour values are never uploaded, stored, or transmitted to any server. This ensures complete privacy for confidential design projects and brand colour specifications.
Always available: Since the converter works entirely client-side, it continues to function even without an internet connection after the page loads. There are no server dependencies, no rate limits, and no API calls. Use it anywhere, anytime for all your grayscale conversion needs.
Related Color Tools
Color Contrast Checker
Calculate WCAG 2.1 contrast ratio and check AA/AAA compliance for normal text, large text, and UI components with live preview and HEX/RGB input.
Color Picker & Converter
Visual colour picker with HEX, RGB, HSL, HSV, CMYK, HWB, and CIE LAB conversion. Bidirectional inputs with WCAG contrast checker and CSS variable output.
HEX to RGB Converter
Convert HEX color codes to RGB and RGBA values instantly with real-time colour preview, channel bars, and support for all HEX formats including alpha.
Color Difference Calculator
Calculate the perceptual colour difference (ΔE 2000) between any two colours with visual comparison and CIE L*a*b* breakdown.
Frequently Asked Questions About Grayscale Converter
A Grayscale Converter transforms any colour into its grayscale equivalent using a standard luminance formula. Instead of simply averaging the RGB channels, our Grayscale Converter uses the ITU-R BT.601 weighted luminance formula (0.299R + 0.587G + 0.114B) which accounts for human colour perception. The result is shown side by side with the original colour for easy comparison.
The formula used is L = 0.299 × R + 0.587 × G + 0.114 × B, where R, G, and B are the red, green, and blue channel values (0-255). This is the ITU-R BT.601 standard, widely adopted in broadcasting, video processing, and CSS filters. The formula weights green most heavily because human eyes are most sensitive to green light, followed by red, then blue.
A simple average of RGB channels would treat all colours equally, but the human eye does not perceive all colours with the same brightness. Green appears much brighter than blue at the same numerical value. The weighted luminance formula produces a grayscale result that closely matches how we actually perceive the brightness of the original colour, making it far more accurate than simple averaging.
Yes. All conversion happens entirely within your browser using JavaScript. Your colour values are never sent to any server, never stored, and never transmitted anywhere. The Grayscale Converter is completely private and processes everything locally on your device, making it safe for confidential brand colour specifications and proprietary design systems.
The Grayscale Converter accepts HEX colour values in both 3-digit (#RGB) and 6-digit (#RRGGBB) formats. You can type the value with or without the # prefix. The tool also includes a native colour picker for visual colour selection, and preset swatches for quick testing of common colours.
Yes. The Grayscale Converter is 100% free with no signup required, no premium features, and no usage limits. Convert unlimited colours to grayscale without any restrictions or hidden costs. There are no ads blocking the interface, and the tool works entirely in your browser.
The CSS filter: grayscale(100%) function uses the same luminance-weighted formula to convert elements to grayscale in the browser. Our Grayscale Converter shows you the exact mathematical output of this transformation for any specific colour, making it useful for previewing how CSS filters will affect particular design elements before applying them.
Desaturation converts a colour to grayscale by averaging all RGB channels equally (R+G+B)/3, which produces a flat result. Luminance-based grayscale, which our Grayscale Converter uses, applies weighted values based on human perception. The difference is most noticeable with blue and green colours - a pure blue (#0000FF) desaturates to a medium gray (85), but with luminance weighting it becomes much darker (29), which more accurately reflects perceived brightness.