Scss Color Curve

The SCSS Color Curve (SCC) is a color mapping and generation tool that creates flexible, scalable color variations from a single base color. Unlike the deprecated SASS lighten and darken functions, SCC provides both non-linear (curved) and linear approaches to color adjustment.

The non-linear method uses asymptotic curves that pull a color toward luminance values of 100 (white) and 0 (black) while prioritizing saturation. This preserves richness and avoids the dull, muddy results that can occur with traditional lightening and darkening. The linear method, by contrast, adjusts color strictly by adding black or white, producing flatter, de-saturated tones when needed.

What’s New in Version 2.0.0 (2025-11-07)

This release restructures the project for clarity, flexibility, and improved color scaling.

Key improvements:

• Updated gradient quadrant logic to include 0, 50, and 100 luminance reference points.
• Core code separated into distinct modules:
  • Color Tool
  • Adjustments
  • Helpers
• Added support for custom color overrides at any scale point.
• Introduced a helper to convert all colors to hex by default.
• Added the ability to invert color scale direction.
• Namespaced color maps are now scalable, allowing more complex multi-theme systems.

How SCC Works

SCC provides two adjustment approaches:

1. Curved (Non-Linear) Approach — Default

Adjusts color along an asymptotic curve while prioritizing saturation.
This maintains tonal richness across the gradient.

color(#d62121, 2);   // → lighter version with maintained saturation
color(#d62121, -2);  // → darker version with maintained saturation

2. Linear Approach

Adds white (for positive values) or black (for negative values) at fixed percentages. Used for intentionally muted, less vibrant color shifts.

  color(#d62121, 2, true);   // adds white
  color(#d62121, -2, true);  // adds black

Each step in the linear approach is multiplied by 5%. So a step of 3 would change the color by 15%.

Special Handling for Grays and colors with 0 saturation

If the base color has 0% saturation (a gray), SCC automatically defaults to the linear method. This prevents accidental tinting (e.g., shifting pure black toward unintended reds).

Function Signature

@function color($color, $scale: 0, $linear: false, $gradientScale, $namespace: $color-settings) { ... }

| Argument | Description | | -------------- | --------------------------------------------------------------- | | $color | A direct color value or a named key in the color map. | | $scale | Number of steps to shift color (e.g., -4 to 4). | | $linear | Set to true for linear adjustment. Default: false (curved). | | $gradientScale | Controls curve intensity. Defaults to 3. | | $namespace | The color map to pull values from. Defaults to $color-settings. |

Color Maps

$color-settings

SCC pulls from a configurable map. The required structure:

$color-settings: (
  'colors': (
    'a': (
      0: #d62121,
      name: 'red',
      gradientScale: 3
    )
  )
)

Customizing Individual Scale Points

$color-settings: (
  'colors': (
    'b': (
      0: #e81c0d,
      gradientScale: 2,
      -2: #e60f2d,
      -1: #e70e16,
      1: #e9310c,
      2: #ea470b
    )
  )
);

Namespaces for Multiple Color Systems

Pass the namespace to target another color map:

$social: (
  'twitter': (
    0: #000000,
    name: 'twitter',
  )
);

color(twitter, 0, $namespace: $social); // returns #000000

Summary

SCC is designed for teams and systems that need:

• Scalable color themes

• UI components that maintain consistent vibrancy

• Design systems where color meaning must be preserved across states

It is ideal for product design systems, tokenized UI kits, and accessible theme architectures.

| Feature | Curved | Linear | | ----------------------------------- | ---------- | ------ | | Preserves saturation | ✅ Yes | ❌ No | | Produces rich gradients | ✅ Yes | ❌ No | | Good for UI themes | ✅ Yes | ✅ Yes | | Good for intentionally muted colors | ⚠️ Limited | ✅ Yes |