Alike Color Finder

Finds similar (e.g. alike) colors in CSS and CSS-like data, within a set likeness threshold. It compares #hex, rgb(), rgba(), hsl(), and hsla() colors.

Includes the CIEDE2000+Alpha (default), CIE94+Alpha, as well as "actual" mathematical absolute color diff strategies, switchable with a flag.

A web based interface to this exists here.

Why

Very similar but not identical colors seem to pop up really often in CSS files of any reasonable age, and I became sick of them. This started as a little script to help me find them in a stylesheet, and grew into this full-fledged tool.

This is fully usable within CI solutions to pass/fail a project.

Requirements

• PHP 5.4.0+ with CLI and SPL, PHP 7.4+ strongly recommended

Installation

Using composer, alike can be installed globally via:

$ composer global require 'donatj/alike-color-finder'

Or if you are using composer for the project you wish to test, you can simply add it as a vendor binary:

composer require --dev 'donatj/alike-color-finder'

Usage

Pass CSS-like files to scan as arguments.

$ alike main.css shared.scss

Or pipe CSS into stdin.

$ alike < main.css
$ css-generating-process | alike

Continuous Integration

By default, on finding any alike colors it will exit with an exit code of 2. This is enough to flag as a failure with most CI tools. This value is also configurable with the --exit-code option or can be set to 0 to be disabled.

Example Output

Help:

$ alike --help
usage: ./composer/bin/alike [<files>] [<dirs>]
      --strategy   [string] Color diff strategy.
            Options:
                actual
                cie94
                ciede2000 [default - aka. perceptual]
     --tolerance   [float] Computed Difference Tolerance - default 4
     --exit-code   [uint] Exit code to raise on alike. 0 for no exit code
       --pattern   [string] Regex pattern to match files against when argument is a directory
          --help   Displays this message

Single CSS File:

$ alike main.css
                    (4) #e3e3e3                    (4) #e4e4e4   Δ: 0.352
                        #e3e3e3                        #e4e4e4

                    (4) #e3e3e3                    (4) #e5e5e5   Δ: 0.705
                        #e3e3e3                        #e5e5e5

                    (4) #e4e4e4                    (4) #e5e5e5   Δ: 0.352
                        #e4e4e4                        #e5e5e5

                    (2) #454545                  * (3) #444444   Δ: 0.437
                        #454545                        #444444
                                                          #444

Total alike colors: 4 - Average Δ: 2.167 - Total colors: 17 - Distinct colors: 5

Credits

• SupplyHog, Inc - CIEDE2000 Calculations