A responsive web application that visualises the red, green, and blue components of an image. Users can toggle between different colour channels (Red, Green, Blue) to see how each contributes to the overall image. It also supports fullscreen mode with an intuitive UI optimised for both desktop and mobile screens.
- Colour Channel Toggle: Easily toggle the visibility of red, green, and blue colour channels.
- Responsive Design: Automatically adapts to various screen sizes and devices, with optimised mobile support.
- Fullscreen Mode: View the application in fullscreen mode with a dedicated fullscreen button.
- Mix-Blend Mode: Layers use blend modes for an authentic RGB visualisation.
- Visible Colour Bars: At full colour, this section shows white (made of red + green + blue), yellow (red + green), cyan (green + blue), green, magenta (red + blue), red, blue and black (absence of colour/light). Users can see how these colours change when certain colour channels are toggled off and on.
Try the live demo here: Live Demo on GitHub Pages
-
Colour Channel Buttons:
- Click on Red, Green, or Blue to toggle the visibility of that colour channel.
- Tooltip on hover tells you whether the button will turn the visibility of that colour channel "on" or "off".
-
Fullscreen Mode:
- Click the fullscreen icon to enter fullscreen mode.
- Click the collapse icon to exit fullscreen mode.
-
Mobile Support:
- On mobile devices, the buttons stack vertically to ensure the UI fits smaller screens.
- Pixabay / Pexels:
The main image used in this visualisation was sourced from Pexels and is licensed under CC0.
This project is licensed under the MIT License. See the LICENSE file for details.