What you can consider using is "accent-color". It doesn't really solve the problem when it comes to custom designs, but it is a quick hack to adjust the colors to the other content.
.your_css_selector {
accent-color: hsl(127deg, 100%, 82%);
}
That looks good enough for this project.
Cheers!
PS: Your copy to clipboard doesn't work for me, so I guess you didn't implement it? Also, if you want an additional (JS) challenge, you can try to come up with your own "forumla"/algorithm to compute password safety. For that you probably should research a bit what makes a password secure. In my case, all my passwords with a length of 8 are considered insecure because they are easy to crack via brute force attacks. I increased my max. length of passwords to 30 and so I obviously consider all passwords of that lengths secure, even if the password only uses numbers. (I used word-break: break-all
to break it to the next line for long passwords.)
If you want to go a step further you could even try to let the user decide which special characters they allow in the generation - I'm probably going to attempt that myself pretty soon. My idea is that a popup or something similar opens and the user can select which special characters they want to be used during password generation.
I also noticed that your algorithm always uses lowercase characters to create the password, even when not selected. That's something that should be changed. If no options are selected, I guess it's fine to assume lowercase characters as a default setting.