4 ms·
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
by stanmancan 7y ago
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.
- 6510 7y ago#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) }
- mike1o1 7y agoSure, 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.
- dsego 7y agoRGB 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.