The numbering name system makes it really easy to make incremental changes too. I can’t manually edit a hex to my liking, but I can easily change text-blue-500 to text-blue-600 if I want it a bit darker.

#000000 is black

#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) }

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.