Sure, but the colors from Tailwind aren't determined through an algorithm like this. They are handpicked from a designer, which I feel like most design systems do as well.
RGB isn't even a good system to lighten or darken colors. CSS supports HSL which is certainly more intuitive. Then again, it's easier to use a good pre-processor with color functions to darken($color, 10%) and so on (quickly, can you tell me what is 10% lighter than 2222FF off the top of your head?).
Still, in the end it makes most sense to use tones from a good color palette then to mess around with hex values.
#FFFFFF is white
They are 3 sets of 2 hex numbers.
#FF0000 is red
#00FF00 is green
#0000FF is blue
(you hear of RGB, Red Green Blue, in that order)
Now if you want a darker color (closer to black) you lower FF to a lower value. A darker blue would for example be #0000AA
if you want a lighter color you increase the other 2 color values. A lighter blue would be #2222FF
If you don't like hex there is rgb(0,0,255) which does exactly the same.
There is also rgba(0,0,255,0-1) with an alpha channel.
You can also put any part of that in a css variable and use it where you like.
body{--foo: 0,0,255,0.5; bar:0,0,100 }
p {background: rgba(var(--foo)) }
div {background: rgba(var(--bar), 0.8) }
reply