Browser extension (for PC)

Colored glasses

Colored glasses (filters) display pages in colors close to gold, silver, copper, and bronze.
(* The part painted in white (#FFF) does not change)

Use this extension
image
How to use

How to use

step01
Display page

Access the page you want to wear colored glasses.
* Not all pages are supported.

step02
Choose your favorite pattern

Click on the extension to display the color list, and select the color you like.

step03
Done

You can check the page through colored glasses.

Precautions

Precautions

Please check before using this function

Prohibited matter

Publish and distribute images and videos of "screenshots and parts of the screen reflected" of "with this extension applied" for content that "users do not own the copyright" ・ Broadcasting is prohibited. (Example: "Screenshots / videos that include colored states in other people's works" are prohibited from being published. If you are your own, it's OK)

* This page is OK with screenshots applied.

About problems that cannot be dealt with
  • The page after application may display (behave) unintentionally. This is css Please understand and understand that it is a filter specification (for example, the behavior of Yahoo's scroll tracking menu becomes strange, twitter pop-up does not appear).
  • The above phenomenon can be reproduced by adding "filter: blur (2px);" to the body tag with the developer tool before applying.
Disclaimer
  • We shall not be liable for any loss, damage or claim for compensation due to the use of this function.
  • This browser extension is subject to change without notice.
Use extensions

Use extensions

It can only be used on a PC, but it is functionally the same. Please choose your favorite browser.

Firefox

Firefox was released on the day of application. Thank you! Great browser!

Extensions for Firefox
Microsoft Edge

Edge was released two days after the application. Thank you!

Microsoft Edge Addons
Google Chrome

I've kept you waiting for a long time. You can now use it in chrome!

chrome web store
Supplementary information

Supplementary information

I'm using a gradient maps. More specifically, I've added a CSS SVG filter in gradientmaps.js .
This extension is for "applying a gradient map to the page you are viewing". This permission is required because the SVG filter is dynamically added to the HTML and then the CSS at the specified location is edited. In addition, until you select a color or press the paint button, nothing is done to the page.
It depends on the image, but basically the white part remains white. Therefore, it is suitable for images composed of grayscale, not for shadow puppets. Also, he's almost counterproductive to images that are painted in color from the beginning.
This is not possible due to the mechanism of this extension. Please give up except ON / OFF.
As mentioned in the notes, it is a specification of CSS filter. This extension is the "function on the pop-up side" of the screen that is displayed when you click the extension. It is divided into two "content-side functions" that work on the displayed page, but the following processing is mainly performed.

(1) Functions on the pop-up side
- Select a gradation and reflect it on the screen
- Cancellation of gradation map
- Reflect any gradation (1 type) on the screen, edit / reset / save

(2) Content-side functions (processing for the displayed page)
- Apply or cancel the color specified in (1) with the gradation map.
image

  • Click the palette icon to switch to the gradation editing function
  • Editing the gradient does not reflect until you apply the color (click the roller icon or click the preset color)
  • After applying, it will be reflected in real time (until the popup is closed)
  • Eraser icon cancels gradient map
  • The trash can icon restores the edited gradient map to its initial state (if saved, the gradient map information is also deleted)
  • Only one color can be saved
  • Do not save until saved.
  • When you close the popup, the unsaved gradient information is lost.
  • When the button color of the save icon turns green, the gradation is different from the saved gradation. Be careful not to forget to press save
  • The saved gradient will be displayed at the bottom right of the preset.
  • The saved gradation will be reflected on the edit screen when the pop-up is reopened.
  • If you select a preset, the color information of the preset will be reflected in the editor (it will only be reflected, it will not be saved until you press save)
* By the way, I'm sorry. Currently, firefox does not seem to be able to edit the color of the gradation even if the ratio of the gradation can be changed on the edit screen.
If you have an edit file, I think that you can get better results by applying the gradation map directly in the edit file.
Since the main purpose of this extension is to "make it look like it with one gradation map", it is difficult to change the color of a specific part, but you can specify the selection range yourself and gradation in that part. By applying a map, it will be a wonderful work.

Most production applications support the gradient map feature.
Adobe Photoshop, CLIP STUDIO, procreate, ibisPaint, MediBang Paint, etc...
There is a Japanese idiom "see with colored glasses".
The meaning is "to look at from a biased viewpoint; to look at with a prejudiced eye".
(from weblio)

...how is it? Don't you think it's the perfect name for this extension?