W3C Guidelines
suggest a contrast ratio of at least 4.5 for regular text and images.
Contrast ratio is defined as
(lum0 + 0.05) / (lum1 + 0.05)
, where
lum0
is the luminance of the lighter colour.
Select a colour in the grid to add it to your palette.
Select two colours in your palette to show their contrast ratio.
Palette Code
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.
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.