While refactoring our site's design at GLL (Still writing an article about my learnings there, stay tuned) I've come across a really handy tool to use with theme-based styling systems (like styled-components)

 

It has many names but i like to call it HEXA. It's normally known as 8 Digit HEX Code or Transparency adjusted HEX Code

 

What is transparency adjusted hex code? and why should I not just use RGBA when i need an alpha channel?

 

Transparency adjusted hex code #RRGGBBAA allows you to attach alpha values next to a variable. Which is super helpful when you have a design system with a style guide of colors.

 

If you define all your colors in some form of theme variables and use them in a context where you want some opacity with RGB/RGBA you have to do complex string manipulation where you need to open the variable up and change it, but with HEX you can just attach the opacity after the variable, turning it into 8 Digit hex.

 

const styleGuide = {
  hexColor: '#013370',
};

`${styleGuide.hexColor}80`; // #01337080 which is equal to rgba(1, 51, 112, 0.5)

 

You see it's easier to go from #013370 to #01337080 than it is to go from rgba(1, 51, 112) to rgba(1, 51, 112, 0.5) which makes transparency adjusted hex very convenient and more modular than RGBA.

 

This approach works very well with CSS-in-JS libraries like styled-components.

 

const theme = {
  backgroundColorInHex: '#013370',
};

// Using a theme color but with 0.25 opacity

const Background = styled.div`
  background: ${({ theme }) => `${theme.backgroundColorInHex}40`};
`;

 

Ok I'm sold, how do I get started?

 

All you need in order to make use of this great color tool, is a defined theme for your frontend app or website, and to make sure all your colors are defined in 6 Digit HEX Codes, ofcourse you can pre-define them as 8 Digit HEX codes as well but note that you won't be able to change that alpha channel value later on without the usage of some string manipulation or a color library which is what this whole trick helps you avoid.

 

I'm surprised 8 Digit hex codes aren't used more often and most of the time i see RGBA dominating everywhere.

 

I understand it's hard to do hexadecimal based math in your head when defining colors, but that's exactly why i made a simple quick tool to convert between the easy to use RGB format to the more modular HEX format I call it RGBA to HEXA

 

I don't know about you but I'm never going back to using RGB/RGBA after learning about 8 Digit Hex Code.

Sup Gamers!

 

I'm Omar and this is my blog. 

 

This post marks my first real post on my own personal blog.

 

I've started this blog to talk about programming, and challenges i come across as a developer and how I solve them. I work at G-loot on our product GLL which is an Esports platform meant to bring Esports from offline to online, I won't go into that much details 'cause you can read up all about it on those two links.

 

This blog is built with your good ol' react, webpack and contentful for making the posts. which is great because it supports markdown and that means i can write code blocks like this just as easily as it's done in discord    

const variable = 1;

npm install react -g

 

I've recently worked with localizing our entire GLL site here at G-loot and i came into a lot of challenges so hopefully i'll write about localization as my first subject for the next blog post

 

See you then!