SCSS – Color management unified approach

Introduction

In digital design, colors convey meaning, set mood, and create coherence. Managing colors effectively across a project can be challenging, especially when dealing with multiple color formats such as HEX, RGB, and HSL. Our SCSS solution simplifies this by consolidating various color types into a single, manageable collection.

The $colors Map

We begin with an SCSS map named $colors, which serves as a centralized repository for our color palette. Each color is given a friendly name and assigned a value in one of the supported color formats.

$colors: (
  'danger': #dc3545,
  'warning': rgb(255, 193, 7),
  'info': rgba(23, 162, 184, 0.9),
  'success': #28a745,
  'ayaya': hsl(354.251497006, 70.4641350211%, 53.5294117647%),
  'test-dan': hsla(188.198757764deg, 77.7777777778%, 40.5882352941%, 0.9)
);

The color-mix Function

The color-mix function is the centerpiece of our color management system. It accepts a color value and an optional parameter to specify which color formats to return. It then performs a series of checks to determine the color type and converts it to other formats as needed.

• Flexibility: The function can handle all primary color formats: HEX, RGB(A), and HSL(A).
• Alpha Handling: For colors with an alpha channel, the function intelligently ‘fakes’ the opacity by mixing the color with white.
• Selective Format Return: Users can request specific color formats, or default to receiving all formats.

@use "sass:color";
@use "sass:map";
@use "sass:meta";
@use "sass:string";

@function color-mix($value, $typesToReturn: 'all') {
  @if (meta.type-of($value) == 'color') {
    $colorType: null;

    $colorType: if(string.index(#{$value}, '#') == 1, 'hex', null);

    @if (string.index(#{$value}, 'rgb')) {
      $colorType: 'rgb';
      @if (string.index(#{$value}, 'rgba')) {
        $colorType: 'rgba';
      }
    }

    @if (string.index(#{$value}, 'hsl')) {
      $colorType: 'hsl';
      @if (string.index(#{$value}, 'hsla')) {
        $colorType: 'hsla';
      }
    }

    @if ($colorType) {
      $map: ();
      @if ($colorType == 'rgba' or $colorType == 'hsla') {
        // Apply the white background to 'fake' the alpha layer
        $value: color.mix(rgb(color.red($value), color.green($value), color.blue($value)), #ffffff, color.alpha($value) * 100%);
      }

      @if ($typesToReturn == 'all' or map.has-key($typesToReturn, 'hex')) {
        $map: map.merge(
          $map,
          (
            'hex': $value
	  )
	);
      }

      @if ($typesToReturn == 'all' or map.has-key($typesToReturn, 'rgb')) {
	$map: map.merge(
	  $map,
	  (
	    'rgb': '#{color.red($value)},#{color.green($value)},#{color.blue($value)}'
	  )
	);
      }

      @if ($typesToReturn == 'all' or map.has-key($typesToReturn, 'hsl')) {
	$map: map.merge(
	  $map,
	  (
	    'hsl': '#{calc(color.hue($value) / 100 * 100)},#{color.saturation($value)},#{color.lightness($value)}'
	  )
	);
      }

      @return $map;
    }

    @warn 'The color #{$value} is not valid';

    @return null;
  } @else {
    @warn 'The value #{$value} is not a color';

    @return null;
  }
}

Applying the Colors

The SCSS script employs the color-mix function to iterate over the $colors map and generate corresponding CSS custom properties for each color in the requested formats.

• Convenience: The script generates CSS variables in the format --color-[name], making them easy to use in CSS.
• Multiple Formats: Each color is available in HEX, RGB and HSL as required, and you can specify the output format as a parameter in the color-mix() function.

@use 'sass:map';

:root {
  @each $color, $value in $colors {
    $color-mix: color-mix($value, ('hex': '', 'rgb': ''));
    @if ($color-mix) {
      $hex: map.get($color-mix, 'hex');
      @if ($hex) {
        --color-#{$color}: #{$hex};
      }

      $rgb: map.get($color-mix, 'rgb');
      @if ($rgb) {
        --color-rgb-#{$color}: #{$rgb};
      }

      $hsl: map.get($color-mix, 'hsl');
      @if ($hsl) {
        --color-hsl-#{$color}: #{$hsl};
      }
    }
  }
}

Expected Output

The script outputs a series of CSS custom properties that can be used throughout the project, ensuring consistency and ease of use.

/* Example of generated CSS variables */
--color-danger: #dc3545;
--color-rgb-danger: 220, 53, 69;
--color-warning: #ffc107;
--color-rgb-warning: 255, 193, 7;
--color-info: #2eabbf;
--color-rgb-info: 46, 171, 191;
--color-success: #28a745;
--color-rgb-success: 40, 167, 69;
--color-ayaya: #dc3545;
--color-rgb-ayaya: 220, 53, 69;
--color-test-dan: #2eabbf;
--color-rgb-test-dan: 46, 171, 191;

Conclusion

With this SCSS system, designers and developers can maintain a coherent color scheme across their projects, streamlining the design process and reducing the potential for errors. By centralizing color definitions and conversions, the system enhances maintainability and scalability, making it an invaluable tool for modern web development.