[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f3wx4lswl7h23":3},{"_id":4,"slug":5,"title":6,"subtitle":7,"kind":8,"cards":9,"tags":57,"categories":59,"source":61,"lang":64,"author":65,"audioState":68,"stats":69,"publishedAt":72,"renderer":73},"6abd4866ca21c797c7ea2676","stop-writing-hex-codes-in-your-css-0481e876","Stop writing hex codes in your CSS","The hover state that started it all","news",[10,12,17,22,27,32,37,42,47,52],{"headline":6,"body":7,"imageUrl":11,"sourceImageUrl":11},"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=1200,height=627,fit=cover,gravity=auto,format=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F3ouuf22ojr3c84pe2eux.png",{"headline":13,"body":14,"imageUrl":15,"images":16},"A design review last Monday morning really got","A design review last Monday morning really got under my skin. Our lead designer noticed a subtle mismatch in a button hover state. I opened the component file to check the code. Right there in the styled component was a hardcoded #3B82F6. The problem is our primary brand blue changed to #2563EB three months ago.","\u002Fapi\u002Fmedia\u002Fposts\u002Fstop-writing-hex-codes-in-your-css-0481e876\u002F1.webp",{"local":15},{"headline":18,"body":19,"imageUrl":20,"images":21},"This developer had just copied the hex code","This developer had just copied the hex code straight from the Figma inspector. They pasted it into the CSS and moved on to the next ticket. It worked perfectly on their machine. It passed the visual review for that specific PR. But it created a tiny bit of technical debt that eventually broke our visual consistency.","\u002Fapi\u002Fmedia\u002Fposts\u002Fstop-writing-hex-codes-in-your-css-0481e876\u002F2.webp",{"local":20},{"headline":23,"body":24,"imageUrl":25,"images":26},"This happens everywhere. I see it in almost","This happens everywhere. I see it in almost every codebase I audit. We spend weeks arguing about component architecture and state management. Then we just throw raw hex codes into our styles like it is 2010. The find and replace nightmare","\u002Fapi\u002Fmedia\u002Fposts\u002Fstop-writing-hex-codes-in-your-css-0481e876\u002F3.webp",{"local":25},{"headline":28,"body":29,"imageUrl":30,"images":31},"Let us look at a really common scenario","Let us look at a really common scenario. You are building a new dashboard. You need a subtle grey border. You grab #E5E7EB and drop it in.","\u002Fapi\u002Fmedia\u002Fposts\u002Fstop-writing-hex-codes-in-your-css-0481e876\u002F4.webp",{"local":30},{"headline":33,"body":34,"imageUrl":35,"images":36},"A month later the design team decides all","A month later the design team decides all borders need to be slightly darker for accessibility. They want #D1D5DB. You open your code editor and do a global search for #E5E7EB.","\u002Fapi\u002Fmedia\u002Fposts\u002Fstop-writing-hex-codes-in-your-css-0481e876\u002F5.webp",{"local":35},{"headline":38,"body":39,"imageUrl":40,"images":41},"You find 47 results. But wait. Are all","You find 47 results. But wait. Are all of these borders? Some of them are background colours for disabled buttons. Some are divider lines. You cannot just do a blind find and replace. You have to manually check every single instance. A five minute design tweak just became an hour of tedious code archaeology.","\u002Fapi\u002Fmedia\u002Fposts\u002Fstop-writing-hex-codes-in-your-css-0481e876\u002F6.webp",{"local":40},{"headline":43,"body":44,"imageUrl":45,"images":46},"This is a massive waste of developer time","This is a massive waste of developer time. It also introduces a huge risk of human error. You will inevitably miss one instance or accidentally change a background colour that happened to share the same hex value. The dark mode scaling problem","\u002Fapi\u002Fmedia\u002Fposts\u002Fstop-writing-hex-codes-in-your-css-0481e876\u002F7.webp",{"local":45},{"headline":48,"body":49,"imageUrl":50,"images":51},"The pain gets much worse when you introduce","The pain gets much worse when you introduce dark mode. If you use raw hex codes you have to write completely separate style blocks for your dark theme.","\u002Fapi\u002Fmedia\u002Fposts\u002Fstop-writing-hex-codes-in-your-css-0481e876\u002F8.webp",{"local":50},{"headline":53,"body":54,"imageUrl":55,"images":56},"Now imagine doing this for fifty different components","Now imagine doing this for fifty different components. Your CSS file sizes explode. Your maintenance burden doubles. Every time a colour changes you have to update it in two places. If you forget one the whole UI looks broken for half your users.","\u002Fapi\u002Fmedia\u002Fposts\u002Fstop-writing-hex-codes-in-your-css-0481e876\u002F9.webp",{"local":55},[58],"dev",[60],"Technology",{"name":62,"url":63},"Dev.to","https:\u002F\u002Fdev.to\u002Falexandersstudi\u002Fstop-writing-hex-codes-in-your-css-39jf","en",{"handle":66,"displayName":67},"spots","Spots","queued",{"views":70,"likes":71,"saves":71,"shares":71,"completions":71,"opens":71,"skips":71,"depthSum":71},1,0,"2026-09-30T17:35:34.190Z","local"]