Noticed a peculiar outcome when working with hexadecimal calculations in LESS. What could be causing this phenomenon?

I recently dove into the world of LESS and have found it to be quite interesting. However, I encountered a unique situation where a background color was assigned the code #03A9F4 - 100. Based on my limited knowledge of hexadecimal numbers from some IT classes in college (I come from a non-CS background), I would expect the resulting CSS color code to be #03A8F4. To my surprise, the document I was working with had #004590 as the output.

So, what am I missing here?

Less Code

@div-width: 100px;
@color: #03A9F4;

#left{
  width: @div-width;
  background-color: @color - 100;
}

Resulting CSS Code

#left {
  width: 100px;
  background-color: #004590;
}

Answer №1

I don't have all the intricate details of the mathematics happening in the background, but it can be easily inferred.

Summary:

LESS converts the numbers to decimals, on a per-channel basis, for subtraction and then reverts back to hexadecimal.

Detailed explanation:

If you modify the 100 to #100:

background-color: #03A9F4 - #100

the result is

background-color: #00a9f4;

The use of #100 here is shorthand for #110000, affecting only the red channel.

When subtracting a number rather than a color, LESS handles it slightly differently. Let's examine it channel by channel this time too.

Initial color: #03A9F4, Result: #004590

Red 03 -> 00

Blue A9 -> 45

Green F4 -> 90

As the red channel doesn't provide much insight, let's focus on the other channels.

Regarding blue, A9 in decimal equals 169. Subtracting 100 leaves us with 69. What is 69 (in decimal) converted to hex? That would be 45.

In terms of green, F4 in decimal translates to 244. Subtracting 100 results in 144, which equates to 90 in hexadecimal.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Placing two parent flex containers on top of each other

I'm in a situation where I have two .container elements, both set at a height of 50%. Within these containers are the child divs .element, which belong to their respective parent divs .container. The problem arises when applying media queries with f ...

Display only distinct dates in the ng-repeat list

I'm trying to display an unordered list created using ng-repeat. Each list item includes a month header and a blog post. I'm struggling to find a clean solution to only show one instance of each month name without resorting to complex jQuery hac ...

Difficulties arise when dealing with card elements and scrolling on a

Currently working on an ecommerce simulation project for a course, I successfully implemented a featured section with cards. However, when it comes to scrolling, I am facing an issue where the cards overlap with my sticky navbar as I scroll down. If anyo ...

Displaying a single item per click using jQuery

Hey there, I have a small issue with some HTML divs and show/hide functionality. I'm trying to make it so that only one div is shown per click, but my current jQuery code is showing all the divs at once. Any suggestions on how to fix this? Check ou ...

What is the best way to create floating text that appears when clicked, similar to the mechanics

https://i.stack.imgur.com/nRKG1.jpg Upon clicking the "big cookie" in my game, a popup appears displaying the number of cookies earned (like +276.341 septillion in this image). The popup slowly moves upward and then fades out. I successfully incorporated ...

What is the right way to efficiently rotate a View in React Native?

Here is my code snippet: <View style={{borderColor:"red",borderWidth:4,flex:1,transform: [{ rotate:'90deg' }]}}> <Text>Hi</Text> </View> The result can be seen here: https://i.sstatic.net/C9ryl.jpg Unf ...

A collection of jQuery objects that consist of various DOM elements as their properties

Seeking a more concise and potentially more streamlined approach using jQuery. I have an object called lbl which represents a div. Inside this div, there is a span tag that contains the properties firstName and lastName of the lbl object. Here's how t ...

"Clicking on one item in the Bootstrap submenu doesn't close the other items,

I have this Javascript code snippet that deals with expanding and collapsing submenu items: <script type="text/javascript> jQuery(function(){ jQuery(".dropdown-menu > li > a.trigger").on("click",function(e){ var current ...

Struggling to incorporate a logo into the navigation bar for an HTML project

I'm a beginner in the world of HTML and CSS, trying my hand at creating a homepage. While I managed to add a logo to the Navigation bar, it seems to have messed up the link for the HOME page. Could this be due to not wrapping the logo in a div or imp ...

Adjust google maps to fill the entire vertical space available

I found this helpful resource for integrating Google Maps into my Ionic app. Everything is working smoothly, but I am trying to make the map fill the remaining height below the header. Currently, I can only set a fixed height in pixels like this: .angula ...

What is the best way to align text above a wrapper box?

After watching a tutorial on YouTube about creating a simple login form, I decided to customize it with some personal touches. I wanted to include a "Welcome" text above the login form, but when using h1, the text appeared next to the box rather than abov ...

Customizing Material-UI elements in React using CSS styling

My goal is to style all the <Chip> elements within a <Grid> that has the class .table-header, but they are not changing their style (I have a <p> that should be colored in red and it works). Why does the styling work for the <p> ele ...

Does the padding and margin of an element alter when the position is set to relative?

By utilizing relative positioning, an element can be moved in relation to its original position in normal flow. - Citation from the book "HTML&CSS: design and build websites" by John Duckett If an element has a relative position property, it opens up ...

What are the best ways to prevent JavaScript and CSS from blocking the render?

I ran my webpage through Google PageSpeed Insights and it keeps flagging an issue with render-blocking JavaScript and CSS in the above-the-fold content. The report indicates that there are 17 blocking scripts and 11 blocking CSS resources on the page. De ...

Is there a method to construct this? It appears quite challenging to create the intricate lines

I want to achieve this specific layout, but I am unsure how to align the lines next to the boxes. Should I use display or position properties to accomplish this? Image illustrating my desired outcome ...

Utilizing the Material Design card div element, however the elements inside the card are not properly aligned in the center

I'm attempting to include the align="center" attribute to this Material Design Lite card: <main class="mdl-layout__content" align="center"> <div class="mdl-cell mdl-card mdl-shadow--4dp portfolio-card"> <div class="mdl-card__title"&g ...

Incorporating Blank Class into HTML Tag with Modernizr

Currently, I am experimenting with Modernizr for the first time and facing some challenges in adding a class to the HTML tag as per the documentation. To check compatibility for the CSS Object Fit property, I used Modernizr's build feature to create ...

What is causing IE10 to display such a drastically different appearance?

I am currently implementing a cool image fade swap effect using CSS and JQuery along with an image sprite. JQuery: <script type="text/javascript> $(document).ready(function() { $('.otherbutton').append('<img class="hov ...

How to Create a Hover Drop Down Menu that Disappears When Not Hovered Over

When I hover over the drop down menus on my Navbar, they display perfectly. However, it's impossible to click on the items in the menu because as soon as I move the cursor away from the main nav, it disappears. I've tried adding display:block and ...

Tips for including a close button in a slidedown panel

Having this as a functional slidedown effect: ::-webkit-scrollbar { width: 0px; /* remove scrollbar space */ background: transparent; } /* optional: show position indicator in red */ ::-webkit-scrollbar ...