Converting hex color codes to hue rotation with a SCSS mixin tutorial

Question

Converting hex color codes to hue rotation with a SCSS mixin tutorial

To achieve the color transformation from red to green and blue, I utilized the grayscale filter and determined the appropriate hue-rotate degree by referring to this resource.

Now, I am looking to create a mixin in scss where I can input a hex color code and calculate the hue-rotation degree before returning it. How can I implement this mixin effectively?

.colorRed,.colorBlue, .colorGreen {filter:grayscale(0);}
.colorRed img {filter:hue-rotate(0deg);}
.colorBlue img {filter:hue-rotate(215deg);}
.colorGreen img {filter:hue-rotate(100deg);}

<span class="original"><img src="https://i.imgur.com/ZbOHifU.png" width="100px";></span>
<span class="colorGreen"><img src="https://i.imgur.com/ZbOHifU.png" width="100px";></span>
<span class="colorBlue"><img src="https://i.imgur.com/ZbOHifU.png" width="100px";></span>
<span class="colorRed"><img src="https://i.imgur.com/ZbOHifU.png" width="100px";></span>

p.s

I prefer not to use SVG solutions as indicated here

I also do not want to rely on JavaScript solutions for this task.

html css sass scss-mixins

Answer 1

Answer №1

Using scss mixins to achieve this task can be challenging, but with the help of Javascript, it becomes easier to filter based on hex color.

To see how filter values can be generated from a hex color, check out this example.

'use strict';

class Color {
  constructor(r, g, b) {
    // Constructor code
  }
  
  toString() {
    // Code for returning RGB string
  }

  // Other color manipulation methods

  clamp(value) {
    // Logic for clamping value within valid range
  }
}

class Solver {
  constructor(target, baseColor) {
    // Solver constructor logic
  }

  solve() {
    // Solve method implementation
  }

  // Other solver methods

  css(filters) {
    // CSS method for applying filters
  }
}

function hexToRgb(hex) {
  // Conversion function from hex to RGB
}

$(document).ready(() => {
  $('button.execute').click(() => {
    // Click event listener function
  });
});

.pixel {
  // CSS for pixel class styling
}

<table>
  <tr valign="top">
    <td width="50%">
      <fieldset>
        <p>
          <label>Target color</label> <input class="target" type="text" placeholder="target hex" value="#00a4d6"/>
        </p>
        <button class="execute">Compute Filters</button>
      </fieldset>
      <p>Real pixel, color applied through CSS <code>background-color</code>:</p>
      <div class="pixel realPixel"></div>

      <p>Filtered pixel, color applied through CSS <code>filter</code>:</p>
      <div class="pixel filterPixel"></div>

      <p class="filterDetail"></p>
      <p class="lossDetail"></p>
    </td>
  </tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 2

Using scss mixins to achieve this task can be challenging, but with the help of Javascript, it becomes easier to filter based on hex color.

To see how filter values can be generated from a hex color, check out this example.

'use strict';

class Color {
  constructor(r, g, b) {
    // Constructor code
  }
  
  toString() {
    // Code for returning RGB string
  }

  // Other color manipulation methods

  clamp(value) {
    // Logic for clamping value within valid range
  }
}

class Solver {
  constructor(target, baseColor) {
    // Solver constructor logic
  }

  solve() {
    // Solve method implementation
  }

  // Other solver methods

  css(filters) {
    // CSS method for applying filters
  }
}

function hexToRgb(hex) {
  // Conversion function from hex to RGB
}

$(document).ready(() => {
  $('button.execute').click(() => {
    // Click event listener function
  });
});

.pixel {
  // CSS for pixel class styling
}

<table>
  <tr valign="top">
    <td width="50%">
      <fieldset>
        <p>
          <label>Target color</label> <input class="target" type="text" placeholder="target hex" value="#00a4d6"/>
        </p>
        <button class="execute">Compute Filters</button>
      </fieldset>
      <p>Real pixel, color applied through CSS <code>background-color</code>:</p>
      <div class="pixel realPixel"></div>

      <p>Filtered pixel, color applied through CSS <code>filter</code>:</p>
      <div class="pixel filterPixel"></div>

      <p class="filterDetail"></p>
      <p class="lossDetail"></p>
    </td>
  </tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Converting hex color codes to hue rotation with a SCSS mixin tutorial

Answer №1

Similar questions

Tips on modifying responsive design with jQuery

Font Awesome icons are preventing the navigation bar from collapsing

Is it time for a Fluffy FOOTERITIS?

Designing custom gridviews using CSS in an ASP.NET application with Bootstrap

Can passing parameters between nested map functions cause any issues?

Every time I attempt to input text into the text area, the page automatically refreshes, preventing me from completing any entries

Navigate to a list item once Angular has finished rendering the element

Extracting unique text values from nested div elements within list items using Selenium with Python

Assigning websockets to a global variable may cause them to malfunction

Unable to align span vertically using font-style "Luckiest Guy" in CSS

How can indentation be disabled in asp.net controls?

React - A guide on accessing the scroll position of a div using JavaScript

Is it possible for the logo in the div and the height of the div to vanish after 10 seconds?

Can we bring flexbox inserts, removes, and item positioning to life through animation?

Displaying both English and Gujarati text in a single document | Font compatibility glitch

Round bottom border button

Alter the HTML tag once the text is encompassed within it

Prevent unauthorized access to HTML pages with a secure login system

Incorporating an external JSX file into an HTML page in a React project

Outline along a single edge