For some reason, the color #fffffff copies in all caps, like #FFFFFF. This only happens when #ffffff is in the bottom right of the table. So if you used #ffffff as the color to generate tints and shades, even though all the tint table cells are #ffffff, only the right-most #ffffff cell copies in all caps.

Since #8 we now have the ability to copy hex codes by clicking on a color square. It might be a nice addition to the UX to give some feedback to the user when they've successfully copied a hex code, like a tooltip that says "Copied!" or the copy icon morphs into a green checkmark.

GitHub kind of does both; we could just use one of these ideas...

Got an email from one Nguyen Tung asking if it would be possible to give a name suggestion for the color after a hex is supplied. Perhaps some designers don't like coming up with color names. Not sure where we'd start with this or how it might work/look, but he did supply this link and said it has an API: https://www.colorhexa.com/color-names. Maybe we could just give the name of the closest official HTML color name, although I think the emailer was wanting more unique names.

Personally when I'm making color systems, if a color is the Danger color, for example, I just call that color "red". I'm not typically looking for a clever variant like "cherry" or "ferrari" or something like that. Exception being if the brand is very expressive I may choose a naming convention that speaks to their identity.

I've had a few emails about a Tint and Shade Generator Figma plugin over the last year. Just received this today from Daniele in Australia:

Hi, I love your tool you’ve created,

I wish you had that exact tool to generate shades straight into Figma, with squares ready to be used into a UI KIT.

Thanks,
Daniele

He subsequently told me the exact math is the missing factor in the various current Figma plugin options available now. For those who don't need/want the exact formula that the Tint & Shade Generator provides (i.e. 10 each of tints and shades using a very particular formula), check out one of below Figma plugins to see if they meet your needs:

1. Color Shades (this is the one Daniele uses)
2. Tints and Shades
3. Color Designer

It's kind of misleading to show just the code because when you copy a color it includes the #. I think it would make more sense to show the code exactly as it will be copied.

Recently we made the hex color table cells tab-able, but the enter key or spacebar don't initiate a copy like a click of the mouse would. It would be good for usability and access if this functionality existed.

Here is a basic example on how to do this with some Javascript: https://www.w3.org/TR/wai-aria-practices/examples/button/button.html

Would be nice if the toggle to include hashtags remembered the users choice in future visits. Currently the dark mode toggle does remember while the hashtag toggle does not.

This could help when evaluating tints and shades for dark interfaces. Would be cool if it could remember state for return visits and across pages within the app (/about, /404).

Think of the possibilities!

Received this email from David Eno requesting a new feature. This would obviously add a lot of complexity – feel free to comment.

Hi Michael

Your Tint and Shade Generator is really useful and I'm sure I'll return frequently now I've found it.

It would be amazing if this could also show the complimentaries for all the tints and shades - something I need quite often.

Thanks for all the hard work

Regards

David

Right now the only validation on the form is catching blank submissions. Ideally we'd have some error messaging for other issues.

Since #7 we've had the ability to share links with the hex codes already loaded on the page, for example: https://maketintsandshades.com/#111334.

I'm thinking it might be nice that when sharing a link like this, the page scrolls to the actual color table section with focus on the first table cell, instead of loading at the top of the page.

Feedback welcome.

Problem

If you want to use the generated colors as variables (CSS/SCSS) in your code base, you have to copy every single value one by one and paste it in correct place.

Solution

Make it possible to create CSS/SCSS variables from tint and shades.
Might be related to this: #30
Would especially be useful in combination with this feature: #32

How could it work?

Define the color, name for your variable and the amount of tint and shades to be generated. Hit "generate variables" button.

Example

Color: #00a870
Name: accent-color
Amount of tint and shades: 9

Result CSS-Variables

--accent-color-100: #cceee2;
--accent-color-200: #99dcc6;
--accent-color-300: #66cba9;
--accent-color-400: #33b98d;
--accent-color-500: #00a870; // main color
--accent-color-600: #00865a;
--accent-color-700: #006543;
--accent-color-800: #00432d;
--accent-color-900: #002216;

Result SCSS-Variables

$accent-color-100: #cceee2;
$accent-color-200: #99dcc6;
$accent-color-300: #66cba9;
$accent-color-400: #33b98d;
$accent-color-500: #00a870; // main color
$accent-color-600: #00865a;
$accent-color-700: #006543;
$accent-color-800: #00432d;
$accent-color-900: #002216;

Happy to discuss how the prefix numbers (in this case: 100-900) should determined and how the range of colors should be calculated.

Would be cool if you could click the color square and copy its Hex code to the clipboard.

If you tab to the "Include hashtag when copying" switch and activate it using the enter key, it doesn't actually activate the switch. Same with deactivate via tab/enter key. Ideally this should work the same as being activated/deactivated with the mouse.

Right now we include #ffffff and #000000 squares at the end of each tint and shade table row.

My question is, should we do that? We could be leaving those off from the tin/shade palette. I'm not sure if it's superfluous or repetitive, or perhaps helps with orientation around the color suggestions.

Looking for feedback. Thanks.

It might be useful to display the percentages alongside the hex codes.

for example I would like to have 20 shades instead of 11

When navigating with the keyboard, hitting tab while in the text area will skip over the submit button completely. I noticed this bug when I was working on #10 but didn't realize that it indicated a major piece of functionality was broken. I will try to take a look at what might be causing this. But I'm not well-versed in browser-specific issues so I'm not sure how much help I'll be.

I am using Safari 13.0.2 on macOS 10.15 Catalina.

Right now "333" would not work, while "333333" does. Ideally the former would also be a valid input.

Has anyone wanted the ability to copy out an entire set of tints, shades, or both with a single click?

Not sure how this would behave or where the functionality would live; just making an issue to see if anyone has any comments. Feel free to chime in or thumbs-up the issue.

Color Picker

There can be a color picker field along with the text input field. Sometimes we need minor changes in the base color's hue, saturation, etc. The Coolors color picker is the best I came around.

Live Tints & Shades

Since we may be adjusting, let's say the hue, it would be better to see how the tints & shades will look in realtime instead of hitting the Generate button every time.

Keyboard tabbing through the site, and particularly the color table after copying a hex color, is not standard across browsers.

The way Chrome treats tabbing after a copy seems to be the most ideal way to me: After copying, the focus appears to stay on the copied cell even though the copy/checkmark button disappears. If you tab again from this position, the next table cell is focused. This seems logical to me, but it's not the current behavior in FF or Safari on the Mac, and perhaps other browsers too.

Would be cool if the keyboard tabbing was standardized around this. We had a PR that initially played with this a bit (#23) but it was abandoned. There might be some useful comments/code there.

Basically what the title says.

We now have a switch that allows a user to copy colors with the hashtag prefix or without, and there are issues for a dark mode option (#31) and a way to have more or fewer tints or shades generated (#32).

It would be good if the browser remembered these settings for the user. @AleksandrHovhannisyan has made a suggestion how to do this here, and I made this issue in response. Seems like it can be done independently of the other settings-based issues.

Perhaps as a button next to the strips, would copy said strip as a [width of palette] x 1 image

Got an email from Justin with the following suggestion. Thumbs up or comment if you have the same concern.

----

Hi Michael,

Thank you so much for the maketintsandshades.com tool – I use it almost every day in my role as a web designer. I just wanted to make a feature suggestion which I find myself constantly looking for – when I’m testing tints/shades to see what works best, it would be super useful to have the percentage somewhere near the swatch so you can easily distinguish between 40% and 50% for example. Sometimes I find myself having to count across the swatches to find which one I’ve used or tried.

Thank you so much!

Justin