Tinto

Functionality and Use

Tinto is a tool for web developers and designers, or indeed anyone who has to work with digital colours.

It lets you

Find precisely the colours you like
Show their hex values
Check their luminance
Add them to your palette
Check the contrast ratio of any two colours in your palette
Copy the code for your palette as CSS custom properties or an array of hex strings
Delete unneeded colours from your palette
Work with an RGB or an HSL colour model
Generate random RGB or random HSL colours
Vary or fix any of the colour components

It should be fairly intuitive to use Tinto. Play with the buttons and sliders to vary the colours in the grid, and if you find a colour you like, click/tap it to add it to the palette.

Click the red X to remove a colour from the palette. Newly chosen colours will fill any gaps.

Clicking "Show Hex" or "Show Luminance" will display these values in the grid and in the palette. In the grid, only one of these will be shown; luminance takes precedence over hex.

Any components that are fixed will be shown, with their fixed values, in thge blue bar in the control panel.

More details about web standards for contrast ratio can be found at https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html.

Tinto is deployed to https://teraspora.github.io/tinto/.

Notes

Tinto has been developed by me, John Lynch, initially as a tool for myself, to help me find nice complementary colour schemes for websites. As it grew in functionality I realised it could also be useful for other front-end developers and designers.

It should work fine on large screens and on most mobiles, though on iPhones of various sorts the display may be substandard. I have yet to investigate this properly but am certainly open to pull requests. Tinto lives at https://github.com/teraspora/tinto.

More fun and interesting projects can be found on My Github page, and please visit my website.